login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > Overige > CSS > css menu

css menu

Auteur: meerweten - 23 juli 2009 - 18:32 - Gekeurd door: Rik - Hits: 4878 - Aantal punten: 3.00 (1 stem)




instalatie is niet moeilijk

maak een extern css sheet en plak de comde ering of download

ook html voorbeelde megegeven over hoe je het in html moet zetten

Code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .clearit {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	height: 0;
  5. 	clear: both;
  6. }
  7.  
  8. /* BUBBLE PLASTIC HORIZONTAL MENU */
  9.  
  10. .bubplastic.horizontal {
  11. 	width: 100%;
  12. 	height: 27px;
  13. 	margin: 0;
  14. 	padding: 0;
  15. 	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
  16. }
  17. .bubplastic.horizontal ul {
  18. 	list-style: none;
  19. 	margin: 0;
  20. 	padding: 0;
  21. }
  22. .bubplastic.horizontal ul li {
  23. 	float: left;
  24. 	margin: 0;
  25. 	padding: 0;
  26. 	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
  27. }
  28.  
  29. .bubplastic.horizontal ul li a {
  30. 	display: block;
  31. 	height: 27px;
  32. 	padding-left: 35px;
  33. 	float: left;
  34. 	text-transform: uppercase;
  35. 	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
  36. 	font-size: 70%;
  37. 	color: #FFFFFF;
  38. 	text-decoration: none;
  39. }
  40.  
  41. .bubplastic.horizontal ul li a span.menu_ar {
  42. 	display: block;
  43. 	float: left;
  44. 	height: 22px;
  45. 	padding-top: 5px;
  46. 	padding-right: 35px;
  47. 	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
  48. 	cursor: pointer;
  49. }
  50. /* END BUBBLE PLASTIC HORIZONTAL MENU */
  51.  
  52.  
  53.  
  54. /* BUBBLE PLASTIC VERTICAL MENU */
  55.  
  56. .bubplastic.vertical {
  57. 	width: 250px;
  58. 	margin: 0;
  59. 	padding: 0;
  60. 	display: block;
  61. }
  62. .bubplastic.vertical ul {
  63. 	display: block;
  64. 	list-style: none;
  65. 	margin: 0;
  66. 	padding: 0;
  67. }
  68. .bubplastic.vertical ul li {
  69. 	display: block;
  70. 	float: left;
  71. 	width: 100%;
  72. 	margin: 0;
  73. 	padding: 0;
  74. 	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
  75. }
  76.  
  77. .bubplastic.vertical ul li a {
  78. 	display: block;
  79. 	margin: 0;
  80. 	width: 100%;
  81. 	padding-left: 35px;
  82. 	text-transform: uppercase;
  83. 	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
  84. 	font-size: 70%;
  85. 	color: #FFFFFF;
  86. 	text-decoration: none;
  87. 	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
  88. }
  89.  
  90. .bubplastic.vertical ul li a span.menu_ar {
  91. 	display: block;
  92. 	margin: 0;
  93. 	width: 100%;
  94. 	height: 22px;
  95. 	padding-top: 5px;
  96. 	padding-right: 35px;
  97. 	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
  98. 	cursor: pointer;
  99. }
  100. /* END BUBBLE PLASTIC VERTICAL MENU */
  101.  
  102.  
  103.  
  104. /* AQUA HOVER */
  105. .bubplastic.aqua ul li a:hover,
  106. .bubplastic.aqua ul li.highlight a {
  107. 	background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;
  108. }
  109. .bubplastic.aqua ul li a:hover span.menu_ar,
  110. .bubplastic.aqua ul li.highlight a span.menu_ar {
  111. 	background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
  112. }
  113.  
  114.  
  115. /* BLUE HOVER */
  116. .bubplastic.blue ul li a:hover,
  117. .bubplastic.blue ul li.highlight a {
  118. 	background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
  119. }
  120. .bubplastic.blue ul li a:hover span.menu_ar,
  121. .bubplastic.blue ul li.highlight a span.menu_ar {
  122. 	background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
  123. }
  124.  
  125.  
  126. /* GRAY HOVER */
  127. .bubplastic.gray ul li a:hover,
  128. .bubplastic.gray ul li.highlight a {
  129. 	background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
  130. }
  131. .bubplastic.gray ul li a:hover span.menu_ar,
  132. .bubplastic.gray ul li.highlight a span.menu_ar {
  133. 	background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
  134. }
  135.  
  136.  
  137. /* LIME HOVER */
  138. .bubplastic.lime ul li a:hover,
  139. .bubplastic.lime ul li.highlight a {
  140. 	background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat;
  141. }
  142. .bubplastic.lime ul li a:hover span.menu_ar,
  143. .bubplastic.lime ul li.highlight a span.menu_ar {
  144. 	background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat;
  145. }
  146.  
  147.  
  148. /* ORANGE HOVER */
  149. .bubplastic.orange ul li a:hover,
  150. .bubplastic.orange ul li.highlight a {
  151. 	background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;
  152. }
  153. .bubplastic.orange ul li a:hover span.menu_ar,
  154. .bubplastic.orange ul li.highlight a span.menu_ar {
  155. 	background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat;
  156. }
  157.  
  158.  
  159. /* PINK HOVER */
  160. .bubplastic.pink ul li a:hover,
  161. .bubplastic.pink ul li.highlight a {
  162. 	background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;
  163. }
  164. .bubplastic.pink ul li a:hover span.menu_ar,
  165. .bubplastic.pink ul li.highlight a span.menu_ar {
  166. 	background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;
  167. }
  168.  
  169.  
  170. /* PURPLE HOVER */
  171. .bubplastic.purple ul li a:hover,
  172. .bubplastic.purple ul li.highlight a {
  173. 	background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;
  174. }
  175. .bubplastic.purple ul li a:hover span.menu_ar,
  176. .bubplastic.purple ul li.highlight a span.menu_ar {
  177. 	background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;
  178. }
  179.  
  180.  
  181. /* RED HOVER */
  182. .bubplastic.red ul li a:hover,
  183. .bubplastic.red ul li.highlight a {
  184. 	background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;
  185. }
  186. .bubplastic.red ul li a:hover span.menu_ar,
  187. .bubplastic.red ul li.highlight a span.menu_ar {
  188. 	background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;
  189. }
  190.  
  191. #test li {
  192. 	display: block;
  193. 	border: solid 1px red;
  194. }


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menu bubplastic horizontal lime">
  2. <ul>
  3. 		<li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
  4. 		<li><span class="menu_r"><a href="b.html" target="_self"><span class="menu_ar">onbekende</span></a></span></li>
  5. 		<li><span class="menu_r"><a href="c.html" target="_self"><span class="menu_ar">onbekende</span></a></span></li>
  6. 		<li><span class="menu_r"><a href="f.html" target="_self"><span class="menu_ar">onbekende</span></a></span></li>
  7. 	</ul>
  8. </div>
Download code! Download code (.txt)

Download dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (6)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.034s