三層式下拉選單,直向收闔、橫向展開全收錄!
2021.11.03
三層式下拉選單該怎麼做?
網路上找的三層選單有又很多種不同的收闔方式,不是我想要的
今天整理三種不同的menu選單,找一個最適合的開始動手嘗試吧!
往下開
展示
-
-
- 第三層
- 第三層
-
- 第三層
- 第三層
-
HTML
複製已複製
<div class="shape-ex1">
<ul class="shape-ex1-list-box">
<li class="shape-ex1-list">
<label class="shape-ex1-list-name" for="ex1_1-checkbox">第一層</label>
<input type="checkbox" name="ex1_1-input" id="ex1_1-checkbox" />
<ul class="shape-ex1-list-sec-box">
<li class="shape-ex1-list-sec">
<label class="shape-ex1-list-sec-name" for="ex1_2_1-checkbox">第二層</label>
<input type="radio" name="ex1_2-input" id="ex1_2_1-checkbox" />
<ul class="shape-ex1-list-thr-box">
<li class="shape-ex1-list-thr-name"><span>第三層</span></li>
<li class="shape-ex1-list-thr-name"><span>第三層</span></li>
</ul>
</li>
<li class="shape-ex1-list-sec">
<label class="shape-ex1-list-sec-name" for="ex1_2_2-checkbox">第二層</label>
<input type="radio" name="ex1_2-input" id="ex1_2_2-checkbox" />
<ul class="shape-ex1-list-thr-box">
<li class="shape-ex1-list-thr-name"><span>第三層</span></li>
<li class="shape-ex1-list-thr-name"><span>第三層</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
複製已複製
.shape-ex1{
display: block;
transition: all .3s linear;
}
.shape-ex1 li::marker{
font-size: 0;
}
.shape-ex1 input[type="checkbox"],
.shape-ex1 input[type="radio"]{
position: absolute;
opacity: 0;
pointer-events: none;
top: 0;
}
.shape-ex1-list{
width: max-content;
position: relative;
background-color: #eee;
}
.shape-ex1-list-name{
line-height: 1;
font-size: 1.25rem;
letter-spacing: 0.06em;
box-sizing: border-box;
padding: 10px 10px;
padding-right: 20px;
position: relative;
display: block;
}
.shape-ex1-list-name::after{
content:'';
width: 0;
height: 0;
border-top: 7px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
top: calc(50% - 4px);
right: 5px;
}
.shape-ex1-list-sec-box{
width: max-content;
max-width: 200px;
position: absolute;
top: 100%;
left: 0;
box-sizing: border-box;
background-color: #e1e1e1;
overflow-y: auto;
max-height: 260px;
display: none;
}
.shape-ex1-list-sec{
position: relative;
}
.shape-ex1-list-sec-name{
line-height: 1;
font-size: 1.125rem;
letter-spacing: 0.06em;
box-sizing: border-box;
padding: 10px 10px;
padding-right: 20px;
position: relative;
display: block;
}
.shape-ex1-list-sec-name::after{
content:'';
width: 0;
height: 0;
border-top: 7px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
top: calc(50% - 4px);
right: 5px;
}
.shape-ex1-list-thr-box{
display: none;
box-sizing: border-box;
padding: 0 10px;
background-color: #d1d1d1;
}
.shape-ex1-list-thr-name{
box-sizing: border-box;
padding: 10px 10px;
}
.shape-ex1-list-thr-name span{
line-height: 1;
font-size: 1rem;
letter-spacing: 0.06em;
}
.shape-ex1 input[type="checkbox"]:checked + ul,
.shape-ex1 input[type="radio"]:checked + ul{
display: block;
}
往下往右開
展示
-
-
- 第三層
- 第三層
-
- 第三層
- 第三層
-
HTML
複製已複製
<div class="shape-ex2">
<ul class="shape-ex2-list-box">
<li class="shape-ex2-list">
<label class="shape-ex2-list-name" for="ex2_1-checkbox">第一層</label>
<input type="checkbox" name="ex2_1-input" id="ex2_1-checkbox" />
<ul class="shape-ex2-list-sec-box">
<li class="shape-ex2-list-sec">
<label class="shape-ex2-list-sec-name" for="ex2_2_1-checkbox">第二層</label>
<input type="radio" name="ex2_2-input" id="ex2_2_1-checkbox" />
<ul class="shape-ex2-list-thr-box">
<li class="shape-ex2-list-thr-name"><span>第三層</span></li>
<li class="shape-ex2-list-thr-name"><span>第三層</span></li>
</ul>
</li>
<li class="shape-ex2-list-sec">
<label class="shape-ex2-list-sec-name" for="ex2_2_2-checkbox">第二層</label>
<input type="radio" name="ex2_2-input" id="ex2_2_2-checkbox" />
<ul class="shape-ex2-list-thr-box">
<li class="shape-ex2-list-thr-name"><span>第三層</span></li>
<li class="shape-ex2-list-thr-name"><span>第三層</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
複製已複製
.shape-ex2{
display: block;
transition: all .3s linear;
}
.shape-ex2 li::marker{
font-size: 0;
}
.shape-ex2 input[type="checkbox"],
.shape-ex2 input[type="radio"]{
position: absolute;
opacity: 0;
pointer-events: none;
top: 0;
}
.shape-ex2-list{
width: max-content;
position: relative;
background-color: #eee;
}
.shape-ex2-list-name{
line-height: 1;
font-size: 1.25rem;
letter-spacing: 0.06em;
box-sizing: border-box;
padding: 10px 10px;
padding-right: 20px;
position: relative;
display: block;
}
.shape-ex2-list-name::after{
content:'';
width: 0;
height: 0;
border-top: 7px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
top: calc(50% - 4px);
right: 5px;
}
.shape-ex2-list-sec-box{
width: max-content;
max-width: 200px;
position: absolute;
top: 100%;
left: 0;
box-sizing: border-box;
background-color: #e1e1e1;
max-height: 260px;
display: none;
}
.shape-ex2-list-sec{
position: relative;
}
.shape-ex2-list-sec-name{
line-height: 1;
font-size: 1.125rem;
letter-spacing: 0.06em;
box-sizing: border-box;
padding: 10px 10px;
padding-right: 20px;
position: relative;
display: block;
}
.shape-ex2-list-sec-name::after{
content:'';
width: 0;
height: 0;
border-left: 7px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
position: absolute;
top: calc(50% - 5px);
right: 5px;
}
.shape-ex2-list-thr-box{
width: max-content;
max-width: 200px;
position: absolute;
top: 0;
left: 100%;
box-sizing: border-box;
padding: 0 10px;
background-color: #d1d1d1;
display: none;
}
.shape-ex2-list-thr-name{
box-sizing: border-box;
padding: 10px 10px;
}
.shape-ex2-list-thr-name span{
line-height: 1;
font-size: 1rem;
letter-spacing: 0.06em;
}
.shape-ex2 input[type="checkbox"]:checked + ul,
.shape-ex2 input[type="radio"]:checked + ul{
display: block;
}
往右開
展示
-
-
- 第三層
- 第三層
-
- 第三層
- 第三層
-
HTML
複製已複製
<div class="shape-ex3">
<ul class="shape-ex3-list-box">
<li class="shape-ex3-list">
<label class="shape-ex3-list-name" for="ex3_1-checkbox">第一層</label>
<input type="checkbox" name="ex3_1-input" id="ex3_1-checkbox" />
<ul class="shape-ex3-list-sec-box">
<li class="shape-ex3-list-sec">
<label class="shape-ex3-list-sec-name" for="ex3_2_1-checkbox">第二層</label>
<input type="radio" name="ex3_2-input" id="ex3_2_1-checkbox" />
<ul class="shape-ex3-list-thr-box">
<li class="shape-ex3-list-thr-name"><span>第三層</span></li>
<li class="shape-ex3-list-thr-name"><span>第三層</span></li>
</ul>
</li>
<li class="shape-ex3-list-sec">
<label class="shape-ex3-list-sec-name" for="ex3_2_2-checkbox">第二層</label>
<input type="radio" name="ex3_2-input" id="ex3_2_2-checkbox" />
<ul class="shape-ex3-list-thr-box">
<li class="shape-ex3-list-thr-name"><span>第三層</span></li>
<li class="shape-ex3-list-thr-name"><span>第三層</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
複製已複製
.shape-ex3{
display: block;
transition: all .3s linear;
}
.shape-ex3 li::marker{
font-size: 0;
}
.shape-ex3 input[type="checkbox"],
.shape-ex3 input[type="radio"]{
position: absolute;
opacity: 0;
pointer-events: none;
top: 0;
}
.shape-ex3-list{
width: max-content;
position: relative;
background-color: #eee;
}
.shape-ex3-list-name{
line-height: 1;
font-size: 1.25rem;
letter-spacing: 0.06em;
box-sizing: border-box;
padding: 10px 10px;
padding-right: 20px;
position: relative;
display: block;
}
.shape-ex3-list-name::after{
content:'';
width: 0;
height: 0;
border-left: 7px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
position: absolute;
top: calc(50% - 5px);
right: 5px;
}
.shape-ex3-list-sec-box{
width: max-content;
max-width: 200px;
position: absolute;
top: 0;
left: 100%;
box-sizing: border-box;
background-color: #e1e1e1;
max-height: 260px;
display: none;
}
.shape-ex3-list-sec{
position: relative;
}
.shape-ex3-list-sec-name{
line-height: 1;
font-size: 1.125rem;
letter-spacing: 0.06em;
box-sizing: border-box;
padding: 10px 10px;
padding-right: 20px;
position: relative;
display: block;
}
.shape-ex3-list-sec-name::after{
content:'';
width: 0;
height: 0;
border-left: 7px solid #000;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
position: absolute;
top: calc(50% - 5px);
right: 5px;
}
.shape-ex3-list-thr-box{
width: max-content;
max-width: 200px;
position: absolute;
top: 0;
left: 100%;
box-sizing: border-box;
padding: 0 10px;
background-color: #d1d1d1;
display: none;
}
.shape-ex3-list-thr-name{
box-sizing: border-box;
padding: 10px 10px;
}
.shape-ex3-list-thr-name span{
line-height: 1;
font-size: 1rem;
letter-spacing: 0.06em;
}
.shape-ex3 input[type="checkbox"]:checked + ul,
.shape-ex3 input[type="radio"]:checked + ul{
display: block;
}