Posted By

COBOLdinosaur on 07/12/13


Tagged

css menu html5


Versions (?)

Drop down menu with fade in no scripting


 / Published in: CSS
 

URL: http://coboldinosaur.com/pages/drop-down-menu.html

The first thing you might notice is that I am not using nested lists to layout the menu. That is an old XHTML layout technique. I am using the more semantically correct HTML5 tag. Menus are not lists, they are navigation so using the more modern tag makes sense, and it turns out to be easier to work with.

  1. Markup:
  2. <div id="menudiv">
  3. <section class="menusection">Level 1 XXX
  4. <nav class="submenu">
  5. <a href="xxx.php" title="Tooltip">Sub 1 XXX 1</a>
  6. <a href="xxx.php" title="Tooltip">Sub 1 XXX 2</a>
  7. <a href="xxx.php" title="Tooltip">Sub 1 XXX 3</a>
  8. <a href="xxx.php" title="Tooltip">Sub 1 XXX 4</a>
  9. <a href="xxx.php" title="Tooltip">Sub 1 XXX 5</a>
  10. </nav>
  11. </section>
  12. <section class="menusection">Level 1 YYY
  13. <nav class="submenu"> ... etc ...
  14. REPEAT for the number sections required
  15. </div>
  16.  
  17. CSS:
  18. .menusection, .menusection2 {
  19. position:relative;
  20. width:15vw;
  21. float:left;
  22. border:1px solid black;
  23. z-index:10;
  24. height:1em;
  25. background-color:magenta;
  26. padding:3vh;
  27. border-radius:10px;
  28. }
  29. .menusection:hover {
  30. background-color:orange;
  31. transition-property:background-color;
  32. transition-duration:2s;
  33. transition-timing-function:ease-out;
  34. }

Report this snippet  

You need to login to post a comment.