Question

在这里，我的目标是为我的电子图书馆项目的主页创建一个菜单，该菜单必须包含那些希望选择我在程序中包含的特定功能的用户的所有文件。

此菜单符号必须包含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; }

Answer 1

<!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; }

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

1 个答案: