Posted By

clone on 07/20/11


Tagged

menu navigation CSS3 vertical


Versions (?)

CSS3 Vertical Menu Navigation


 / Published in: HTML
 

  1. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
  2. </head>
  3. <style type="text/css">
  4. #submit {
  5. -moz-border-radius: 2px;
  6. -webkit-border-radius: 2px;
  7. border-radius: 2px 2px 2px 2px;
  8. background-color: #E1E1E1;
  9. background-image: -webkit-gradient(linear,left top,left bottom,from(#E1E1E1),to(#D9D9D9));
  10. background-image: -webkit-linear-gradient(top, #E1E1E1, #D9D9D9);
  11. background-image: -moz-linear-gradient(top, #E1E1E1, #D9D9D9);
  12. background-image: -ms-linear-gradient(top, #E1E1E1, #D9D9D9);
  13. background-image: -o-linear-gradient(top, #E1E1E1, #D9D9D9);
  14. background-image: linear-gradient(top, #E1E1E1, #D9D9D9);
  15. border: 1px solid #B8B8B8;
  16. cursor: pointer;
  17. font-weight: bold;
  18. height: 27px;
  19. line-height: 27px;
  20. margin-left: 155px;
  21. min-width: 54px;
  22. padding: 0 8px;
  23. text-align: center;
  24. -webkit-transition: all 0.218s;
  25. -moz-transition: all 0.218s;
  26. -o-transition: all 0.218s;
  27. transition: all 0.218s;
  28. -webkit-appearance: push-button;
  29. }
  30.  
  31. #submit:hover {
  32. background-image: -webkit-linear-gradient(top,#E1E1E1,#C1C1C1);
  33. background-image: -moz-linear-gradient(top,#E1E1E1,#C1C1C1);
  34. background-image: -ms-linear-gradient(top,#E1E1E1,#C1C1C1);
  35. background-image: -o-linear-gradient(top,#E1E1E1,#C1C1C1);
  36. background-image: linear-gradient(top,#E1E1E1,#C1C1C1);
  37. border: 1px solid #A0A0A0;
  38. }
  39.  
  40. .menu {
  41. height: auto;
  42. width: 148px;
  43. -moz-border-radius: 2px;
  44. -webkit-border-radius: 2px;
  45. border-radius: 2px;
  46. padding: 2px
  47. }
  48.  
  49.  
  50. .menu .menu_liste li a {
  51. display:block;
  52. padding-top: 5px;
  53. padding-bottom: 5px;
  54. padding-left: 4px;
  55. text-decoration:none;
  56. color: #000;
  57. }
  58.  
  59. ul, li {
  60. margin: 0;
  61. padding: 0;
  62. list-style:none;
  63. font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
  64. font-size: 12px;
  65. }
  66.  
  67. li{
  68. border: 1px solid #ddd;
  69. -moz-border-radius: 2px;
  70. -webkit-border-radius: 2px;
  71. border-radius: 2px;
  72. margin: 2px;
  73. background-image: -webkit-gradient(linear,left top,left bottom,from(#E1E1E1),to(#D9D9D9));
  74. background-image: -webkit-linear-gradient(top, #E1E1E1, #D9D9D9);
  75. background-image: -moz-linear-gradient(top, #E1E1E1, #D9D9D9);
  76. background-image: -ms-linear-gradient(top, #E1E1E1, #D9D9D9);
  77. background-image: -o-linear-gradient(top, #E1E1E1, #D9D9D9);
  78. background-image: linear-gradient(top, #E1E1E1, #D9D9D9);
  79. border: 1px solid #B8B8B8;
  80. font-weight: bold;
  81. }
  82.  
  83. li:hover{
  84. background-image: -webkit-linear-gradient(top,#FDB813,#F68B1F);
  85. background-image: -moz-linear-gradient(top,#FDB813,#F68B1F);
  86. background-image: -ms-linear-gradient(top,#FDB813,#F68B1F);
  87. background-image: -o-linear-gradient(top,#FDB813,#F68B1F);
  88. background-image: linear-gradient(top,#FDB813,#F68B1F);
  89. border: 1px solid #F17022;
  90. }
  91.  
  92. <input type="submit" id="submit"/>
  93.  
  94. <div class="menu">
  95.  
  96.  
  97. <ul class="menu_liste">
  98.  
  99. <li><a href="#">Home</a></li>
  100. <li><a href="#">Blog</a></li>
  101. <li><a href="#">Portfolio</a></li>
  102. <li><a href="#">CV</a></li>
  103. <li><a href="#">Projects</a></li>
  104. <li><a href="#">Contact Me</a></li>
  105.  
  106. </ul>
  107.  
  108. </div>
  109. </body>
  110. </html>

Report this snippet  

You need to login to post a comment.