Q&A
Bootstrapのテーマで以下ページのようなNavbarを探しているのですが、
検索の仕方もしくは具体的なテーマを教えていただけますでしょうか？
例えば、画像のように『カメラ/撮影』にマウスカーソルを当てると
マウスカーソルを当てるとドロップダウンで左右下へピロっと下がってくれるテーマを探しています。
宜しくお願いします。
回答2件
0
bootstrapの付加機能は「テーマ」ではなく「プラグイン」という言葉が使われています(jqueryのプラグイン)。
なので、「bootstrap navbar plugin」などで検索すれば目的のページが見つかるかと。
横からメニューがスライドするプラグインはいくつかありますが、Bootstrap Offcanvasが一番簡単かと思います。
ただ、参考サイト(LIG社のサイト)はかなり手を加えているようなので、単純にプラグインを使えば同じような動作になるとは限りません。
がんばってカスタマイズしないとあのような見栄えのいいサイトにはならないでしょうね。
(追記)
マウスオーバーでメニューを開くだけなら3行足すだけでok。
css
1.dropdown:hover > .dropdown-menu { 2 display: block; 3}
投稿2017/11/22 06:08
編集2017/11/22 12:21
総合スコア469
0
ベストアンサー
Yamm 3を使用した上でjQueryを使い少し手を加えることで質問者さんが想像する動作に近いものが実現できると思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 7 <link rel="stylesheet" href="./yamm.css"> 8 <title>タイトル</title> 9 <style type="text/css"> 10 .grid-demo { 11 padding: 10px 30px; 12 } 13 14 .grid-demo [class*="col-"] { 15 margin-top: 5px; 16 margin-bottom: 5px; 17 font-size: 1em; 18 text-align: center; 19 line-height: 2; 20 background-color: #e5e1ea; 21 border: 1px solid #d1d1d1; 22 } 23 </style> 24</head> 25<body> 26<div class="navbar navbar-default yamm"> 27 <div class="navbar-header"> 28 <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"> 29 <span class="icon-bar"></span> 30 <span class="icon-bar"></span> 31 <span class="icon-bar"></span> 32 </button> 33 <a href="#" class="navbar-brand">Yamm Megamenu</a> 34 </div> 35 <div id="navbar-collapse-grid" class="navbar-collapse collapse"> 36 <ul class="nav navbar-nav"> 37 <li class="dropdown yamm-fw"> 38 <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false"> 39 menu1 40 <b class="caret"></b> 41 </a> 42 <ul class="dropdown-menu"> 43 <li class="grid-demo"> 44 <div class="row"> 45 <div class="col-sm-2"><br> 46 <h3>2</h3><br> 47 </div> 48 <div class="col-sm-2"><br> 49 <h3>2</h3><br> 50 </div> 51 <div class="col-sm-2"><br> 52 <h3>2</h3><br> 53 </div> 54 <div class="col-sm-2"><br> 55 <h3>2</h3><br> 56 </div> 57 <div class="col-sm-2"><br> 58 <h3>2</h3><br> 59 </div> 60 <div class="col-sm-2"><br> 61 <h3>2</h3><br> 62 </div> 63 </div> 64 </li> 65 </ul> 66 </li> 67 <li class="dropdown yamm-fw"> 68 <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false"> 69 menu2 70 <b class="caret"></b> 71 </a> 72 <ul class="dropdown-menu"> 73 <li class="grid-demo"> 74 <div class="row"> 75 <div class="col-sm-2"><br> 76 <h3>2</h3><br> 77 </div> 78 <div class="col-sm-2"><br> 79 <h3>2</h3><br> 80 </div> 81 <div class="col-sm-2"><br> 82 <h3>2</h3><br> 83 </div> 84 <div class="col-sm-2"><br> 85 <h3>2</h3><br> 86 </div> 87 <div class="col-sm-2"><br> 88 <h3>2</h3><br> 89 </div> 90 <div class="col-sm-2"><br> 91 <h3>2</h3><br> 92 </div> 93 </div> 94 </li> 95 </ul> 96 </li> 97 <li class="dropdown yamm-fw"> 98 <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false"> 99 menu3 100 <b class="caret"></b> 101 </a> 102 <ul class="dropdown-menu"> 103 <li class="grid-demo"> 104 <div class="row"> 105 <div class="col-sm-2"><br> 106 <h3>2</h3><br> 107 </div> 108 <div class="col-sm-2"><br> 109 <h3>2</h3><br> 110 </div> 111 <div class="col-sm-2"><br> 112 <h3>2</h3><br> 113 </div> 114 <div class="col-sm-2"><br> 115 <h3>2</h3><br> 116 </div> 117 <div class="col-sm-2"><br> 118 <h3>2</h3><br> 119 </div> 120 <div class="col-sm-2"><br> 121 <h3>2</h3><br> 122 </div> 123 </div> 124 </li> 125 </ul> 126 </li> 127 </ul> 128 </div> 129</div> 130<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 131<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 132<script> 133 $(function () { 134 $(".dropdown").hover( 135 function () { 136 $(".dropdown-menu", this).not(".in .dropdown-menu").stop(true, true).slideDown(250); 137 $(this).toggleClass("open"); 138 }, 139 function () { 140 $(".dropdown-menu", this).not(".in .dropdown-menu").stop(true, true).slideUp(250); 141 $(this).toggleClass("open"); 142 } 143 ); 144 }); 145</script> 146</body> 147</html>
投稿2017/11/22 22:16
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/22 10:30
2017/11/22 12:22