¡Alucinante menú deslizable con Javascript y Css! Primero vean una demostración para que se vayan dando una idea de cómo funciona.
Pueden descargar un archivo Rar de ejemplo con los script y las imágenes. El Archivo consta de un grupo de archivos y carpetas:
- Index: la página principal donde navegamos y que contiene la hoja de estilo (CSS).
- Images: el diseño de las imágenes de los botones y la barra. Pueden cambiarlas si lo desean.
- Js: carpeta que contiene los scripts y debe estar instalada.
Si desean aplicarle el menú a una página que ya diseñaron sigan los siguientes pasos:
1. Copiar las carpetas Js e Images al directorio donde se encuentra su sitio.
2. Peguen el siguiente código entre las etiquetas <HEAD> y </HEAD> :
<script src="js/prototype.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script src="js/tabslide.js" type="text/javascript"></script>
3. A continuación copien todo lo que se encuentre entre las etiquetas <style> y </style> del archivo index.
4. Crear el menú acordeón de esta manera:
<div id="accordion"> </div> <script>init();</script>
5. Para crear cada uno de los botones, cada botón debería estar entre las etiquetas <div> y </div> del acordeón y debería tener esta lógica por cada botón:
<div class="panel" id="panel1"> <h3>Panel 1</h3> <div id="panel1-body" class="panel_body"> <div> This is the contents of this panel. </div> </div> </div>
Si lo descargan y lo analizan un segundo se van a dar cuenta que es muy simple y queda muy elegante.
Descargar
2. Peguen el siguiente código entre las etiquetas <HEAD> y </HEAD> :
<script src="js/prototype.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script src="js/tabslide.js" type="text/javascript"></script>
3. A continuación copien todo lo que se encuentre entre las etiquetas <style> y </style> del archivo index.
4. Crear el menú acordeón de esta manera:
<div id="accordion"> </div> <script>init();</script>
5. Para crear cada uno de los botones, cada botón debería estar entre las etiquetas <div> y </div> del acordeón y debería tener esta lógica por cada botón:
<div class="panel" id="panel1"> <h3>Panel 1</h3> <div id="panel1-body" class="panel_body"> <div> This is the contents of this panel. </div> </div> </div>
Si lo descargan y lo analizan un segundo se van a dar cuenta que es muy simple y queda muy elegante.
Descargar
0 comentarios:
Publicar un comentario