Si este tutorial no es lo que necesita y Usted todavía tiene preguntas o sugerencias – póngase en contacto con nosotros. ¡Por favor, ayúdenos a servirle!

Su Nombre

Su Email

Su Mensaje (obligatorio)

captcha

“Collapsing Site Navigation”

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:
<img scr="images/img1.jpg" alt="" /> Main page Main page welcome to  our site
<img scr="images/img2.jpg" alt="" /> about us about uswho we are
<img scr="images/img3.jpg" alt="" /> services services & solutions
<img scr="images/img4.jpg" alt="" /> partners partners parnters list
<img scr="images/img5.jpg" alt="" /> locations locations our contacts
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:
..............
..............
..............
........
..............
..............
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
}
 
Chat en Vivo
We help you to choose the right product.
Comenzar Chat