Question

我正在尝试为＆＃34; My Journeys＆＃34;创建一个下拉菜单。在导航栏中使用javascript，我使用flex为css。我不知道该怎么做，我所看过的所有教程都没有使用flex代码。谢谢你的帮助！

这是我的html正文代码

<Setter Property="LayoutTransform">
    <Setter.Value>
        <RotateTransform Angle="0"/>
    </Setter.Value>
</Setter>

这是我的css代码

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

Answer 1

我从你的问题中得到的是你需要我的旅程下降两个子菜单。下面是相同的代码。希望它会有所帮助。

$('.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>

使用javascript制作下拉菜单

1 个答案: