如何從document.getElementById下拉菜單javascript

我需要在下面的代碼中從「menu4」下拉菜單。代碼運行良好，但我需要引入一個下拉菜單。我嘗試過不同的方式在列表中有一個列表，但似乎不工作。我真的需要某人的幫助。任何人？謝謝。如何從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>

來源

2016-06-21 Bob

而不是做這個'馬nual'，如何使用框架中的模板功能（如angular.js）從數據生成下拉html代碼？ – CodeToad

你確定你需要的JavaScript的呢？

如果我理解正確，那麼您可以在不使用javascript的情況下執行此操作。全功能的下拉菜單可以利用hover狀態來獲取鏈接。我繼續爲你清理一些CSS。一探究竟。這裏的關鍵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

來源

2016-06-21 13:21:07 MassDebates

你不需要任何的js或別的東西，通過懸停用CSS3（過渡）做到這一點：

.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>

乾杯

來源

2016-06-21 13:26:42 MrBuggy

如何從document.getElementById下拉菜單javascript

回答

相關問題