Posted By

icecreamboyy on 02/22/11


Tagged

css html


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

saman
elisamu


Simple Menu Navigation Template Css/Html


 / Published in: CSS
 

  1. HTML:
  2.  
  3. <ul id="navigation">
  4.  
  5. <li><a href="index.html">Home</a></li>
  6. <li>
  7. <a href="#">Product One</a>
  8. <ul> <!-- This is a sub menu within the second link -->
  9. <li><h3>Collections</h3></li> <!-- This is optional but handy for headings within the menu -->
  10. <li><a href="#">New Arrivals</a></li> <!-- These are usual list items with anchors in to link to the other pages (or indeed a div within the current page) -->
  11. <li><a href="#">Collection One</a></li> <!-- In case you are wondering, # is often used as a placeholder for links to make prototyping quicker -->
  12. <li><a href="#">Collection Two</a></li>
  13. <li><a href="#">Collection Three</a></li>
  14. <li><a href="#">View All</a></li>
  15. </ul>
  16. </li>
  17. <li><a href="#">Product Two</a></li>
  18. <li><a href="#">Product Three</a></li>
  19. <li><a href="#">About Us</a></li>
  20. </ul>
  21.  
  22. CSS:
  23. <style>
  24. /* The #navigation is the full navigation which is an unordered list */
  25. #navigation {
  26. margin: 0;
  27. padding: 0;
  28. list-style: none;
  29. white-space: nowrap; /* This is optional but prevents from line wrapping */
  30. text-align: left;
  31. width: 130px; /* Width of the top level items */
  32. background: #c9eeff;
  33. border: 1px solid #09C;
  34. float: left; /* Floats navigation to the left */
  35. }
  36.  
  37. /* The list items/links, removes the default styles for list items and makes them look like a menu by removing the bullets */
  38. #navigation li {
  39. margin: 0;
  40. padding: 0;
  41. list-style: none;
  42. }
  43.  
  44. #navigation li {
  45. display: list-item;
  46. text-transform: uppercase; /* Converts all letters to capitals */
  47. color: #4f8ba3; /* Changes font colour */
  48. }
  49.  
  50. /* When submenus are not supposed to show, this hides them */
  51. #navigation ul {
  52. position: absolute;
  53. left: -9999px;
  54. }
  55.  
  56. #navigation a {
  57. display: block; /* Makes the entire link (not just the text, as there is padding on the anchor) clickable */
  58. font: bold 11px verdana,arial,sans-serif; /* Sets all font to 11px bold and a sans-serif font */
  59. color: #0099ca;
  60. line-height: 22px; /* Sets the height of the line (adds padding to the font until it reaches right height) */
  61. text-decoration: none; /* Gets rid of underlines in the link */
  62. padding: 0 20px 0 10px; /* Padding to the link */
  63. }
  64.  
  65. /* Styling for the optional in menu headings */
  66. #navigation h3 {
  67. margin: 0px;
  68. font-size: 0.9em;
  69. text-align: center; /* Note the American spelling used throughout css */
  70. }
  71.  
  72. /* This styling happens when a mouse hovers over the link */
  73. #navigation li a:hover {
  74. background-color: #09c;
  75. color: #fff;
  76. }
  77.  
  78. /* This styling happens to the submenu links when a top level link is hovered over */
  79. #navigation li:hover > a {
  80. background-color: #09c;
  81. color: #fff;
  82. }
  83.  
  84. /* This styling happens to the submenu ul when the top level list items are hovered over */
  85. #navigation li:hover > ul {
  86. min-width: 130px;
  87. padding: 5px;
  88. left: 131px; /* For the example I needed the submenu to the right of the main menu, you may need to change this if you change the width */
  89. margin-top: -22px; /* Also for the example I used this to align the submenu with the link in the top level menu */
  90. border: 1px solid #09C;
  91. background: rgba(255,255,255,0.8); /* This css3 (rgba) adds a 80% transparency to the colour white */
  92. position: absolute; /* This makes the position set by css rather than where it thinks it should go */
  93. }
  94. </style>

Report this snippet  

You need to login to post a comment.