问题描述
或在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下拉菜单的代码?我知道它的基本我只是不知道。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!