有谁知道这个1 colum下拉菜单的代码？我知道它的基本我只是不知道。 [英] Does anyone know the code for this 1 colum dropdown menu? I know its basic I just don't know it.

问题描述

或在google应用程式看起来像这样..

or on google app it looks like this..

基本上你点击菜单按钮，菜单下拉在一个列。我不想jquery或jave脚本只是基本的菜单...我会添加图标后。

Basically you click on the menu button and the menu drops down in a single column. I don't want jquery or jave script just the basic menu...I'll add icons later. I will also place the menu button on top of the header.

推荐答案

您应该在发布问题之前自己尝试一下这里。 StackOverflow是关于帮助编程问题，不是为你编程家庭作业。这说，你是新的，这是一个很简单的事情，所以我决定发布一个滑动的CSS下拉列表我已经为你。这应该是一个很好的开始。

You should try figuring it out out yourself before posting a question here. StackOverflow is about helping with programming questions, not doing programming homework for you. With that said, you're new and this is a pretty simple thing to do, so I decided to post a sliding CSS dropdown that I've made for you. It should be a good place to start.

在桌面上，下拉菜单是通过悬停激活。在iOS上，当您点按一次时，它会激活。

On a desktop, the dropdown is activated by hovering. On iOS it's activated when you tap once.

这是一个实时预览。

<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

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

这篇关于有谁知道这个1 colum下拉菜单的代码？我知道它的基本我只是不知道。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！