![](/img/trans.png)
[英]How can I get the Menu Button to appear in the Nav Bar Materialize CSS?
[英]How can i display nav bar menu items and search button form inline block
我想在内联块中显示导航栏菜单项和搜索按钮表单,因为它显示为两行。
这是我的代码
的HTML
<div class="col-md-4 col-md-offset-3">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<div class="col-sm-6 col-xs-8">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">My Account</a></li>
<li><a href="#">Sign In</a></li>
<li><a href="#">Create Account</a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</a></li>
</ul>
</div>
</div>
</div><!--/.container-->
</div><!--/.top-bar-->
的CSS
#header .search{
display: inline-block;
}
.navbar>.container .navbar-brand{
margin-left: 0;
}
.top-bar {
padding: 10px 0;
background: #191919;
border-bottom: 1px solid #222;
line-height: 28px;
}
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
这是jsfiddle
将搜索栏放在菜单旁边意味着在展开搜索表单时将其覆盖。 所以我可能会破坏您的设计,尤其是更改了.col-sm-6
的宽度:
.col-sm-6{
width:100% !important;
}
.nav.navbar-nav > li{
display:inline-block;
float:none;
vertical-align: top;
transition: all 0.2s ease;
}
#search-form{
display:inline-block
}
.search-form .form-group input{
transition: width 0.25s ease 0.1s;
display:none;
}
.search-form .form-group{
overflow:hidden;
}
.search-form .form-group:hover{
overflow:visible;
}
.search-form .form-group:hover input{
display:inline;
position: absolute;
width: 50vw;
right: 0;
background: white;
border-radius: 25px;
}
http://jsfiddle.net/pLvp7ru0/3/
我认为您应该在搜索栏中添加更好的行为,因此必须保持搜索状态以保持显示状态。 请参阅MDN上的内容 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.