Advanced Search

CSS3 Vertical Menu Navigation

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.