Kilometro6 Recursos PWG

Kilometro6

Apple style menu navigation slide

Apple style menu navigation slide

Pegan este código en "Css-Code sin Style Tags":
/*Código adaptado por www.kilometro6.es.tl*/
.navigation{     position:relative;
    margin:0 auto;
    width:915px;
}
ul.menu{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menu li{
    float:left;
}
ul.menu li a{
    text-decoration:none;
    background:#7E7E7E url(https://img.webme.com/pic/k/kilometro6-pruebas/bgmenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-shadow: 0 1px 1px #fff;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menu li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menu li span.ipod{
    background-image:url(https://img.webme.com/pic/k/kilometro6-pruebas/ipod.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
    background-image:url(https://img.webme.com/pic/k/kilometro6-pruebas/video_camera.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
    background-image:url(https://img.webme.com/pic/k/kilometro6-pruebas/television.png);
    left:293px;
}
ul.menu li span.monitor{
    background-image:url(https://img.webme.com/pic/k/kilometro6-pruebas/monitor.png);
    left:423px;
}
ul.menu li span.toolbox{
    background-image:url(https://img.webme.com/pic/k/kilometro6-pruebas/toolbox.png);
    left:553px;
}
ul.menu li span.telephone{
    background-image:url(https://img.webme.com/pic/k/kilometro6-pruebas/telphone.png);
    left:683px;
}
ul.menu li span.print{
    background-image:url(https://img.webme.com/pic/k/kilometro6-pruebas/print.png);
    left:813px;
}

Este lo pegan en "Texto por encima de la página":
<!-- www.kilometro6.es.tl -->
<script type="text/javascript" src="http://kilometro6.comze.com/wp-content/uploads/2013/09/Apple-style-menu-navigation-slide/jquery-1.3.2.js"></script>         <script type="text/javascript">             $(function() {
                var d=1000;
                $('#menu span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
                }
            );
            });
        </script>

Este va donde quieren que aparezca el menu:
<!-- www.kilometro6.es.tl -->
<div class="navigation">
            <ul class="menu" id="menu">
                <li><span class="ipod"></span><a href="" class="first">Players</a></li>
                <li><span class="video_camera"></span><a href="">Cameras</a></li>

                <li><span class="television"></span><a href="">TVs</a></li>
                <li><span class="monitor"></span><a href="">Screens</a></li>
                <li><span class="toolbox"></span><a href="">Tools</a></li>
                <li><span class="telephone"></span><a href="">Phones</a></li>
                <li><span class="print"></span><a href="" class="last">Printers</a></li>
            </ul>

        </div>

Para que el menu se visualice correctamente, es necesario mover la publicidad horizontal de PWG para que no este en el mismo lugar que el menu. Para ello, deben utilizar el siguiente código:
table[height ="102"] {
position:absolute; 
top:100px;
left:0px;
}

Dependiendo del lugar a donde quieran mover el banner, modifican los valores de top y left. A valores más grandes, la publicidad se desplazara más del borde de la página. La propiedad top desplaza la publicidad hacia la derecha y la propiedad left, hacia la derecha. Lo pegan en Css-Code.

Partes a modificar:
<li><span class="television"></span><a href="">TVs</a></li>
Lo que esta en medio de las dos colmillas juntas ("") sería la url del enalce.
Lo que esta en rojo sería el título del enlace.

Puedes ver una vista previa aqui.

Cualquier pregunta puedes hacerla en nuestra Seccion de Soporte
Hoy hemos ayudado a 8 visitantes (21 clics a subpáginas) en kilometro6!
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis