我正在尝试使用 javascript 在导航栏中为“我的旅程”创建一个下拉菜单，并且我正在为 css 使用 flex。而且我不知道该怎么做，我看过的所有教程都没有使用 flex 作为代码。感谢您的帮助!
这是我的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 & 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%;
}
最佳答案
我根据你的问题得出的结论是你需要我的旅程下拉菜单有两个子菜单。下面是相同的代码。 希望它会有所帮助。
$('.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 & This Blog </a>
</li>
</ul>
</nav>
</div>关于javascript - 使用javascript制作下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32809231/