Menu de un nivel en XHTML y CSS - CSS Snipplr Social Repository

Revision: 31655

at September 10, 2010 04:21 by chuisxa

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace genÃƒï¿½Ã¯Â¿Â½ÃƒÂ¯Ã‚Â¿Ã‚Â½Ãƒï¿½Ã¯Â¿Â½Ãƒï¿½Ã‚Â©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31654

at September 10, 2010 04:19 by chuisxa

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace genÃƒï¿½Ã¯Â¿Â½Ãƒï¿½Ã‚Â©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31653

at September 10, 2010 04:18 by chuisxa

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace genÃƒï¿½Ã‚Â©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31652

at September 10, 2010 04:18 by chuisxa

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace genÃƒÂ©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31651

at September 10, 2010 04:17 by chuisxa

Initial Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace genÃ©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Initial URL

Initial Description

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

Initial Title

Menu de un nivel en XHTML y CSS

Initial Tags

Initial Language

CSS

Choose a language for easy browsing: