金魚都能懂的網頁切版:14、15
在 side-menu 外增加 checkbox 的開關器
<input type="checkbox" name="收合式選單" id="side-menu-switch">
在 side-menu 裡增加收合的開關按鈕
<label for="side-menu-switch"><i class="fas fa-chevron-right"></i></label>
使用position把開關按鈕綁在side-menu上,並使用 transform 做出動畫效果
位置方面使用垂直置中到正中間
.side-menu{
width: 300px;
height: 100%;
padding: 50px 0;
box-sizing: border-box;
background: linear-gradient(45deg, #3381b0,#c2196c);
display: flex;
flex-direction: column;
box-shadow: 5px 0px 10px hsla(240, 50%, 20%, .6);
position: relative;
transform: translateX(-100%);
transition: .3s;
}
.side-menu label{
position: absolute;
width: 40px;
height: 80px;
background: #000;
color: #fff;
top: 0;
bottom: 0;
margin: auto;
right: -40px;
line-height: 80px;
text-align: center;
border-radius: 0 10px 10px 0;
}
使用 + 選取器,使.side-menu做移動
#side-menu-switch{
position: absolute;
z-index: -1;
opacity: 0;
}
#side-menu-switch:checked + .side-menu{
transform: translateX(0);
}
#side-menu-switch:checked + .side-menu label{
transform: scaleX(-1)
}
在選項內,使用ul>li>a 結構,來做包裝,可以使結構層次分明。
<ul>
<li>
<a href="#">金魚都能懂的網頁設計入門</a>
<ul>
<li><a href="#">day1</a></li>
<li><a href="#">day2</a></li>
<li><a href="#">day3</a></li>
</ul>
</li>
<li>
<a href="#">金魚都能懂的css選取器</a>
<ul>
<li><a href="#">day1</a></li>
<li><a href="#">day2</a></li>
<li><a href="#">day3</a></li>
</ul>
</li>
<li>
<a href="#">金魚都能懂的網頁怎麼切</a>
<ul>
<li><a href="#">day1</a></li>
<li><a href="#">day2</a></li>
<li><a href="#">day3</a></li>
</ul>
</li>
<li>
<a href="#">金魚都能懂的垂直置中</a>
<ul>
<li><a href="#">day1</a></li>
<li><a href="#">day2</a></li>
<li><a href="#">day3</a></li>
</ul>
</li>
</ul>
因為外層改以li形式包裹,因此改掉a連結
.nav li + li a::before{
content: '';
position: absolute;
top: 0;
right: 10px;
left: 10px;
border-top: 1px solid rgba(255, 255, 255, .4) ;
}
預設將ul內的資料做隱藏,
使用position,將資料點擊實在left: 100%;top: 6px;的地方呈現,並且固定在每個li旁邊
.nav li{
position: relative;
}
.nav ul{
display: none;
position: absolute;
left: 100%;
width: 300px;
background: rgba(255, 255, 255, .2);
box-shadow: 5px 5px 10px hsla(240, 50%, 20%, .6);
top: 6px;
}
觸碰到li會使它直接的子對象做改變而已
.nav li:hover > a{
background-color: rgba(0, 0, 0, .5);
transition: 2s;
}
.nav li:hover > ul{
display: block;
}