答案 0 :(得分：0)
使用ul列出您的菜单，而不是在标签旁添加一些图标。
ul {
padding: 0;
background-color: blue;
}
li {
color: white;
display: block;
}
li:hover {
background-color: rgba(250, 250, 250, .3);
}
li span {
margin-right: 50px;
}
li a {
color: inherit;
text-decoration: none;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li><a href="#"><span class="fa fa-home fa-fw"></span>Home</a></li>
<li><a href="#"><span class="fa fa-bookmark fa-fw"></span>Deals</a></li>
<li><a href="#"><span class="fa fa-car fa-fw"></span>Deliveries</a></li>
</ul>
答案 1 :(得分：0)
我创建了导航链接并将其放在网页后面。使用JQuery我们向左和向下移动页面以显示导航。然后将其反转以关闭它。希望它有所帮助！
$("a#menuOff").hide(0);
$( "a#menuOn" ).click(function() {
var tog = "10%"
$(".page").animate({left: tog});
$(".page").animate({top: tog});
$("a#menuOn").hide();
$("a#menuOff").show();
$(".page").css("width","90%");
});
$( "a#menuOff" ).click(function() {
var tog = "0%"
$(".page").animate({left: tog});
$(".page").animate({top: tog});
$("a#menuOff").hide();
$("a#menuOn").show();
$(".page").css("width","100%");
});* {
padding:0;
margin:0;
}
#navbar {
height:100vh;
color:#fff;
background:#212121;
}
.page {
width:100%;
position: absolute;
z-index:1000;
top:0;
margin-left:0;
font-family:Arial;
}
#reveal {
/* width:90%!important;
margin-left:10%!important; */
}
.page nav {
box-sizing:border-box;
padding:0 1em;
line-height:1.5em;
background:#ccc;
}
.page nav a {
color:red;
}
.page h1 {
text-align:center;
background:#fafafa;
line-height:2em;
border-bottom:2px solid #eee;
font-size:1.8em;
}
.page p {
box-sizing:border-box;
background:#fafafa;
padding:1em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
<div class="page" id="reveal">
<header>
<nav>
<a href="#" id="menuOn">Menu</a> <a href="#" id="menuOff">Menu</a>
</nav>
<h1>Your Title</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, sit dolores accusamus corporis fugiat error soluta! Et consectetur vel deleniti enim repellendus, eveniet veniam, voluptatem unde iure, debitis corporis praesentium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates, ab dignissimos eum porro laborum deleniti temporibus sed corrupti dolor voluptatem molestiae possimus quis, tenetur adipisci animi labore fuga mollitia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit quibusdam laboriosam impedit, velit laudantium eligendi deleniti! In, molestiae aliquid expedita explicabo minima tenetur quod, totam dolores nesciunt, dignissimos debitis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nesciunt nostrum dolor modi! Ipsum culpa ab temporibus qui, modi tenetur, vitae, maiores ipsam doloribus reprehenderit ducimus aspernatur minima officiis iure.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, sit dolores accusamus corporis fugiat error soluta! Et consectetur vel deleniti enim repellendus, eveniet veniam, voluptatem unde iure, debitis corporis praesentium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates, ab dignissimos eum porro laborum deleniti temporibus sed corrupti dolor voluptatem molestiae possimus quis, tenetur adipisci animi labore fuga mollitia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit quibusdam laboriosam impedit, velit laudantium eligendi deleniti! In, molestiae aliquid expedita explicabo minima tenetur quod, totam dolores nesciunt, dignissimos debitis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nesciunt nostrum dolor modi! Ipsum culpa ab temporibus qui, modi tenetur, vitae, maiores ipsam doloribus reprehenderit ducimus aspernatur minima officiis iure.</p>
</article>
</div>
</div>
答案 2 :(得分：-1)