我正在尝试在css中创建两个响应式导航菜单。 不过我已经尝试过div class,ul class等,他们的菜单没有正确加载。 我非常感谢任何帮助或反馈。
一些代码示例: HTML:
<div class="clearfix">
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<ul>
</nav>
</div>
和第二个菜单
<div class="menu">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About ↓</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
</ul>
</div>
和css:
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Start of 2nd menu info*/
.menu ul {
list-style-type:none;
position: absolute;
}
.menu li {
display:inline-block;
}
.menu li a {
display:block;
min-width:100px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #333;
}
.menu li:hover a {
background: #999;
color: #fff;
border-radius: 5px;
}
.menu li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
.menu li:hover ul a:hover {
background: #990000;
color: #fff;
}
.menu li ul {
display: none;
}
.menu li ul li {
display: block;
float: none;
}
.menu li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.menu ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #990000;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu2{
display: block;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu3{
display: block;
}
/*Responsive Styles*/
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
/*Make dropdown links appear inline*/
.menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.menuli {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.menu ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
/*Display 'show menu2' link*/
.show-menu2 {
display:block;
}
/*Display 'show menu2' link*/
.show-menu3 {
display:block;
}
}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
/*Make dropdown links appear inline*/
.menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.menuli {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.menu ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
/*Display 'show menu2' link*/
.show-menu2 {
display:block;
}
/*Display 'show menu2' link*/
.show-menu3 {
display:block;
}
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
/*Make dropdown links appear inline*/
.menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.menuli {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.menu ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
/*Display 'show menu2' link*/
.show-menu2 {
display:block;
}
/*Display 'show menu2' link*/
.show-menu3 {
display:block;
}
}
答案 0 :(得分:0)
这是你在找什么?
<强> HTML 强>
<div class="navbar navbar-inverse navbar-fixed-top navbar-position" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</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>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</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>
</ul>
<button type="button" class="btn btn-default navbar-btn">Button</button>
<div class="col-sm-3 col-md-3 pull-right">
<div class="navbar-text">Text</div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<强> CSS 强>
.navbar-position {
position: relative;
}
.navbar{
margin: 0;
}