Wie mache ich Drop-Down-Menü von document.getElementById Javascript

Ich muss ein Dropdown-Menü von "menu4" auf den Code unten. Der Code läuft gut, aber ich muss ein Dropdown-Menü einführen. Ich habe verschiedene Möglichkeiten ausprobiert, um eine Liste in einer Liste zu haben, aber scheint nicht zu funktionieren. Ich brauche wirklich jemand Hilfe. Jemand? Vielen Dank. Wie mache ich Drop-Down-Menü von document.getElementById Javascript

document.getElementById("nav01").innerHTML = 
 
"<ul id='menu'>" + 
 
" <li><a href= '#'>Home</a></li> " + 
 
" <li><a href= '#'>menu1</a></li> " + 
 
" <li><a href= '#'>menu2</a></li> " + 
 
" <li><a href = '#'>menu3</a></li> " + 
 
" <li><a href = '#'>menu4</a></li> " + 
 

 
" <li><a href = 'index.php'> Log Out</a></li> " + 
 
"</ul>";

body { 
 
    font-family: Bookman Old Style; 
 
    font-size: 13px; 
 
    background-color:#EBF4FA; 
 
    color: #696969; 
 
    padding-right: 150px; 
 
    padding-left: 150px; 
 
    
 

 
} 
 

 
#top{ 
 
    background-color: ; 
 
    height: 120px; 
 
    box-shadow: 10px #888888;  
 
} 
 

 

 
#main { 
 
    padding: 5px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    background-color: #EBF4F4; 
 
    border-radius: 0 0 5px 5px; 
 
    border-style: solid; 
 
    border-right-width: 1px; 
 
} 
 

 
h3 { 
 

 
    font-family: Bookman Old Style; 
 
    border-bottom: 3px; 
 
    color: black; 
 
    font-size: 16px; 
 
} 
 

 
table { 
 
    
 
    width:100%; 
 
} 
 

 
table, th , td { 
 
    border: 1px solid white; 
 
    border-collapse: collapse; 
 
    padding: 0px; 
 
} 
 

 
th { 
 
    text-align: left; 
 
} 
 

 
table tr:nth-child(odd) { 
 
    background-color: #ffffff; 
 
} 
 
table tr:nth-child(even) { 
 
    background-color: #ffffff; 
 
} 
 

 
ul#menu { 
 
    padding: 0; 
 
    margin-bottom: 11px; 
 
    
 
} 
 

 
ul#menu li { 
 
    display: inline; 
 
    margin-right: 3px; 
 
    margin: 100px auto; 
 
    line-height:30px; 
 
    max-width:860px; 
 
} 
 

 
ul#menu li a { 
 
    background-color: #ffffff; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
    color: #696969; 
 
    border-radius: 4px 4px 0 0; 
 
} 
 

 
ul#menu li a:hover { 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
#footer { 
 
    position: right; 
 
    color: #ffffff; 
 
    
 
} 
 

 

 
h1 { 
 

 
    border-bottom: 3px solid orange; 
 
    
 
    font-size: 30px; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>About</title> 
 
    <link href="site.css" rel="stylesheet"> 
 
</head> 
 

 
<nav id="nav01"></nav> 
 
<body> 
 

 
<div id="main"> 
 
    <h1>About Us</h1> 
 
    <p>Dibon Company Limited is a project delivery and technical consultancy firm that provides efficient and cost effective methodologies and expertise in managing complex as well as simple projects</p> 
 
    
 
    <div class="box contactdetails"> 
 
     <h2>Our Contact Details </h2> 
 
     <ul> 
 
     <li>Dibon Limited Company</li> 
 
    
 
     <li class="last">Website: <a href="https://www.dibon.co.ke">dibon</a></li> 
 
     <li>Email: [email protected]</li> 
 
     <li class="last">Facebook: <a href="https://web.facebook.com">Dibon</a></li> 
 
     </ul> 
 
    </div> 
 

 
</div> 
 

 
<script src="script.js"></script> 
 

 
</body> 
 
</html>

Quelle

2016-06-21 Bob

anstatt dies 'ma zu tun Wie wäre es mit der Verwendung der Templating-Funktion eines Frameworks wie angular.js, um den Dropdown-HTML-Code aus Daten zu generieren? – CodeToad

Sind Sie sicher, dass Sie Javascript dafür brauchen?

Wenn ich es richtig verstehe, können Sie dies ohne Javascript tun. Voll funktionsfähige Dropdown-Menüs können die -Status für die Links nutzen. Ich ging voran und räumte für dich etwas CSS auf. Hör zu. Hier ist der Schlüssel CSS:

.navigation-menu li:hover ul { 
    display: inline-block; 
    position: absolute; 
    background-color: #fff; 
    border: 3px ridge #ccc; 
    box-shadow:2px 2px 5px 2px #ccc; 
    padding:5px; 
}

http://codepen.io/anon/pen/MebwjB

Quelle

2016-06-21 13:21:07 MassDebates

Sie haben noch keine js brauchen oder etwas anderes, tun Sie es mit css3 (Übergang) durch Hover:

.mainMenu { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 30px; 
 
    background-color: darkgrey; 
 
    color: black; 
 
    font-family: Arial; 
 
    line-height: 30px; 
 
    -webkit-transition: max-height 0.5s ease-in-out; 
 
    -moz-transition: max-height 0.5s ease-in-out; 
 
    -o-transition: max-height 0.5s ease-in-out; 
 
    transition: max-height 0.5s ease-in-out; 
 
} 
 

 
.mainMenu:hover { 
 
    color: white; 
 
    background-color: #2f6992; 
 
    cursor: pointer; 
 
    height: 150px; 
 
} 
 

 
ul { 
 
    padding-left: 15px; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
li:hover { 
 
    color: yellow; 
 
} 
 

 
.title { 
 
    color: white; 
 
    background-color: darkgrey; 
 
    width: 100%; 
 
    height: 30px; 
 
    padding-left: 5px; 
 
}

<div class="mainMenu"> 
 
    <span class="title">HOVER MENU-POINT...</span> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 1</li> 
 
    <li>Menu 1</li> 
 
    </ul> 
 
</div>

Cheers

Quelle

2016-06-21 13:26:42 MrBuggy

Wie mache ich Drop-Down-Menü von document.getElementById Javascript

Antwort

Verwandte Themen