Paso 4: El CSS
Por último, necesitamos crear el CSS para el estilo del menú. Usted probablemente querrá jugar con dimensiones y qué tienes al crear su propia barra de nav, para que coincida con la anchura de su diseño. Sin embargo, por ahora, estoy creando un menú de pestaña que es ancho de 600px. La altura de la barra de menús es 54px (25px para nuestra sub-nav + 29px para nuestras fichas). #nav { width:600px; height:54px; margin:0; padding:0;} , A estilo de todo el texto dentro de nuestro nav/sub-nav: Esto es puramente cosmético. Centros de todo el texto, hace que sea blanco, establece la fuente y se deshace del subrayado del enlace.
#nav * { text-align:center; color:#fff; font-weight:bold; text-decoration:none; font-family:arial, helvetica, sans-serif; font-size:9pt;} A continuación, nos a deshacerse de todos los márgenes, relleno y balas de todos nuestros lsits.
#nav ul, #nav ul li { margin:0; padding:0; list-tyle-type:none;}#nav ul li { display:inline; } Nuestras fichas de menú principal en el lado derecho de la barra de navegación de la carroza:
ul#tabBar { float:right; } Ahora te estilo nuestras pestañas de navegación principal, incluyendo sus Estados estándar y se ciernen: Tenga en cuenta que al cambiar la altura de la línea sobre el estado hover, hacemos la ficha en "pop up".
ul#tabBar li a { display:block; float:left; width:90px; height:29px; line-height:39px; background:url(../imgs/tab_bg.jpg) 0 10px no-repeat; border-left:4px solid #fff; overflow:hidden; /* fixes IE display bug */}ul#tabBar li a:hover { line-height:29px; background:url(../imgs/tab_bg.jpg) top left no-repeat;} Ahora hemos creado los estilos para las listas de nuestros sub-nav: Queremos ocultar las listas de sub-nav de forma predeterminada, asegúrese de que claro Haz colocados debajo de las pestañas principales, y queremos flotar a la izquierda de nuestro menú de la barra y el fondo. Tor el propio contenedor sub-nav utilizamos el archivo 'nav_bg.jpg' y luego la lista sub-nav, establecer el fondo en el archivo 'subnav_separator.jpg' y asegúrese de que esté a la izquierda y no repetir.
#subNav ul { display:none; }#subNav { clear:both; height:25px; background:url(../imgs/subnav_bg.jpg) top left repeat-x; padding-left:100px;}#subNav ul { float:left; background:url(../imgs/subnav_separator.jpg) top left no-repeat;} Finalmente, estilo de los enlaces: Esto es muy sencillo. Sólo estamos establecer las dimensiones de enlace, flotante cada enlace a la izquierda, ajuste la alineación del texto y el fondo. Observa cómo hemos creado la 'nav_separator.jpg' como telón de fondo y colocarlo en el borde derecho del enlace.
display:block; float:left; width:90px; text-align:center; line-height:25px; background:url(../imgs/subnav_separator.jpg) top right no-repeat;}#subNav li a:hover { color:#cde7ff; } Termina el menú! Yo he conectado la fuente completa para jugar con.
