我是 HTML、CSS 新手，我正在尝试制作简单的响应式菜单。调整大小后，将显示浏览器菜单图标，然后单击打开菜单。请检查下面的代码。您能帮我吗？
注意：我不想使用引导程序。
body{
margin: 0;
padding: 0;
height: 100%;
}
#menu-bar
{
font-size: 20px;
text-align: right;
cursor: pointer;
display: none;
}
.menu-logo
{
float: left;
}
nav{
width: 100%;text-align: center;
}
nav ul
{
background-color: #A4D54C;
float: right;
font-size: 20px;
line-height: 50px;
}
nav li{
display: inline;
list-style-type: none;
}
nav a{
text-decoration: none;
padding: 10px;
color: #000;
text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
.menu-logo
{
margin-top: -50px;
}
nav
{
}
nav ul{
float: none;
margin-top: 50px;
background-color: #A4D54C;
}
nav li{
display: inline;
}
nav a{
color: #fff;
}
}
@media only screen and (max-width: 400px) {
#menu-bar
{
display: block;
}
.menu-logo
{
width: 100%;text-align: center;
}
nav
{
}
nav ul{
float: none;
margin-top: 50px;
background-color: #A4D54C;
}
nav li{
}
nav a{
display: block;
color: #fff;
border-bottom:1px solid #000;
margin: 0;
padding: 03px;
}
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="menu-logo"><img src="images/logo.png"></div>
<div style="text-align:right">
<span> [email protected] /cdn-cgi/l/email-protection</span>
</div>
<nav>
<span id="menu-bar"><i class="fa fa-bars" aria-hidden="true"></i></span>
<ul>
<li><a href="">Home</a></li>
<li><a href="">about</a></li>
<li><a href="">service</a></li>
<li><a href="">blog</a></li>
<li><a href="">testimonials</a></li>
<li><a href="">contact us</a></li>
</ul>
</nav>
尝试 Bootstrap 框架
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#" class="hidden-xs">Home</a>
<a href="#" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Home</a>
</li>
<li>
<a href="#products" class="hidden-xs">Products</a>
<a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a>
</li>
<li>
<a href="#overview" class="hidden-xs">Overview</a>
<a href="#overview" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Overview</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
http://jsfiddle.net/jaketaylor/84mqazgq/ http://jsfiddle.net/jaketaylor/84mqazgq/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
