ハンバーガーCSS
私は、この短いチュートリアルを私のオリジナルのさえずりポストのフィードバックに応じてJSなしでハンバーガーメニューを作る方法に合わせました.
エンジョイ😁!
CSS擬似クラスを聞いたことがありますか
これは、リンクによって呼び出されたアンカーIDを持つ要素を表します.
例えば、
我々がクリックするとき
別のリンクをクリックして
HTMLコード全体を示します.
使っているmaterial icons HTMLファイルの先頭にcdnを追加します.
The The 他のリンク(ホーム、プロフィール、連絡先)と 今、我々はちょうどCSSのしわを加える必要があります✨.
ハンバーガーリンクは位置がある
メニューの位置
一貫性のために、私はハンバーガーを置きました、そして、同じ角の近くの関連.
移行を加えることによって
そして、Yを0にリセットし、メニューを表示します
GPUサポートを得るために高さの代わりに変換をアニメーション化するように私に言ってくれてありがとう.
エンジョイ😁!
ターゲット
CSS擬似クラスを聞いたことがありますか
:target ? これは、リンクによって呼び出されたアンカーIDを持つ要素を表します.
例えば、
p のhome とa リンク集href=#home :<p id="home">Home</p>
<a href="#home">Go to Home</a>
p:target {
color: red;
}
我々がクリックするとき
a リンク、ターゲットのテキストp 赤への変化.別のリンクをクリックして
:target スタイルは隠される.<p id="home">Home</p>
<a href="#home">Go to Home</a>
<a href="#">Go somewhere else</a>
HTMLコード全体を示します.
使っているmaterial icons HTMLファイルの先頭にcdnを追加します.
<head>
<!-- ... -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<ul class="menu" id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
<a class="close" href="#">
<span class="material-icons">
close
</span>
</a>
</ul>
<a class="hamburger" href="#menu">
<span class="material-icons">
menu
</span>
</a>
material-icons クラスとタグの間にキーワードを追加する <span class="material-icons">
close
</span>
ul のIDを持つmenu . これは、メニューと閉じるアイコンのリンクを保持します.a クラスでhamburger HREFを持っている#menu , それをクリックすると、オンになります:target スタイルul メニュー.close リンクは:target スタイルul . ハンバーガーリンクは位置がある
fixed ページの流れから取り出す.メニューの位置
fixed さらに大きくz-index ハンバーガーリンクよりもリンクを上にメニューを置く.一貫性のために、私はハンバーガーを置きました、そして、同じ角の近くの関連.
.hamburger {
position: fixed;
/* a large z-index puts the ham button above the rest of the page*/
z-index: 99;
background: white;
border: none;
cursor: pointer;
top: 1rem;
right: 1rem;
}
.menu {
position: fixed;
/* give the menu a larger z-index than the ham link
to put the menu above it */
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
/* basic menu styling*/
list-style: none;
background: black;
display: flex;
flex-direction: column;
/* animate slide up/down */
transform: translateY(-100%);
transition: transform 0.2s ease;
}
.close {
position: absolute;
border: none;
color: white;
cursor: pointer;
top: 1rem;
right: 1rem;
}
transform: translateY(-100%); . y軸上で100 %を翻訳すると、画面の上に100 %が動きます.移行を加えることによって
transition: transform 0.2s; Transformでは、Transform Tranlateyの値が変更されたときにアニメーション内の小さなスライドを取得します.そして、Yを0にリセットし、メニューを表示します
:target ..menu:target {
/* show menu */
transform: translateY(0);
}
Reference
この問題について(ハンバーガーCSS), 我々は、より多くの情報をここで見つけました https://dev.to/ljcdev/hamburger-css-no-js-2dfaテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol