鬼谷設計
首頁 網頁資源RESOURCES CSS
三層式下拉選單，直向收闔、橫向展開全收錄！

三層式下拉選單，直向收闔、橫向展開全收錄！

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;
}
其他類別