asked on

responsive menu

Hi,
From a previous question I asked, I want to make the menu more responsive.
When I resize I want the links to condense withing the border and when links go to a new line I want them to have a background color.

Do I just need to change all px values in css and add background color?

http://jsfiddle.net/IshaanRawat/tUULc/

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
   #menuv{
	  width:300px; 
	   
   }
   
    #nav-status {
        display: none;    
    }

    ul {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-right: 1px solid #333;
        width: 96px;
        height: 21px;
        padding:2px;
       
        position: relative;    
    }

    ul li:last-child {
        border-right: none;
    }

    ul li ul {
        display: none;
        width: 100px;
        color:#fff;
        background:#666;
        position: absolute; 
        top: 0px; 
        left: 50px;
        overflow: hidden;
    }

    ul li:hover ul {
        display: block;    
    }
}

/* FOR MOBILE RESOLUTIONS */
@media screen and (max-width: 480px) {
    #nav-status {
        display: block;
        width: 100%;
        height: 21px;
        padding: 2px;
        background: #000;
        color: #FFF;   
    }

    ul {
        display: none;
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-bottom: 1px solid #333;
        width: 100%;
        min-height: 21px;
        padding:2px;
        display: block;        
        position: relative;    
    }

    ul li:last-child {
        border-bottom: none;
    }

    ul li ul {
        display: block;
        width: 100%;
        color:#fff;
        background:#eee;        
        overflow: hidden;
        position: relative;
    }        
}
<script>
$(document).ready(function(){


$("#nav-status").click(function(e) {
    e.preventDefault();
    $('#navigation').toggle();
});
});
</script>

</head>

<body>


<div id="wrapper">

 <br />
 <br />
   
<div class="container-fluid">
   
    <div class="row-fluid">
     
          <div class='span12'>
     
<a href="#" id="nav-status">Open / Close</a>
<div id="menuv">
<ul id="navigation">
    <li><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 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>
</div>
...

Open in new window

ASKER CERTIFIED SOLUTION

Ishaan Rawat

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial