Menù jQuery en pestañas

Hoy les quiero mostrar cómo crear una diapositiva asombrosa de menú o la navegación por su página web. La navegación será casi oculta - los únicos elementos de diapositivas cuando el usuario se desplaza sobre el área a su lado. Esto le da un bonito efecto y el uso de esta técnica, ¿puedes darme un poco de espacio en su sitio web. Los artículos serán semi-transparente que significa que el contenido en ellas no se oculta totalmente.

---

Lo que ahcemos es ir al panel de admin de nuestro foro..

luego vamos a la zona de templates

Bueno, entonces la parte del template:


>Panel de administracion
>Visualización
>Templates
>General
>overall_header
le damos a y buscamos este codigo con Control+F

Código:

<!-- END google_analytics_code -->

y debajo de este código ponemos.

Código:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<ul id="navigation">
 <li class="home"><a href="/forum.htm" title="Home"></a></li>
 <li class="portal"><a href="/portal.htm" title="Portal"></a></li>
 <li class="galeri"><a href="/gallery/index.htm" title="galeria"></a></li>
 <li class="profile"><a href="/profile.forum?mode=editprofile" title="Perfil"></a></li>
 <li class="grupes"><a href="/groupcp.forum" title="grupos"></a></li>
 <li class="member"><a href="/memberlist.forum" title="miembros"></a></li>
 <li class="Msn"><a href="msg.forum?folder=inbox" title="Mensajeria"></a></li>

<script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });
 
                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

y listo se registran los cambios
ahora nos vamos al css del foro

--> PA
--> VISUALIZACION
--> COLORES
--> CSSSTYLESHEET

y pegamos lo siguiente:

Código:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index: 999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px; 
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/home.png');
}
ul#navigation .portal a      {
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/heart.png');
}
ul#navigation .galeri a      {
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/calendar.png');
}
ul#navigation .profile a      {
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/tag.png');
}
ul#navigation .grupes a  {
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/tag_add.png');
}
ul#navigation .member a    {
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/tag_add.png');
}
ul#navigation .Msn a    {
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/tag_add.png');
}

si quieren agregar otra pestaña

el el template.

Código:

<li class="Nombre del css"><a href="url de la pagina" title="nombre"></a></li>

en el css

Código:

ul#navigation .Link a    {
    background-image: url('http://png-images.findicons.com/files/icons/808/on_stage/128/tag_add.png');
}

Demo