Foros del Web » Creando para Internet » CSS »

barra de navegacion elegante

Estas en el tema de barra de navegacion elegante en el foro de CSS en Foros del Web. Hola a todos Requiero su ayuda para crear una barra de navegacion en css elegante. Estas barras se crean con imagenes o graficos en png ...
  #1 (permalink)  
Antiguo 05/05/2011, 10:45
 
Fecha de Ingreso: marzo-2008
Ubicación: Posadas Misiones Argentina
Mensajes: 440
Antigüedad: 9 años, 8 meses
Puntos: 0
barra de navegacion elegante

Hola a todos

Requiero su ayuda para crear una barra de navegacion en css elegante.
Estas barras se crean con imagenes o graficos en png que son partes de la barra.
Lo que no sé es que partes de la barra debo crear con un editor de graficos, y el codigo que debo utilizar en CSS para crearlo.
Un vez encontré un tutorial pero muy superficial fue la explicación.
Me pueden ayudar como crear estas barras o un tutorial que explique bien como hacerlo.

Gracias.
  #2 (permalink)  
Antiguo 05/05/2011, 11:18
Avatar de babri  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: barra de navegacion elegante

yo el que he hecho, lo tengo en HTML5 y está englobado dentro de esta etiqueta:

Código HTML:
Ver original
  1. <nav>
  2.         <!-- Listado de Navegación -->
  3.         <ul class="menu">  
  4.             <li><a href="#">Home</a></li>  
  5.             <li><a href="#">Quienes Somos</a></li>  
  6.             <li><a href="#">Que Hacemos</a></li>
  7.             <li><a href="#">Clientes</a></li>
  8.             <li><a href="#">Club Coolaboro</a></li>
  9.         </ul>    
  10. </nav>

La etiqueta nav indica que es la barra de navegación y luego en un archivo CSS le tengo puesto esto:

Código CSS:
Ver original
  1. nav {
  2. position : absolute;
  3. left : 0;
  4. width : 100%;
  5. background : url(../imagenes/nav_background.png);
  6. }
  7. nav ul {
  8. margin : 0 auto;
  9. width : 940px;
  10. list-style : none;
  11. }
  12. nav ul li {
  13. float : left;
  14. }
  15. nav ul li a {
  16. display : block;
  17. margin-right : 20px;
  18. width : 140px;
  19. font-size : 14px;
  20. line-height : 44px;
  21. text-align : center;
  22. text-decoration : none;
  23. color : #ccc;
  24. }
  25. nav ul li a:hover {
  26. color : #fff;
  27. }
  28. nav ul li.selected a {
  29. color : #fff;
  30. }

Y este es el resultado:



La imagen que he usado para la nav (nav_background) es esta:




PD: la barra ocupa el 100% de la página siempre y le da un estilo muy chulo =P
  #3 (permalink)  
Antiguo 06/05/2011, 12:15
 
Fecha de Ingreso: marzo-2008
Ubicación: Posadas Misiones Argentina
Mensajes: 440
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: barra de navegacion elegante

Hola

Gracias por la respuesta , pero me podias mostrar el codigo para la clase menú que tu colocas en la lista ul.

Gracias.
  #4 (permalink)  
Antiguo 06/05/2011, 12:26
Avatar de babri  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: barra de navegacion elegante

Cita:
Iniciado por pabje Ver Mensaje
Hola

Gracias por la respuesta , pero me podias mostrar el codigo para la clase menú que tu colocas en la lista ul.

Gracias.
le he puesto clase pero en realidad no la uso, tiro de la etiqueta nav que es HTML5 :D
  #5 (permalink)  
Antiguo 06/05/2011, 13:19
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: barra de navegacion elegante

has probado ese menú en versiones viejas de IE como la 7 y 8?

dado que es una etiqueta html 5 dentro de IE7 y 8 no funcionan tus estilos

no deberías colgarte aun de las etiquetas HTML 5 para crear los estilos o conoces algún truco para que funcione el css para dichas etiquetas en ie?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 06/05/2011, 16:42
Avatar de babri  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: barra de navegacion elegante

Cita:
Iniciado por Ag666 Ver Mensaje
has probado ese menú en versiones viejas de IE como la 7 y 8?

dado que es una etiqueta html 5 dentro de IE7 y 8 no funcionan tus estilos

no deberías colgarte aun de las etiquetas HTML 5 para crear los estilos o conoces algún truco para que funcione el css para dichas etiquetas en ie?
lo conozco :DDD

en concreto esto:

Código Javascript:
Ver original
  1. <!--[if lt IE 9]>
  2. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  3. <![endif]-->


lo ha hecho un hombre para todas las versiones de IE :D
  #7 (permalink)  
Antiguo 06/05/2011, 17:12
 
Fecha de Ingreso: mayo-2011
Mensajes: 1
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: barra de navegacion elegante

ummmm, interesante.
  #8 (permalink)  
Antiguo 06/05/2011, 17:27
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: barra de navegacion elegante

Cita:
Iniciado por babri Ver Mensaje
lo conozco :DDD

en concreto esto:

Código Javascript:
Ver original
  1. <!--[if lt IE 9]>
  2. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  3. <![endif]-->


lo ha hecho un hombre para todas las versiones de IE :D
muy buen punto por un momento me olvide de estos scripts, aunque ciertamente no son muy de mi agrado y trato de no utilizarlos...

pero igual gracias estoy seguro que al compañero @pabje le sera de mucha utilidad
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 07/05/2011, 11:39
 
Fecha de Ingreso: marzo-2008
Ubicación: Posadas Misiones Argentina
Mensajes: 440
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: barra de navegacion elegante

Hola

Gracias por las respuestas. Y como dice Ag666, a mi tampoco no me funciono el código de css ni con Internet explorer 8 ni con firefox 4.
Voy a probar con el codigo en Java script. Gracias a Todos.
  #10 (permalink)  
Antiguo 09/05/2011, 02:11
Avatar de babri  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: barra de navegacion elegante

Cita:
Iniciado por pabje Ver Mensaje
Hola

Gracias por las respuestas. Y como dice Ag666, a mi tampoco no me funciono el código de css ni con Internet explorer 8 ni con firefox 4.
Voy a probar con el codigo en Java script. Gracias a Todos.
a mi en firefox4 si me tira :D en IE con el script si me funciona ^^
  #11 (permalink)  
Antiguo 09/05/2011, 11:00
 
Fecha de Ingreso: marzo-2008
Ubicación: Posadas Misiones Argentina
Mensajes: 440
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: barra de navegacion elegante

Hola

He probado con el codigo en java sript , igual no me salen los estilos ni en firefox 4 ni en internet exporer 8.
No se cual pueda ser el problema. Tal vez si se hace en una version anterior a HTML5.
Nuevamente pido su ayuda.
  #12 (permalink)  
Antiguo 11/05/2011, 03:04
Avatar de babri  
Fecha de Ingreso: mayo-2011
Ubicación: Madrid
Mensajes: 17
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: barra de navegacion elegante

Código HTML:
Ver original
  1. <div class="nav">
  2. <!-- Listado de Navegación -->
  3.         <ul class="menu">  
  4.             <li><a href="#">Home</a></li>  
  5.             <li><a href="#">Quienes Somos</a></li>  
  6.             <li><a href="#">Que Hacemos</a></li>
  7.             <li><a href="#">Clientes</a></li>
  8.             <li><a href="#">Club Coolaboro</a></li>
  9.         </ul></div>

Código CSS:
Ver original
  1. body .nav {
  2. position : absolute;
  3. left : 0;
  4. width : 100&#37;;
  5. background : url(../imagenes/nav_background.png);
  6. }
  7. body .nav ul {
  8. margin : 0 auto;
  9. width : 940px;
  10. list-style : none;
  11. }
  12. body .nav ul li {
  13. float : left;
  14. }
  15. body .nav ul li a {
  16. display : block;
  17. margin-right : 20px;
  18. width : 140px;
  19. font-size : 14px;
  20. line-height : 44px;
  21. text-align : center;
  22. text-decoration : none;
  23. color : #ccc;
  24. }
  25. body .nav ul li a:hover {
  26. color : #fff;
  27. }
  28. body .nav ul li.selected a {
  29. color : #fff;
  30. }

Etiquetas: barra, navegacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:30.