Отзывчивого меню, Многоуровневые, CSS и Javascript ТОЛЬКО, не JQuery

Question

Все,

не используя ТОЛЬКО яваскрипт и CSS, мне нужно создать адаптивное меню. Меню также должно поддерживать одноуровневые подменю.

Из-за ограничений памяти встроенного оборудования я не могу использовать внешние библиотеки/фреймворки.

Я просмотрел столько, сколько мог. Приведенные мною примеры не совсем отражают мою проблему.

• Если меню реагирует, он не поддерживает вложенные меню ...
• Если он поддерживает субменю, подменю расширения в меню, вместо того, чтобы заменить их ...
• Если он делает все, что нужно, то в JQuery, и я не могу использовать его ...

Я «кусочкам» вместе фрагменты кода (http://codepen.io/vpappano/pen/NRLRWJ)

Однако, сейчас я застрял следование ng проблема. Потому что вкладывается в подменю (ID = «myDropdown»)

<div class="dropdown-content" id="myDropdown"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
</div> 

в главном меню (ID = «myTopnav»), не удается отобразить подменю, когда в свернутом состоянии.

Единственное решение, которое я мог придумать, чтобы дублировать подменю (ID = «myDropdown2»)

<div class="dropdown-content" id="myDropdown2"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
</div> 

, который, конечно же, «так неправильно на многих различных уровнях» ...: -)

Можете ли вы улучшить мой код таким образом, что я использую только одно вхождение подменю? Ссылка на JSFiddle, CodePen или подобное было бы очень полезно ...

Пожалуйста, не jQuery. Я могу использовать только javascript и CSS. Однако, если вы знаете небольшую библиотеку js-css-only, которая достигает того, что я ищу (лицензия MIT), это также будет делать трюк ... :-)

Большое вам спасибо ...

Винченцо

Answer 1

Вот «не так просто» демо responsive navigation взяты из W3Schools, и модифицированный мной, чтобы показать простое поведение подменю.

Самая важная часть здесь, чтобы принять к сведению, что вам, возможно, придется создать функцию для закрытия других подменю, когда вы откроете другой и отредактируете нечувствительный CSS.

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
} 
 
function openSubMenu() { 
 
    var x = document.getElementById("submenuNav"); 
 
    if (x.hidden === true) { 
 
     x.hidden = false; 
 
    } else { 
 
     x.hidden = true; 
 
    } 
 
}

body {margin:0;} 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
ul.topnav li {float: left;} 
 

 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 
ul.topnav li a:hover {background-color: #555;} 
 

 
ul.topnav li.icon {display: none;} 
 

 
@media screen and (max-width:680px) { 
 
    ul.topnav li:not(:first-child) {display: none;} 
 
    ul.topnav li.icon { 
 
    float: right; 
 
    display: inline-block; 
 
    } 
 
} 
 

 
@media screen and (max-width:680px) { 
 
    ul.topnav.responsive {position: relative;} 
 
    ul.topnav.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
}

<ul class="topnav" id="myTopnav"> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact" onclick="openSubMenu()">Contact</a> 
 
    <ul class="subnav" id="submenuNav" hidden > 
 
     <li><a href="#contact" class="submenu">Sub Menu1</a></li> 
 
     <li><a href="#contact" class="submenu">Sub Menu2</a></li> 
 
     <li><a href="#contact" class="submenu">Sub Menu3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#about">About</a></li> 
 
    <li class="icon"> 
 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> 
 
    </li> 
 
</ul> 
 

 
<div style="padding-left:16px"> 
 
    <h2>Responsive Topnav Example</h2> 
 
    <p>Resize the browser window to see how it works.</p> 
 
</div>