Categories

“Collapsing Site Navigation”

Template-help.com Team marzo 17, 2011
Rating: 3.0/5. From 2 votes.
Please wait...

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
}
Esta entrada fue publicada el Menú, Trabajar con scripts de jQuery y etiquetada collapsing, dropdown, jQuery, menu, navigation. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket