- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
“Collapsing Site Navigation”
marzo 17, 2011
Un menú colapsable (collapsing menu) contiene barras verticales de navegación y una área de contenido. Cuando selecciona un elemento de menú, una imagen aparece desde la parte superior y un submenú aparece desde el parte inferior. Al hacer clic en uno de los elementos de submenú, el menú entero se derrumbará como una baraja y el área de contenido se aparecerá. JavaScript Debemos incluir framework jQuery y collapsing-site-navigation.js señalando el atributo src de la etiqueta de script a los ficheros.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="collapsing-site-navigation.js"></script>La sección <head> del fichero index-#.html contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos:
HTML
Nuestro HTML constará de un contenedor (container) principal con la clase y id cc_menu. Aquí vamos a poner todos nuestros elementos de menú vertical y el contenido principal div:El primer elemento obtendrá un z-index de 5 y luego vamos a disminuir z-index para los siguientes elementos. Esto hará que el último elemento se coloque en la capa inferior. Hacemos esto para crear el efecto de baraja. A continuación se encuentra el contenido de las páginas:<img scr="images/img1.jpg" alt="" /> Main page<img scr="images/img2.jpg" alt="" /> about us<img scr="images/img3.jpg" alt="" /> services<img scr="images/img4.jpg" alt="" /> partners<img scr="images/img5.jpg" alt="" /> locations
regresar al menú regresar a página Privacy policy/Politica de privacidad.............. .............. .............. ...................... ..............
CSS
.cc_menu { width:979px; height:591px; position: absolute; overflow:hidden } .cc_item{ text-align:center; width:195px; height:591px; float:left; background:#171717; position:relative; margin-right:1px; } span.cc_title{ color:#fff; line-height:46px; font-size:30px; top:224px; left:14px; position:absolute; background:#272727; width:167px; display:block; z-index:11; } .cc_item div{ cursor:pointer } .cc_submenu{ display:block; width:163px; margin:0; padding:0; height:0px; overflow:hidden; text-align:left; position:absolute; left:0px; bottom:-32px; background:url(../images/bg_opacity.png) repeat;z-index:13; } .cc_submenu{ color:#fff; font-size:30px; cursor:pointer; padding:16px; line-height:44px; text-transform:uppercase } .cc_submenu span{ display:block; font-size:20px; color:#c5c5c5; line-height:26px; padding-top:8px; } .cc_item img{ position:absolute; width:195px; height:591px; top:-591px; left:0px; } .cc_content{ width:783px; height:591px; position:absolute; left:-800px; background:#171717; overflow:hidden; } .cc_content section{ width:100%; text-transform:none; font-size:12px; line-height:18px; display:none } span.cc_back, .cc_back_page{ position:absolute; top:11px; right:-140px; cursor:pointer; font:14px Arial, Helvetica, sans-serif; color:#171717; line-height:35px; text-transform:uppercase; padding:0 18px; background:#feb400; } .privacy, .read_more{ width:887px; position:absolute; right:-980px; top:0; background:#171717; z-index:20; padding:0 46px; } .read_more{ z-index:19 }