我是HTML，CSS的新手，我正在尝试制作简单的响应式菜单。调整大小后，浏览器菜单图标将会显示，然后点击打开菜单。请检查下面的代码。你能帮帮我吗？ 注意：我不想使用bootstrap。
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> info@info.com</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>
答案 0 :(得分：1)
尝试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>
答案 1 :(得分：0)
您可以为它编写媒体查询。如果你不想使用bootstrap。
例如
你想让一个网页对768px做出回应，然后就可以写了。
@media only screen and (min-width: 768px) {
body {
// Your CSS Code Here
}
}
供参考您可以看到Here
答案 2 :(得分：0)
试试这个:) 这对我有用。没有引导程序
$('#menu-bar').click(function(){
$('nav ul').toggle('blind');
})body{
margin: 0;
padding: 0;
height: 100%;
}
#menu-bar
{
font-size: 20px;
text-align: right;
background-color: #A4D54C;
padding:10px;
margin-bottom:-50px;
color:#fff;
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;
}
#menu-bar {
display:block;
}
nav
{
}
nav ul{
float: none;
margin-top: 50px;
background-color: #A4D54C;
display:none;
}
nav li{
display: block;
position:relative;
border-bottom:1px solid #fff;
}
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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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> info@info.com</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>
答案 3 :(得分：0)
对于响应式菜单，我们从768Px启动窗口屏幕，因此我不会更改您的CSS上的任何内容只需用768px替换媒体屏幕400px并删除您为768px创建的媒体部分。我还在所有3节HTML，CSS和jQuery中进行了注释，我在其中更改或添加简短描述。任何问题都在评论中问我。谢谢。 LiveFiddle
lapply$(document).ready(function() {
$('#menu-bar').click(function() {
$("nav ul").slideToggle("slow"); /* this function show/hide the menu when you click the bar icon */
})
$('nav ul li a').click(function() {
$('nav ul ').slideToggle("slow"); /* this function hide the menu when you click on a link*/
})
});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-bar {
display: block;
margin-right: 10px;
/* set this margin because its close to the window screen*/
}
.menu-logo {
width: 100%;
text-align: center;
}
nav {}
nav ul {
float: none;
display: none;
/* set display none for use the click fucntion to show the menu*/
background-color: #A4D54C;
/* Set margin and padding 0 for full width border bottom*/
margin:0;
padding: 0;
}
nav li {}
nav a {
display: block;
color: #fff;
border-bottom: 1px solid #000;
margin: 0;
padding: 3px;
}
}