2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrapのハンバーガーメニューにドロップダウンを追加する

Posted at

Bootstrapのハンバーガーメニューを、上手に整理していくためには、メニューの中に、さらにプルダウンメニューを入れましょう。
ポイントは、リストタグの中に、トグルメニューを書くだけです。
class="caret"を使うと、プルダウンの矢印が表示されます。

<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="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    
    <div class="collapse navbar-collapse" id="defaultNavbar1" >
      <ul class="nav navbar-nav">
        <li><a href="#"><span class="glyphicon glyphicon-picture"></span> 作品リスト</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span> 注文・発送</a></li>
        
		<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">プルダウン<b class="caret"></b></a>
			<ul class="dropdown-menu">
				<li><a href="#">リスト1</a></li>
				<li><a href="#">リスト2</a></li>
				<li><a href="#">リスト3</a></li>
			</ul>
		</li>      
        
        <li><a href="artist_logout.php"><span class="glyphicon glyphicon-off"></span> ログアウト</a></li>
      </ul>          
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>

###サンプル
http://7135244fd63eb4a7.lolipop.jp/Qiitasample/Qiita_0001.php

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?