Bootstrap3 : Doropdoownの中身をグリッド表示。「Large Dropdwon Menu」コミット其一。@Bootsnipp

large_dd

ユーザーがBootstrapにExtendできるsnippetsを投稿するサイト「Bootsnipp」。 以前から参考にさせてもらっていましたが今回はじめてコミット?してみました。登録後コードを管理人さんに送って、問題なければ公開とういうフローのようです。

コミットしたのは2つで、その一個目はbootstrap3のドロップダウン(dropdown)をベースにしたメガドロップダウンメニュー(Large Dropdown Menu)。
とはいってもデフォルトの”.dropdown”クラスと一緒に使う感じにしてあるので、CSSを微調整をしてドロップダウンの要素をグリッドで4カラムに分けてだけの簡単なものですが・・・。

large_dd_sm

あんまりチェックしてないですが、一応レスポンシブ時のスタイルも調整してあります。あとはお好みで。

今気づいたのですが、Bootsnippのコードのクラス名が”.dropdown-large”になってました。これだとVer2ですね。
このサイトのCodeにあるクラス名はVer3と合うように”.dropdown-lg”に変更しました。

Code

Example Large Dropdown Menu@Bootsnipp

html
<link href="less/dropdowns-large.css" rel="stylesheet">
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<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="#">Large Dropdown Menu</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-lg">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-lg row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">Aligninment options</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Disabled menu items</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li><a href="#">Vertical variation</a></li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Checkboxes and radio addons</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Non-nav links</a></li>
<li><a href="#">Component alignment</a></li>
<li><a href="#">Fixed to top</a></li>
<li><a href="#">Fixed to bottom</a></li>
<li><a href="#">Static top</a></li>
<li><a href="#">Inverted navbar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
css
<style>
.dropdown-lg {
position: static !important;
}
.dropdown-menu-lg {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-lg > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-lg > li > ul > li {
list-style: none;
}
.dropdown-menu-lg > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-lg > li ul > li > a:hover,
.dropdown-menu-lg > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-lg .disabled > a,
.dropdown-menu-lg .disabled > a:hover,
.dropdown-menu-lg .disabled > a:focus {
color: #999999;
}
.dropdown-menu-lg .disabled > a:hover,
.dropdown-menu-lg .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-lg .dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.dropdown-menu-lg {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-lg > li {
margin-bottom: 30px;
}
.dropdown-menu-lg > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-lg .dropdown-header {
padding: 3px 15px !important;
}
}
</style>
LESS
@import "variables.less";
@import "mixins.less";
.dropdown-lg {
position: static !important;
}
.dropdown-menu-lg {
margin-left: @padding-large-horizontal;
margin-right: @padding-large-horizontal;
padding: 20px 0px;
> li > ul {
padding:0;
margin: 0;
}
> li > ul > li {
list-style: none;
}
> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: normal;
}
}
.dropdown-menu-lg > li ul > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
}
.dropdown-menu-lg > .active > a {
&,
&:hover,
&:focus {
}
}
.dropdown-menu-lg .disabled > a {
&,
&:hover,
&:focus {
color: @dropdown-link-disabled-color;
}
}
.dropdown-menu-lg .disabled > a {
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
.reset-filter();
cursor: not-allowed;
}
}
.open {
> .dropdown-menu-lg {
}
> a {
}
}
.dropdown-menu-lg .dropdown-header {
color: @brand-primary;
font-size: @font-size-large;
}
.pull-right > .dropdown-menu-lg {
}
.navbar-fixed-bottom .dropdown {
.dropdown-menu-lg {
}
}
@media (max-width: @grid-float-breakpoint) {
.dropdown-menu-lg {
margin-left: 0 ;
margin-right: 0 ;
> li {
margin-bottom: 30px;
&:last-child{
margin-bottom: 0;
}
}
}
.dropdown-menu-lg .dropdown-header {
padding: 3px 15px !important;
}
}
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × 1 =