创建一个网站的菜单，例如，一个主页

在这里，我的目标是为我的电子图书馆项目的主页创建一个菜单，这个菜单必须包括所有这些用户想要选择特定功能的文件这是由我在节目中。创建一个网站的菜单，例如，一个主页

此菜单符号必须包含3个垂直线。

当用户点击它时，也会弹出子菜单。

请你能告诉我我错过了什么或做错了吗？

的html代码：

<nav> 
<ul> <li><a href="">Books</a></li> 
<li><a href="">Members</a></li> 
<li><a href="">Return</a></li> 

</ul> 
</nav>

CSS样式：

li { display: inline-block; display: inline; float: left; } 

ul { background-color: #F2C777; } /*Force the list to expand to contain the links, add some padding around each link, and apply a link text color*/ 
li a { display: block; padding: 10px; color: #7C785B; } /*Cause the links to change color when hovered on*/ 
li a:hover { background-color: #EC8C65; } 

ul { list-style-type: none; padding: 0; margin: 0; background-color: #F2C777; } 
li { display: inline-block; } 
li a { display: block; padding: 10px; color: #7C785B; } 
li a:hover { background-color: #EC8C65; }

来源

2017-02-14 Vradhit Nayak

你寻求帮助无码的几率几乎为零。试试吧，帮助会来！ – Gacci

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" /> 
</head> 
<body> 

    <nav id="navbar"> 
    <a id="navbarLink" href="javascript:void(0)"><i class=""fa fa-bars></i></a> 
    <ul> 
     <li><a href="">Books</a></li> 
     <li><a href="">Members</a></li> 
     <li><a href="">Return</a></li> 
    </ul> 
    </nav> 

<script> 
$("#navbarLink").click(function(){ 
    $("#navbar ul").toggleClass("selected"); 
}); 
</script> 

</body> 
</html>

而且你的CSS将

li { display: inline-block; display: inline; float: left; } 

ul { background-color: #F2C777; } /*Force the list to expand to contain the links, add some padding around each link, and apply a link text color*/ 
li a { display: block; padding: 10px; color: #7C785B; } /*Cause the links to change color when hovered on*/ 
li a:hover { background-color: #EC8C65; } 

ul { list-style-type: none; padding: 0; margin: 0; background-color: #F2C777; display:none; } 
li { display: inline-block; } 
li a { display: block; padding: 10px; color: #7C785B; } 
li a:hover { background-color: #EC8C65; } 
.selected { display:block; }

来源

2017-02-14 05:47:50

欢迎@ VradhitNayak –

创建一个网站的菜单，例如，一个主页

回答

相关问题