2016-03-30 8 views
1

ちょっと、私はタブのリストであるメニューを持っている、各タブは、垂直線を使用して、他のタブから別です。私は、このメニューをより敏感にする方法を見つけようとしています。例えば、ハンバーガーメニューを作るなどです。これまでのところ、ブートストラップなしで応答性の高いコンポーネントを作成するという原則に精通していないため、私は成功しませんでした。 コードは、あなたがCSSで@mediaクエリを使用することができ、ここでレスポンシブメニュー(ハンバーガーメニュー)を作成する方法

.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>

+0

なぜドン」動作しますブートストラップを使用していますか? –

答えて

2

です。

さまざまな画面サイズに異なるスタイルを定義できます。 通常、ウェブサイトの動作が異なる場合は、いくつかのブレークポイントを定義します。ここではより多くの情報

ため

チェックアウトUsing media queriesResponsive Menu Concepts は、メニューはレイアウトモードを変更する参照してビューのサイズを変更しようとすると、基本的な考え方を実証very basic example on JSFiddleです。この次のコードを試してみてください、あなたはブートストラップを使用している場合は、メニュー

+0

私は知っていますが、どうすればハンバーガーメニューを作れますか? – Brk

+0

明らかに私のスタイルはハンバーガーメニューを破壊します。結果は https://jsfiddle.net/BrkCoder/f44hnkj9/です。 – Brk

2

を見て、「ハンバーガー」モードで緑色のボックスの上にカーソルを置く:

<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> 
+0

http://codepen.io/Barak/pen/Yqxaqrを試しましたが、成功しませんでした。 – Brk

+0

外部CSSを削除するには、Bootstrap CSS – Cherish

0

続きを試験し、

<!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> 
関連する問題