Menú de la ficha de JavaScript/CSS con sub-navegación (1 / 4 paso)

Paso 1: Hacer las imágenes

En primer lugar, debemos decidir el estilo de nuestro menú y crear en consecuencia las imágenes. No voy a entrar en mucho detalle sobre esto, ya que es la magia real detrás del menú en el código y no los gráficos, pero vamos a necesitar unas imágenes básicas para ayudar a poner en orden el aspecto de nuestro menú (aunque técnicamente podría omitir este paso y usar colores sólidos en su CSS).

subnav_bg.jpg
Esta es la imagen de fondo para nuestro menú de sub-nav (la barra justo debajo de las pestañas). El requisito técnico sólo aquí es la imagen 25px de altura, para trabajar con el CSS estoy suministrando.

subnav_separator.jpg
Esta pequeña imagen es esencialmente sólo una 1-2px amplia línea vertical, otra vez, 25px de altura, que servirá como un separador entre nuestros elementos sub-nav. Sugerencia: hacer los 2px de imagen lateral y utilizar una línea de luz al lado de una línea oscura para crear una apariencia biselada.

tab_bg.jpg
Esta es la imagen de fondo para nuestras pestañas del menú principal. Mis pestañas son 90px amplia y alta 29px (oops... Era apagado por uno).

Por supuesto, si no te apetece hacer tus propias imágenes, usted puede siempre tomar estos...