他のオプションを押し下げる縦型ドロップダウンメニュー？

Question

私はモバイルフレンドリーなウェブサイトのためにSidenavに取り組んでいます。私は、サイドバー内に有効な複数レベルのホバーダブルなドロップダウンメニューを持っています。

リンクをオーバーラップさせるのではなく、その下のリンクをアコーディアンメニューのようにプルダウンすることをお勧めします。

私は他の解決策を見てきましたが、私は彼らの周りに頭をラップするのに問題があります。

ありがとうございました！ここで

メニューのための私の現在のコードです：

function openNav() { 
 
    document.getElementById("mySidenav").style.width = "20%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
}

body { 
 
    font-family: Centaur; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: black; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.sidenav a:hover { 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav { 
 
    padding-top: 15px; 
 
    } 
 
    .sidenav a { 
 
    font-size: 18px; 
 
    } 
 
    .dropbtn { 
 
    background-color: transparent; 
 
    padding: 2%; 
 
    font-size: 100%; 
 
    border: none; 
 
    cursor: pointer; 
 
    } 
 
    .dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    .dropdown1 { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    min-width: 160px; 
 
    z-index: 1; 
 
    } 
 
    .dropdown-content1 { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    min-width: 160px; 
 
    z-index: 1; 
 
    } 
 
    .dropdown-content1 a { 
 
    text-decoration: none; 
 
    display: block; 
 
    } 
 
    .dropdown-content a { 
 
    text-decoration: none; 
 
    display: block; 
 
    } 
 
    .dropdown1:hover .dropdown-content1 { 
 
    display: block; 
 
    } 
 
    .dropdown:hover .dropdown-content { 
 
    display: block; 
 
    }

<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div style="width: 15%" id="navtaner"> 
 
    <a href="">Home</a> 
 
    <div class="dropdown"> 
 
     <a class="dropbtn">Swords</a> 
 
     <div class="dropdown-content" style=" float: right; margin-right:-55%"> 
 
     <a href="#">Museum Line</a> 
 
     <div class="dropdown1"> 
 
      <a href="#">Next Generation</a> 
 
      <div class="dropdown-content1"> 
 
      <a href="#">Roman Swords</a> 
 
      <a href="#">Viking Swords</a> 
 
      <a href="#">Medieval One-Handed Swords </a> 
 
      <a href="#">Medieval Hand and-a-half swords</a> 
 
      <a href="#">Medieval Two-Handed Swords</a> 
 
      <a href="#">Single-Edged Swords</a></div> 
 
     </div> 
 
     <a href="#">Squire Line</a> 
 
     <a href="#">Maestro Line</a> 
 
     <a href="#">Skirmish Line</a> 
 
     <a href="#">Special Edition</a> 
 
     </div> 
 
    </div> 
 

 

 

 
    <div class="dropdown"> 
 
     <a class="dropbtn">About</a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Albion News</a> 
 
     <a href="#">Albion Media</a> 
 
     <a href="#">Albion Story</a> 
 
     <a href="#">Testimonials</a> 
 
     <a href="#">References</a> 
 
     <a href="#">Gallary</a> 
 
     </div> 
 
    </div> 
 
    <a href="#">Order</a> 
 
    </div> 
 
</div> 
 

 

 
<span style="font-size:30px;cursor:pointer; float: right" onclick="openNav()">&#9776; MENU</span>

Answer 1

使用この

JS

function toggleNav() { 
    var element = document.getElementById("navtaner"); 
     element.classList.toggle("navtaner2"); 
    } 

CSS

body { 
    font-family: Centaur; 
    } 
    .navtaner { 
    display:none; 
    } 
    .navtaner2 { 
    display:block; 
    } 
    .sidenav { 
    height: ; 
    width: 20%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    right: 0; 
    background-color: black; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
    } 

    .sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
    } 

    .sidenav a:hover { 
    color: #f1f1f1; 
    } 

    .sidenav .closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
    } 

    @media screen and (max-height: 450px) { 
    .sidenav { 
     padding-top: 15px; 
    } 
    .sidenav a { 
     font-size: 18px; 
    } 
    .dropbtn { 
     background-color: transparent; 
     padding: 2%; 
     font-size: 100%; 
     border: none; 
     cursor: pointer; 
    } 
    .dropdown { 
     position: relative; 
     display: inline-block; 
    } 
    .dropdown1 { 
     position: relative; 
     display: inline-block; 
    } 
    .dropdown-content { 
     display: none; 
     position: absolute; 
     right: 0; 
     min-width: 160px; 
     z-index: 1; 
    } 
    .dropdown-content1 { 
     display: none; 
     position: absolute; 
     right: 0; 
     min-width: 160px; 
     z-index: 1; 
    } 
    .dropdown-content1 a { 
     text-decoration: none; 
     display: block; 
    } 
    .dropdown-content a { 
     text-decoration: none; 
     display: block; 
    } 
    .dropdown1:hover .dropdown-content1 { 
     display: block; 
    } 
    .dropdown:hover .dropdown-content { 
     display: block; 
    } 

HTML

<div id="mySidenav" class="sidenav"> 
    <span style="width:100%;font-size:30px;cursor:pointer; float: right;color:white;" onclick="toggleNav()">&#9776; MENU</span> 
    <div style="width: 15%;" id="navtaner" class="navtaner"> 
     <a href="">Home</a> 
     <div class="dropdown"> 
     <a class="dropbtn">Swords</a> 
     <div class="dropdown-content" style=" float: right; margin-right:-55%"> 
      <a href="#">Museum Line</a> 
      <div class="dropdown1"> 
      <a href="#">Next Generation</a> 
      <div class="dropdown-content1"> 
       <a href="#">Roman Swords</a> 
       <a href="#">Viking Swords</a> 
       <a href="#">Medieval One-Handed Swords </a> 
       <a href="#">Medieval Hand and-a-half swords</a> 
       <a href="#">Medieval Two-Handed Swords</a> 
       <a href="#">Single-Edged Swords</a></div> 
      </div> 
      <a href="#">Squire Line</a> 
      <a href="#">Maestro Line</a> 
      <a href="#">Skirmish Line</a> 
      <a href="#">Special Edition</a> 
     </div> 
     </div> 



     <div class="dropdown"> 
     <a class="dropbtn">About</a> 
     <div class="dropdown-content"> 
      <a href="#">Albion News</a> 
      <a href="#">Albion Media</a> 
      <a href="#">Albion Story</a> 
      <a href="#">Testimonials</a> 
      <a href="#">References</a> 
      <a href="#">Gallary</a> 
     </div> 
     </div> 
     <a href="#">Order</a> 
    </div> 
    </div> 

https://codepen.io/lafortuna18/pen/qPrwjr