如何調整下拉菜單項 <ul> 使用CSS列屬性？
[英]How to adjust drop-down menu item in <ul> with the use of css columns property?
問題描述
我在網站上使用2列導航菜單。 使用以下css
.column-menu {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
width: 378px;
}
我得到這個輸出：
這是我想要的完美。 但是，當我打開下拉菜單時，它變成這樣：
無論如何，如下面的屏幕截圖所示，是否可以獲得輸出：
這是我的完整html：
.column-menu {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
width: 378px;
}
.column-menu li a {
padding: 0 15px;
font: 13px/38px"Kanit", sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}
.column-menu li a:hover,
.column-menu li a:focus {
background: none;
}
.column-menu li.active a {
color: #333;
}
.column-menu li.open a {
background: none;
}
.column-menu li.open a:hover,
.column-menu li.open a:focus {
background: none;
}
.column-menu li.open a span {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.column-menu li.open ul {
background: none;
position: relative;
margin: 0;
margin: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
<ul class="nav column-menu black-bg">
<li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Home Option 1</a></li>
<li><a href="#">Home Option 2</a></li>
<li><a href="#">Home Option 3</a></li>
<li><a href="#">Home Option 4</a></li>
<li><a href="#">Home Option 5</a></li>
<li><a href="#">Home Option 6</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">categories</a></li>
<li><a href="#">archives</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">contact</a></li>
</ul>
1 個解決方案
解決方案1
0 2016-12-01 09:34:22
這可能會幫助您...閱讀此代碼並充分使用它，並確保您會得到它。
HTML：
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></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 class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.navbar-collapse-->
CSS：這里值得注意的CSS是.columns-2和.columns-3 ul的最小寬度屬性。 這些對於防止菜單執行某些不必要的操作是必不可少的……但是，當然還有其他方法。 我還為.multi-column-dropdown ul添加了一些CSS，以便它們與Bootstrap的樣式匹配。
*注意：請確保您的頭部中也包含bootstrap.css。
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
JS：只需確保在頁面中包含jQuery和Bootstrap（最好是在底部，緊接在body標記之前）。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
首先以粗略的方式使用此代碼，您將了解
jQuery Autocomplete-如何為TextArea下拉菜單設置CSS樣式？
[英]jQuery Autocomplete - How to CSS style the TextArea drop-down menu?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.