11034 Suscriptores al Feed del Blog
80 Suscriptores al Feed de Anotaciones Breves
33 usuarios online
Mauricio Campos en 50 preguntas y respuestas de entrevistas de trabajo
Cómo hacer un menú horizontal con CSS
6 COMENTARIOS - Publicado hace 50 meses - Clasificado en: TIPS, CSS, DESARROLLO, WEBHacer un funcional menú horizontal es más sencillo de lo que parece. Por defecto los elementos de una lista se muestran como bloques (blocks) con lo que cada item del listado ocupará una nueva línea. Simplemente cambiando el modo en que se muestran los items, tendremos una lista horizontal que podrá hacer las veces de menú. CSS:
#menuhoriz ul li {
display: inline;
}
HTML:
<div id="menuhoriz">
<ul>
<li>Botón uno</li>
<li>Botón dos</li>
<li>Botón tres</li>
</ul>
</div>
A partir de aquí podemos ir introduciendo detalles para hacer más atractivo nuestro menú. Una sencilla muestra:
#menuhoriz ul li {
display: inline;
padding: 2px 7px; /*Separar el texto*/
margin:5px; /* Separar los botones */
background-color:#E4E4E4; /* Color de fondo */
}
#menuhoriz ul li:hover {
background-color:#CCCCCC; /* Color de fondo sobre el boton */
cursor: pointer; /* cambiar el aspecto del puntero */
}
#menuhoriz ul {
/* Linea para delimitar la botonera */
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E4E4E4;
}
Algunas entradas relacionadas:
- Nueve técnicas de sustitución de imágenes con CSS
- Reducir ficheros Javascript y CSS con PHP
- Dos clases juntas con CSS
- Centrar una web con ancho fijo
- Cambiar el aspecto del cursor
- Sistema de navegación por franjas con CSS
- Distinguir Google Chrome y Safari con CSS
También te puede interesar:
Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 12 meses Sebastian - sinceramente muy bueno y sobretodo muy util tu post, me ha sido de mucha ayuda. muchas gracias por el aporte |
 |
Publicado hace 2 meses JoGe - Gracias!, estoy recien partiendo con esto, y me ayudó mucho tu publicación |
 |
Publicado hace 2 meses marcela - simple y claro. gracias! |
 |
Publicado hace 1 mes Daniel - Bastante claro y facil de adaptar gracias!!! |
 |
Publicado hace 1 mes Maria - Me encanta este blog por que aprendo un montón y lo tengo agregado en el reader para seguirlo. Pero hago esta pregunta en este tema, aunque sea antiguo, por que justo estaba consultando info sobre menus CSS. Mi pregunta es: si por ejemplo yo le pongo un efecto en un botón para que al estar encima cambie, ¿hay alguna forma que el botón que esta seleccionado (es decir, el de la página en la que estamos) quede marcado? Es decir, si pincho en inicio que inicio quede de un color y el resto de otro y si pincho en otro que inicio quede del color de todos menos del seleccionado. Gracias de antemano por resolver mi duda!! |
 |
Publicado hace 1 mes nestor - http://www.artelinko.com/unad/siunadred Hola muy util tu ejemplo, estobuscando este msimo menu pero con la opcion de uno o dos subniveles, que sean visibles cuando se pase el mouse por el menu principal, tieens un ejemplo asÃ? En menu horizontal. |
