Advanced Search

Use CSS3 Media Screen to go from Horizontal Menu to dropdown

/ Published in: CSS
Save to your folder(s)
This will take the screen width into account and display either a horizontal menu or a dropdown menu with a hover style. Resize your window to see the effect.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. #single {display:none;}
  3.  
  4. @media screen and (max-width: 600px) {
  5.     #single {
  6.         color: black;
  7.         width: 42px;
  8.         height: 30px;
  9.         background: #ECEBEB url(images/menu-icon.png) no-repeat 10px center;
  10.         padding: 8px 10px 0 42px;
  11.         cursor: pointer;
  12.         border: solid 1px #666;
  13.         display: block;
  14.     }
  15.     #container:hover > #multiple{
  16.         display:block;            
  17.     }
  18.     #multiple{
  19.         clear: both;
  20.         position: absolute;
  21.         top: 38px;
  22.         width: 160px;
  23.         z-index: 10000;
  24.         padding: 0px;
  25.         background: #F8F8F8;
  26.         border: solid 1px #999;
  27.         display: none;
  28.     }
  29. }
  30.  
  31. #multiple li {
  32.     list-style: none;
  33.     float: left;
  34.     background-color:pink;
  35.     padding: 4px 15px;
  36.     margin:5px;
  37.     width:100px;
  38. }�
  39. </style>
  40.  
  41. <div id="container">
  42.     <div id="single">My Family</div>
  43.     <ul id="multiple">
  44.         <li>ryan</li>
  45.         <li>val</li>
  46.         <li>alex</li>
  47.         <li>mason</li>
  48.         <li>angelina</li>
  49.         <li>madison</li>
  50.     </ul>
  51. </div>�

URL: http://jsfiddle.net/ryanwfiorini/hWjmb/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.