創建一個網站的菜單，例如，一個主頁

在這裏，我的目標是爲我的電子圖書館項目的主頁創建一個菜單，這個菜單必須包括所有這些用戶想要選擇特定功能的文件這是由我在節目中。創建一個網站的菜單，例如，一個主頁

此菜單符號必須包含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 –

創建一個網站的菜單，例如，一個主頁

回答

相關問題