html - 移动导航切换 html/css

Question

我正在创建一个如下所示的移动导航: Mobile navigation

我想做的是使下拉菜单可切换，所以当我点击外壳时它会下拉但是当我再次点击它时它会回到原来的位置，我已经研究了一段时间但还没有找到任何有用的东西。

一定有网络大师可以轻松解决这个问题。

谢谢!

-Akyx

(下面的代码)

HTML:

 <!-- Mobile nav -->
<nav class="vertical-nav">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="#">About Nijmegen&#8964;</a>
      <ul>
        <li><a href="the-area-of-nijmegen.php">The area</a></li>
        <li><a href="useful-information.php">Useful information</a></li>
      </ul>
    </li>
   <li><a href="#">Housing&#8964;</a>
      <ul>
        <li><a href="finding-a-house-nijmegen.php">Finding a house</a></li>
        <li><a href="contract-types.php">Contract types</a></li>
        <li><a href="layout-of-housing.php">Layout of housing</a></li>
        <li><a href="housing-offers.php">Housing offers</a></li>
      </ul>
    </li>
    <li><a href="#">Settling in&#8964;</a>
      <ul>
        <li><a href="parking.php">Parking</a></li>
        <li><a href="transportation.php">Transportation</a></li>
        <li><a href="garbage.php">Garbage</a></li>
        <li><a href="settling-in-utilities.php">About Utilities</a></li>
        <li><a href="biking.php">Biking</a></li>
        <li><a href="public-transportation.php">Public Transportation</a></li>
        <li><a href="driving-a-car.php">Driving a car</a></li>
      </ul>
    </li>
    <li><a href="#">Finances&#8964;</a>
      <ul>
        <li><a href="mortgage.php">Mortgage</a></li>
        <li><a href="banking.php">Banking</a></li>
        <li><a href="getting-insured.php">Getting Insured</a></li>
      </ul>
    </li>
    <li><a href="#">Where to go&#8964;</a>
      <ul>
        <li><a href="events.php">Events</a></li>
        <li><a href="musea.php">Musea</a></li>
        <li><a href="food-and-drinks.php">Food and Drinks</a></li>
        <li><a href="where-to-go-meet-up.php">Meet up</a></li>
        <li><a href="where-to-go-sports.php">Sports</a></li>
        <li><a href="cinemas.php">Cinemas</a></li>
        <li><a href="daily-life.php">Daily life</a></li>
        <li><a href="hotspots.php">Hotspots</a></li>
      </ul>
    </li>
    <li><a href="get-in-touch.php">Get in touch</a></li>
  </ul>
</nav>

CSS:

nav.vertical-nav {
        position: relative;
        background: #000000;
            /*test*/
        -webkit-overflow-scrolling: touch;
    }

    nav.vertical-nav ul {
        list-style: none;
        border-bottom: none;
    }

    nav.vertical-nav li {
        position: relative;
    }

    nav.vertical-nav li li {
        background-color: #7f7f7f;
    }

    nav.vertical-nav a {
        display: block;
        color: #eee;
        text-decoration: none;
        padding: 10px 15px;
        transition: 0.2s;
        border-bottom: 1px solid #666666;
    }

    nav.vertical-nav li:hover > a {
        background-color: #4c4c4c;
    }

    nav.vertical-nav ul ul {
        background: rgba(0,0,0,0.1);
        padding-left: 20px;
        transition: max-height 0.2s ease-out;
        max-height: 0;
        overflow: hidden;
    }
    nav.vertical-nav li:hover > ul {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }

Answer 1

您可能想要使用 JavaScript 添加一些基本功能。这是您尝试使用一些 jquery 实现的非常简单的示例 JSFiddle

$("ul").click(function(){
    $("li").toggle(300);
});