menu efecto

lucy2005 · #1 (**permalink**) 23/09/2011, 12:23

Alguien sabe como hacer un menu como este?
http://www.alexheuchert.com.ar/perfil/
gracias!

Franz1628 · #2 (**permalink**) 23/09/2011, 17:06

Hola lucy aca esta el código que la saque de la web que has puesto

puedes bajarte esos archivos js y css .
Ya despues puedes cambiar el css y cambiar las imagenes a lo que tu quieras

Código HTML:

Ver original<link rel="stylesheet" href="http://www.alexheuchert.com.ar/wp-content/themes/ah/style.css" type="text/css" media="screen">
<script type="text/javascript" src="http://www.alexheuchert.com.ar/wp-content/themes/ah/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.alexheuchert.com.ar/wp-content/themes/ah/js/jscript.js"></script>
 
 
<div id="header_menu">
            <ul class="menu" id="menu">
            <li class="page_item first_menu" style="background-position: -2px -128px; "><a href="http://www.alexheuchert.com.ar/">Franz</a></li>
            <li class="page_item page-item-7" style="background-position: -71px -128px; "><a href="http://www.alexheuchert.com.ar/portfolio/" title="Portfolio" class=" ">Portfolio</a>
<ul style="display: block; height: 0px; z-index: 50; overflow-x: hidden; overflow-y: hidden; ">
    <li class="page_item page-item-9"><a href="http://www.alexheuchert.com.ar/portfolio/direccion-creativa/" title="Dirección Creativa">Dirección Creativa</a></li>
    <li class="page_item page-item-11"><a href="http://www.alexheuchert.com.ar/portfolio/direccion-arte/" title="Dirección de Arte">Dirección de Arte</a></li>
</ul>
</li>
<li class="page_item page-item-2 current_page_item" style="background-position: -189px -128px; "><a href="http://www.alexheuchert.com.ar/perfil/" title="Mi Perfil">Mi Perfil</a></li>
<li class="page_item page-item-19" style="background-position: -284px -128px; "><a href="http://www.alexheuchert.com.ar/blog/" title="Blog">Blog</a></li>
            <li class="contacto last_menu"><a href="javascript:noSpam('aheuchert','airbagconcept.com.ar')">Enviame un email</a></li>
            </ul>
        </div>

lucy2005 · #3 (**permalink**) 26/09/2011, 10:29

hola!
si eso lo había visto, pero como está hecho en wordpress pensé alguno de ustedes lo había hecho simple para html y podría pasarme el código más limpio.
gracias!
saludos!

freesoftwarrior · #4 (**permalink**) 26/09/2011, 11:01

El código sería el mismo, no hay nada "adicional" que se haya agregado.
Si visualizas dicha página con Chrome y seleccionas la opción "ver código fuente", verás que los links que te pone Franz1628 aparecen como para hacer clic en ellos. Hazlo y podrás ver el código de dichos archivos. Lo puedes inclusive descargar o copiarlos en un nuevo archivo. Luego armas la página HTML así como te la ha mostrado Franz1628 colocando los links de los archivos CSS y JS antes de la etiqueta </head> de la página y el resto lo pones luego de la etiqueta <body> y listo.

Pruebalo y nos comentas.