ebay и bootstrap: свернуть меню в javascript

Question

Как кто-то удобно знает - eBay не уважает, например. JQuery. Я хочу создать отзывчивый шаблон с отзывчивым меню, но я не знаю, что мне делать с меню. Я должен удалить все jQuery из начальной загрузки, и теперь переключатель меню не работает, например. смартфоны. Что мне делать?

<nav class="navbar navbar-default navbar-static-top"> 
<div class="container"> 
<div class="navbar-headerOne"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Store</a></li> 
      <li><a href="#payments">Payments</a></li> 
      <li><a href="#shipping">Shipping</a></li> 
      <li><a href="#returns">Returns</a></li> 
      <li><a href="#terms">Terms</a></li> 
      <li><a href="#gurantee">Gurantee</a></li> 
      <li><a href="#about">Abous us</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div><!--/.container --> 
</nav> 

Answer 1

Чтобы создать эти меню без javascript, вы должны использовать некоторые CSS. Может быть, эта ссылка поможет вам для подобных проблем: bootstrap-without-jquery

Вот решение для конкретной задачи:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<style> 
 
    /* Dropdown without JS */ 
 
    .dropdown-toggle:focus { 
 
     pointer-events: none; 
 
    } 
 

 
    .dropdown-toggle:focus + .dropdown-menu { 
 
     opacity: 1; 
 
     visibility: visible; 
 
     pointer-events: auto; 
 
    } 
 

 
    .dropdown-menu { 
 
     opacity: 0; 
 
     display: block; 
 
     visibility: hidden; 
 
     transition: visibility 0.5s; 
 
    } 
 
</style> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="dropdown-toggle navbar-toggle"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <ul class="dropdown-menu" style="position:absolute;right:0;"> 
 
       <li class=""> 
 
        <a href="/menu1/">menu1 <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class=""> 
 
        <a href="/menu2/">menu2 <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class="dropdown active"> 
 
        <a href="/menu3/">menu3 <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class=""><a href="/menu3/submenu1/">submenu1 
 
        <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class=""><a href="/menu3/submenu2/">submenu2 
 
        <span class="sr-only">(current)</span></a> 
 
       </li> 
 
      </ul> 
 
      <a class="navbar-brand" href="/" 
 
       style="background: white; padding-left: 50px;">App</a> 
 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class=""><a href="/menu1/">menu1 
 
        <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class=""><a href="/menu2/">menu2 
 
        <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class="dropdown active"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu3 
 
         <span class="caret"></span></a> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li class=""><a href="/menu3/typ/A/">A</a></li> 
 
         <li class=""><a href="/menu3/typ/B/">B</a></li> 
 
         <li class=""><a href="/menu3/typ/C/">C</a></li> 
 
         <li class=""><a href="/menu3/typ/D/">D</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class=""><a href="/menu3/submenu1/">menu3 
 
        <span class="sr-only">(current)</span></a> 
 
       </li> 
 
      </ul> 
 
      <i class="navbar-text navbar-right"> 
 
       <a href="/logout" style="">Logout</a> 
 
      </i> 
 
     </div> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>