CSS responsive menu with dropdown on resize

Question

Im trying to create a css menu which is responsive. I wanna make a dropdown list menu on resizing but I can't seem to figure out how. So far I've got this http://codepen.io/anon/pen/vmxua

Here's my 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;
}

thank you..

Praveen Kavuri · Accepted Answer · 2014-09-17 18:21:46Z

2

Do something like below url by using css3 media queries.

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

answered Sep 17, 2014 at 18:21

Praveen Kavuri

3551 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS responsive menu with dropdown on resize

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related