我有一些與響應菜單在CSS中的問題。當菜單是水平的時候,所有東西都可以工作,但是當瀏覽器寬度小於700px時,除了一個細節外幾乎所有東西都可以工作我想要.menu滑過.content並覆蓋它們。我嘗試了浮動和Z-索引但沒有積極的結果。在CSS和jQuery中的響應菜單與slideDown和slideUp效果
基本上我需要的菜單slideDown
,在鏈路Menu
的點擊slideUp
的斷點@media所有和(最大寬度:700像素)
<div class="navigator">
<div class="menu-icon">
[MENU]
</div>
<div class="search">
<input type="text">
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
</ul>
</div>
內容
body, html
{
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigator
{
background-color: #0171bb;
overflow: hidden;
}
.menu-icon
{
background-color: white;
display: none;
}
.menu
{
width: 70%;
float: left;
}
.menu ul
{
margin:0;
padding:0;
list-style-type:none;
}
.menu ul:after
{
content:'';
display:block;
clear:both;
}
.menu ul li
{
float: left;
padding: 0.5em;
text-align: center;
}
.menu ul li:hover
{
background-color: #004f82;
}
.menu ul li a
{
text-decoration: none;
display: block;
color: black;
}
.search
{
float: right;
width: 25%;
padding: 0.4em 2.5%
}
.search input
{
width: 100%;
padding: 0.2em;
border: none;
background-color: #004f82;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
outline: none;
color: white;
}
.content
{
width: 100%;
height: 4em;
background-color: lightgray;
text-align: center;
padding: 1em;
}
@media all and (max-width:700px)
{
.menu-icon
{
display: inherit;
float:left;
}
.menu
{
width: 100%;
float:left;
z-index:2;
}
.content
{
z-index:1;
}
.search
{
width: 50%;
}
.menu ul li
{
width: 100%;
}
}
隨意改變'slideDown'和'slideUp'效果參數,按您的喜好。 :)希望這給你一個完整的解決方案,你在看。 –