Tab Menú usando listas <ul> <li>

Tab Menú usando listas <ul> <li>

Para crear un Tab Menú vamos a hacer uso de lista con viñetas sin orden que se crean usando los tags <ul> para crear la lista y los tags <li> para cada elemento de la lista, si queremos mas detalles de las diferentes lista podemos revisar http://www.webestilo.com/html/cap4a.phtml.

Lo primero que vamos a hacer es crear nuestra lista con las opciones del Tab Menú

<ul>
<li>
<a href=Default.aspx >Nuevo</a>
</li>
<li>
<a href="Default.aspx">Actualizar</a>
</li>
<li>
<a href="Default.aspx">Eliminar</a>
</li>
<li>
<a href="Default.aspx">Consultar</a>
</li>


Si luego de crear la lista la vemos en el explorador el resultado va a ser


Para conseguir que los elemento de la lista se ubiquen en una fila para ir armando nuestro tab vamos a aplicar el siguiente estilo


.tabstyle

li
{
padding-bottom:3px
;
display:block
;
float:left
;
margin:auto 1px auto auto
;
margin-right:1px
;
hasLayout:-1
;
}


Luego modificamos la lista para se aplique el estilo

<ul class=tabstyle>
<li
>
<a href=Default.aspx >Nuevo</a
>
</li
>
<li
>
<a href="Default.aspx">Actualizar</a
>
</li
>
<li
>
<a href="Default.aspx">Eliminar</a
>
</li>

<li
>
<a href="Default.aspx">Consultar</a
>
</li>

</ul>

para tener el siguiente resultado

y listo, en este momento nuestra lista tiene el estilo Tab Menú, el siguiente paso es aplicar un estilo para cambiarle la forma de nuestro tab y se vea atractivo.

Por ejemplo si queremos que nuestro Tab Menú se vea de la siguiente forma

A la misma estructura que creamos anteriormente le podemos aplicar el siguiente estilo

.tabstyle li
{
padding-bottom:3px
;
display:block
;
float:left
;
margin:auto 1px auto auto
;
margin-right:1px
;
hasLayout:-1
;
}

.tabstyle
{
height: 20px;
margin: 0;
padding-left: 10px;
background: url(images/tab_bottom.gif) repeat-x bottom;
}

.tabstyle a:link, .tabstyle a:visited
{
float: left;
background: #f3f3f3;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}

.tabstyle a:link.active, .tabstyle a:visited.active
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}

.tabstyle a:hover
{
background: #fff;
}

Artículos relacionados

Tabs tipo Facebook

No hay comentarios: