使用javascript製作下拉菜單

我正嘗試在導航欄中使用javascript爲「我的旅程」創建下拉菜單，並且我爲CSS使用了flex。我不知道該怎麼做，我看過的所有教程都沒有使用flex代碼。感謝您的幫助！使用javascript製作下拉菜單

這是我的HTML機身碼

<body> 
<script src="script.js" type="text/javascript"></script> 
<div class="pagewrap"> 
    <header> 
     <img alt= "header" src = "pict/header.jpg"> 
    </header> 

    <nav> 
     <ul> 
      <li> <a href="html.html"> Home </a> </li> 
      <div id="dropdown"> 
       <li> <a href= "Journey.html">My Journeys</a></li> 
      </div> 
      <li> <a href="Media.html"> Media </a></li> 
      <li> <a href="About.html"> About Me &amp; This Blog </a></li> 
     </ul> 


     <form> 
      <input type="search" placeholder="search..."> 
      <input type="image" src="pict/search-white.png" alt="search"> 
     </form> 
    </nav> 


</div> 
</body>

，這是我的CSS代碼

.pagewrap{ 
display: flex; 
flex-direction: column; 
background-color: blue; 
width: 75%; 
margin: 0 auto; 

background-color: black; 
} 

body{ 
background-image: url(pict/wallpaper.jpeg); 
} 

header img{ 
width: 100%; 
margin-top: 4%; 
} 

nav{ 
display: flex; 
flex-direction: row; 
order: -1; 

height: 8%; 
width: 75%; 
top: 0; 

background-color: black; 
opacity: 0.9; 

align-items: center; 
position: fixed; 
} 

nav ul{ 
display: flex; 
flex-grow: 1; 
} 

nav ul li, #dropdown{ 
list-style: none; 
flex-grow: 1; 

margin: 0 2%; 
} 

nav ul li a { 
color: white; 
text-decoration: none; 
text-transform: uppercase; 

font-family: 'Candal', sans-serif; 
font-size: 100%; 
} 

nav ul li a:hover{ 
color: #660066; 
} 

form{ 
display: flex; 
flex-direction: row-reverse; 
justify-content: flex-start; 


width: 20%; 
height: 50%; 
} 

form input[type="search"]{ 
border-width: 0; 
color: white; 
background-color: transparent; 

} 

form input[type="image"]{ 
margin: auto 2%; 
width: 5%; 
}

來源

2015-09-27 kalista lanti

你不應該使用DIV UL – imGaurav

@kalista蘭提裏面，你有什麼打算真正實現？ – divy3993

打開你的代碼我得到了這個：http://i.imgur.com/yy8BLmW.png。你想在下拉菜單中選擇什麼？你想在這裏http://codepen.io/lawnch/pen/Jbpng？ – Elric

我從你的問題由是你需要我的旅程下拉與兩個子菜單。以下是相同的代碼。希望它會有所幫助。

$('.dropdown').click(function(){ $('.myList').slideToggle(100);});

body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.pagewrap { 
 
    background-color: blue; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 
body { 
 
    background-image: url(pict/wallpaper.jpeg); 
 
} 
 
header img { 
 
    width: 100%; 
 
    margin-top: 4%; 
 
} 
 
nav { 
 
    width:100%; 
 
    top: 0; 
 
    background-color: black; 
 
    position: fixed; 
 
    padding:5px; 
 
} 
 
nav ul { 
 
    flex-grow: 1; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
nav ul li, #dropdown { 
 
    list-style: none; 
 
    display:inline; 
 
    margin-right:10px; 
 
} 
 
nav ul li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-family:'Candal', sans-serif; 
 
    font-size: 100%; 
 
} 
 
nav ul li a:hover { 
 
    color: #F99D9D; 
 
} 
 
form { 
 
    flex-direction: row-reverse; 
 
    justify-content: flex-start; 
 
    width: 20%; 
 
    height: 50%; 
 
} 
 
form input[type="search"] { 
 
    border-width: 0; 
 
    color: white; 
 
    background-color: transparent; 
 
} 
 
form input[type="image"] { 
 
    margin: auto 2%; 
 
    width: 5%; 
 
} 
 
.myList { 
 
    position:absolute; 
 
    top:24px; 
 
    left:0; 
 
    background:#A0A0A0; 
 
    width:100px; 
 
    z-index:1 
 
} 
 
.myList li { 
 
    margin:0; 
 
} 
 
.dropdown { 
 
    position:relative; 
 
    z-index:3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pagewrap"> 
 
    <nav> 
 
     <ul> 
 
      <li> <a href="#"> Home </a> 
 
      </li> 
 
      <li class="dropdown"> <a href="#">My Journeys</a> 
 
       <ul class="myList" style="display:none;"> 
 
        <li> <a href="#">menu 1</a> 
 
        </li> 
 
        <li> <a href="#">menu 2</a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li> <a href="#"> Media </a> 
 
      </li> 
 
      <li> <a href="#"> About Me &amp; This Blog </a> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
    </div>

來源

2015-09-29 07:37:28 imGaurav

使用javascript製作下拉菜單

回答

相關問題