html - この1列のドロップダウンメニューのコードを知っている人はいますか? 基本的なことは知っているが、知らないだけだ。

Question

またはGoogleアプリでは、このように見えます..

基本的に、メニュー ボタンをクリックすると、メニューが 1 つの列にドロップダウンします。jqueryやjaveスクリプトは要らない基本メニューだけ…あとでアイコン追加します。また、ヘッダーの上にメニュー ボタンを配置します。

Answer 1

ここに質問を投稿する前に、自分で考えてみてください。StackOverflow は、プログラミングの宿題をするのではなく、プログラミングの質問を支援することを目的としています。そうは言っても、あなたは初心者で、これは非常に簡単なことなので、私が作成したスライド式の CSS ドロップダウンを投稿することにしました。開始するのに適した場所である必要があります。

デスクトップでは、ホバーするとドロップダウンがアクティブになります。iOS では、1 回タップするとアクティブになります。

ライブプレビューはこちら。

html

<ul id="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Music</a>
    <ul>
      <li><a href="#">New Tracks</a></li>
      <li><a href="#">Old Tunes</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Upcoming</a></li>
    </ul>
    </li>
  <li>
    <a href="#">Images</a>
    <ul>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Photobooth</a></li>
      <li><a href="#">Share</a></li>
      <li><a href="#">Upload</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Video</a>
    <ul>
      <li><a href="#">Featured</a></li>
      <li><a href="#">Mini Clips</a></li>
      <li><a href="#">Favorites</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="">About</a>
    <ul>
      <li><a href="#">The Team</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
</ul>

CSS

  ul { list-style: none; padding: 0; margin: 0;}

  /* Style */

  a {
    color: #000;
    display: block;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Open Sans', serif;
  }
  nav {
    width: 100%;
    height: 45px;
  }
  #nav ul li:hover,
  #nav > li:hover {
    background: #2e98d5;
  }
  #nav ul > li:hover > a,
  #nav > li:hover > a {
    color: #fff;
  }
  #nav > li {
    float: left;
    position: relative;
  }
  #nav > li > a {
    padding: 13px 30px;
    height: 20px;
  }
  /************
  This transition is for iOS :hover doubleclick.
  http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
  ************/

  #nav > li:hover ul {
    visibility: visible;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
  }
  #nav ul {
    top: 46px;
    width: 170px;
    position: absolute;
    background-color: #eee;
    z-index: 1;
    visibility: hidden;
    -webkit-transition-property: visibility;
    -moz-transition-property: visibility;
    -o-transition-property: visibility;
    transition-property: visibility;

    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: .0s;
    transition-duration: 0s;

    -webkit-transition-delay: .25s;
    -moz-transition-delay: .25s;
    -o-transition-delay: .25s;
    transition-delay: .25s;
  }

  /* The slide */
  #nav li li a {
    height: 0px;
    padding: 0px 30px;
    opacity: 0;
    -webkit-transition-property: height, padding, opacity;
    -moz-transition-property: height, padding, opacity;
    -o-transition-property: height, padding, opacity;
    transition-property: height, padding, opacity;

    -webkit-transition-duration: .25s, .25s, .08s;
    -moz-transition-duration: .25s, .25s, .08s;
    -o-transition-duration: .25s, .25s, .08s;
    transition-duration: .25s, .25s, .08s;

    -webkit-transition-delay: 0s, 0s, .05s;
    -moz-transition-delay: 0s, 0s, .05s;
    -o-transition-delay: 0s, 0s, .05s;
    transition-delay: 0s, 0s, .05s;
  }
  #nav li:hover li a {
    height: 20px;
    padding: 13px 30px;
    opacity: 1;
  }