Как создать отзывчивое меню (меню гамбургера)

Эй, у меня есть меню, которое представляет собой список вкладок, каждая вкладка отдельно от другой вкладки, используя вертикальную линию. Я пытаюсь понять, как сделать это меню более отзывчивым, например, сделать какое-то меню гамбургеров. до сих пор мне не удалось, потому что я не знаком с принципами создания чувствительных компонентов очень хорошо без бутстрапа. Код здесьКак создать отзывчивое меню (меню гамбургера)

.tabs { 
 
    padding: 0; 
 
} 
 

 
.tabs > li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    height: 25px; 
 
    line-height: 25px; 
 
    padding:0px 15px ; 
 
    color: #535355; \t 
 
    font-size: 18px; 
 
    font-family:'Segue UI', Calibri, arial, verdana, sans-serif; 
 
    font-weight:bold; 
 
    text-decoration: none; 
 
    vertical-align: top; 
 
    cursor: pointer; 
 
    border-right: 1px solid #D1D1D1; 
 
} 
 

 
.tabs > li:last-child{ 
 
    border-right:none; 
 
} 
 

 
.tabs-link{ 
 
    color: #4C4C4C;  
 
    font-size: 18px; 
 
    text-decoration: none; 
 
} 
 

 
.tabs-link:hover, 
 
.tabs-link:link{ 
 
    color: #3983C4;  
 
    text-decoration: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<nav id="tabs_navbar" class="navbar navbar-collapse"> 
 
    <ul class="tabs"> 
 
     <!-- tabs navbar--> 
 
     <li class="tabs-item"> 
 
      <a href="#/AnalyticsSummary" class="tabs-link">Analytics Summary</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/TDCG" class="tabs-link">TDCG</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/keygas" class="tabs-link">Key Gas</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/DuvalTriangle" class="tabs-link">Duval Triangle</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/DuvalPentagon" class="tabs-link">Duval Pentagon</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/NEI" class="tabs-link">NEI</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/PTX" class="tabs-link">PTX</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/GasTrends" class="tabs-link">Gas Trends</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/DataTable" class="tabs-link">Data Table</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/Playground" class="tabs-link">Playground</a> 
 
     </li> 
 
     <li class="tabs-item"> 
 
      <a href="#/AnalyticsSettings" class="tabs-link">Analytics Settings</a> 
 
     </li> 
 
    </ul> 
 
</nav>

источник

2016-03-30 Brk

Почему бы» Вы используете Bootstrap? –

Вы можете использовать @media запросы в CSS.

они позволяют вам определять разные стили для разных размеров экрана. Обычно вы определяете несколько точек разрыва, где сайт ведет себя по-другому.

контроль Using media queries и Responsive Menu Concepts для получения дополнительной информации

Вот very basic example on JSFiddle демонстрирует основную идею, попробуйте изменить размер, чтобы увидеть вид меню меняется режим разметки. наведите курсор мыши на зеленом поле в режиме «гамбургер», чтобы увидеть меню

источник

2016-03-30 13:44:32 dcohenb

Я знаю, но как мне сделать меню для гамбургеров? – Brk

По-видимому, мой стиль уничтожает меню гамбургеров, вот результат https://jsfiddle.net/BrkCoder/f44hnkj9/. – Brk

Если вы используете Bootstrap, то попробуйте этот следующий код:

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <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" aria-expanded="false" style="height: 1px;"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div><!--/.container-fluid --> 
    </nav>

источник

2016-03-30 14:12:43 Cherish

Я пробовал http://codepen.io/Barak/pen/Yqxaqr, но безуспешно. – Brk

Вы должны удалить свой внешний CSS только с помощью Bootstrap css – Cherish

После протестирована и работает

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <title>Bootstrap Navigation Menu</title> 
     <!-- Latest compiled and minified CSS --> 
     <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <!-- Optional theme --> 
     <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
    </head> 
    <body> 
     <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="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <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="#">Brand</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="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
         <li><a href="#">Link</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </li> 
        </ul> 
        <form class="navbar-form navbar-left" role="search"> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Search"> 
         </div> 
         <button type="submit" class="btn btn-default">Submit</button> 
        </form> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#">Link</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </body> 
</html>

источник

2016-03-30 15:28:56 Craz1k0ek

Как создать отзывчивое меню (меню гамбургера)

ответ

Смежные вопросы