先上
codepen
https://codepen.io/frenkieli/pen/agZbgq
製作純css漢堡選單教學
關鍵html
<header>
<input type="checkbox" name="input_nav" id="input_nav" class="displaynone">
<label for="input_nav"><span></span></label>
<nav class="noto">
<h6 class="displaynone">主選單</h6>
<ul>
<li><a href="#">特色</a></li>
<li><a href="#">料理</a></li>
<li><a href="#">禮品</a></li>
<li><a href="#">預約</a></li>
</ul>
</nav>
</header>
然後css部分
將寫出基本label形狀
header label {
float: right;
margin-top: 5px;
margin-right: 10px;(離邊邊遠一點)
width: 50px;
height: 50px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.3);(邊寬造型)
font-size: 0;
transition: 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);(這部分是動畫)
}
然後是span形狀和位置
header label span {
display: block;(為了給高度要先變成塊元素)
width: 40px;
height: 0;
margin: auto;(置中)
transform: rotate(0deg);
margin-top: 23px;
border-bottom: 5px solid #ccc;
position: relative;
border-right: 0px solid #ccc;
transition: 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
接下來寫出另外兩條的位置
這邊不能使用陰影寫，因為要做變化所以要使用偽元素
首先寫上面那條
span::before{
position: absolute;
width: 100%;
content:'';
/* display: block; */
border-bottom: 5px solid #ccc;
bottom: 8px;
left: 0;
transition: 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
寫下面那條（before我習慣寫成前面跟上面的東西）
span::after{
position: absolute;
width: 100%;
content:'';
/* display: block; */
border-bottom: 5px solid #ccc;
top: 13px;
right: 0;
transition: 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
然後基本形狀就完成拉！
你的選單此時應該長得像一個方塊加三條槓
然後開始寫變化（這邊上面已經加入過度標籤了，所以變化時會直接變成動畫）
首先將寫主要span，她是中間的Ｌ
#input_nav:checked+label span{
width: 20px;（要縮小一點）
height: 20px;（多一根吧！）
margin-top: 5px;
transform: rotate(45deg);
border-bottom: 5px solid #CC962E;
border-right: 5px solid #CC962E;
border-radius: 3px;（讓他縮成有一點圓角）
}
更改偽元素的位置（上面那根讓他站到右邊）
#input_nav:checked+label span::before{
bottom: 11px;
left: 20px;
transform: rotate(30deg);
border-radius: 3px;
border-bottom: 5px solid #CC962E;
}
下面那根站到左邊
#input_nav:checked+label span::after{
top: 28px;
right: 3px;
border-radius: 3px;
transform: rotate(60deg);（記得轉角度喔）
border-bottom: 5px solid #CC962E;
}
讓方框變成圓框
#input_nav:checked + label{
border-radius:25px;
border: 1px dotted #CC962E;
}
這個漢堡選單就完成囉！
補上細節
讓選單可以分段飛進來
header ul li a {
display: block;
text-decoration: none;
height: 30px;
width: 100%;
font-size: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.5);
padding: 10px 0;
color: #AB7325;
position: absolute;
top: 0px;
}
header ul li {
text-align: center;
margin: auto;
position: absolute;
width: 100%;
transition: 0.5s;
}
header ul li:nth-child(1) {
margin-top: 0;
}
header ul li:nth-child(2) {
margin-top: 0;
left: 50px;
top: 51px;
}
header ul li:nth-child(3) {
margin-top: 0;
left: 100px;
top: 102px;
}
header ul li:nth-child(4) {
margin-top: 0;
left: 150px;
top: 153px;
}
然後就完成囉！（讚！）
請先 登入 以發表留言。