Código de CSS - Menú vertical con estilos

<<>>
Imágen de perfil

Menú vertical con estilosgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 26 de Julio del 2007 por Administrador
48.477 visualizaciones desde el 26 de Julio del 2007
Ejemplo de un menú vertical utilizando únicamente estilos.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 26 de Julio del 2007gráfica de visualizaciones de la versión: Versión 1
48.478 visualizaciones desde el 26 de Julio del 2007
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Menu vertical con estilos utilizando 'ul' y 'li'</title>
 
<style type="text/css">
<!--
#menu {
	border: 1px solid #6643ff;
	/* Pintamos las lineas de todos los lados, excepto el inferior, ya que cada
	   'li' ya trae el borde inferior */
	border-width: 1px 1px 0 1px;
	/* Determina la anchura del menu */
	width: 150px;
	font-family: Arial;
	font-size: 0.8em;
}
 
/* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */
#menu ul {
	margin: 0;
	padding: 0;
}
 
#menu li {
	/* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */
	list-style-type: none;
	/* En cada li, pintamos la linea inferior */
	border-bottom: 1px solid #6643ff;
}
 
#menu a {
	display: block;
	text-decoration: none;
	color: #6643ff;
	background: #f0edff;
	padding: 3px 6px 3px 6px;
}
 
#menu a:hover {
	background: #d6ccff;
}
-->
</style>
 
</head>
 
<body>
<h1 style="font-size:1em">Menu vertical con estilos utilizando 'ul' y 'li'</h1>
<div id="menu">
	<ul>
		<li><a href="#">Cursos</a></li>
		<li><a href="#">Temas</a></li>
		<li><a href="#">Codigo</a></li>
		<li><a href="#">Noticias</a></li>
		<li><a href="#">Contactar</a></li>
	</ul>
</div>
 
<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

martin avila
3 de Mayo del 2017
estrellaestrellaestrellaestrellaestrella
felicitaciones a la web es de las mejores que he visitado
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s1522