ホームページなどのメニューを作成するホームページ

ここでは、自分の電子図書館プロジェクトのホームページのメニューを作成することです。このメニューには、特定の機能を選択するユーザーのすべてのファイルが含まれている必要がありますこれは私のプログラムで囲まれています。ホームページなどのメニューを作成するホームページ

このメニュー記号には、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 –

ホームページなどのメニューを作成するホームページ

答えて

関連する問題