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.


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.