Question

我正在尝试创建一个响应迅速的css菜单。我想在调整大小时制作一个下拉列表菜单，但我似乎无法弄清楚如何。到目前为止，我已经得到了http://codepen.io/anon/pen/vmxua

这是我的CSS：

nav {
margin: 0 auto; 
text-align: center;
background: #fff;
height:70px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}

nav ul li {
float: left;
margin: 0;
padding: 0;

}

nav ul li a {
display: block; 
padding: 10px 7px;
width:80px;
color: #000;
text-decoration:none;

}
nav ul li~li { border-left: 1px solid #857D7A; }

nav .active a {
background: rgba(180,85,12,1);
background: -moz-linear-gradient(top, rgba(180,85,12,1) 0%, rgba(234,110,16,1) 36%, rgba(234,110,16,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(180,85,12,1)), color-stop(36%, rgba(234,110,16,1)), color-stop(100%, rgba(234,110,16,1)));
background: -webkit-linear-gradient(top, rgba(180,85,12,1) 0%, rgba(234,110,16,1) 36%, rgba(234,110,16,1) 100%);
background: -o-linear-gradient(top, rgba(180,85,12,1) 0%, rgba(234,110,16,1) 36%, rgba(234,110,16,1) 100%);
background: -ms-linear-gradient(top, rgba(180,85,12,1) 0%, rgba(234,110,16,1) 36%, rgba(234,110,16,1) 100%);
background: linear-gradient(to bottom, rgba(180,85,12,1) 0%, rgba(234,110,16,1) 36%, rgba(234,110,16,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4550c', endColorstr='#ea6e10', GradientType=0 );
color:#fff;
}

谢谢..

Answer 1

使用css3媒体查询执行类似以下内容的操作。

HTML：

 <nav>
<ul>
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a> </li>
    <li><a href="#">Item 4</a></li>
     <li><a href="#">Item 5</a> </li>
   </ul>

</nav>
<select>
  <option value="#">Item 1</option>
  <option value="#">Item 2</option>
  <option value="#">Item 3</option>
  <option value="#">Item 4</option>
  <option value="#">Item 5</option>
</select>

CSS：

select{
  display:none;
}
@media (max-width: 480px) {
  select {
    display: block;
    width:200px;
    margin:0 auto;
  }
  nav{
    display:none;
  }
}

http://codepen.io/anon/pen/akcfe

CSS响应式菜单，带有调整大小的下拉菜单

1 个答案: