Advanced Search

Menu de un nivel en XHTML y CSS

/ Published in: CSS
Save to your folder(s)
Un sencillo menú realizado con CSS y un par de imágenes haciendo de \\\\\\\\\\\\\\\"bullets\\\\\\\\\\\\\\\".\\\\\\\\r\\\\\\\\nEs una pequeña variación del que se encuentra en el tutorial de CSS de librosweb.com

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css" media="all">
  6. ul.menu{
  7. 	width:200px;
  8. 	list-style:none;
  9. 	border:1px solid #7C7C7C;
  10. 	border-bottom:none;
  11.  
  12. 	margin:0;
  13. 	padding:0;}
  14.  
  15. ul.menu li{
  16. 	border-bottom:1px solid #7C7C7C;
  17. 	background: #F4F4F4;
  18. 	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
  19. 	background-repeat: no-repeat;
  20. 	background-position: 0.2em 50%;
  21. }
  22.  
  23. ul.menu li a:link, ul.menu li a:visited {
  24. 	padding: .2em 0 .2em 24px;
  25. 	/* Al mostrar en bloque el enlace es todo el ancho*/
  26. 	display: block;
  27. 	text-decoration: none;
  28. 	color: #333;
  29. }
  30.  
  31. ul.menu li:hover{
  32. 	background-color: #E0E0E0;
  33. 	background-image: url(imagenesEjercicio10/flecha_activa.png);
  34. 	background-repeat: no-repeat;
  35. 	background-position: 0.2em 50%;
  36. 	}
  37. </style>
  38. <title>Sencillo menu en CSS</title>
  39. </head>
  40.  
  41. <body>
  42. <ul class="menu">
  43. 	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
  44. 	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
  45. 	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
  46. 	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
  47.     <li><a href="#" title="Enlace 5">Enlace 5</a></li>
  48. 	<li><a href="#" title="Enlace gen������©rico">Elemento 6</a></li>
  49. </ul>
  50. </body>
  51. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.