Erstellen des Menüs für eine Website zum Beispiel eine Homepage

Hier ist mein Ziel, ein Menü für eine Homepage meines E-Bibliothek-Projekts zu erstellen, dieses Menü muss alle Dateien für die Benutzer enthalten, die bestimmte Funktionen auswählen möchten welches von mir im Programm eingeschlossen ist.Erstellen des Menüs für eine Website zum Beispiel eine Homepage

Dieses Menüsymbol muss 3 vertikale Linien enthalten.

Wenn der Benutzer darauf klickt, sollte auch das Untermenü angezeigt werden.

Bitte können Sie mir vorschlagen, was ich verpasse oder hier falsch mache?

HTML-Code:

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

</ul> 
</nav>

CSS-Stile:

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

Quelle

2017-02-14 Vradhit Nayak

Ihre Chancen sein, ohne einen Code Hilfe zu bekommen ziemlich Null sind . Probieren Sie es aus und Hilfe wird kommen! – 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>

Und Ihre CSS wird

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

Quelle

2017-02-14 05:47:50

willkommen @VradhitNayak –

Erstellen des Menüs für eine Website zum Beispiel eine Homepage

Antwort

Verwandte Themen