[contact-form-7 id="24078" title="Feedback EN"]

“Collapsing Site Navigation”

A collapsing menu contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.

JavaScript
We should include jQuery framework and collapsing-site-navigation.js by pointing src attribute in the script tag to the .js files

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="collapsing-site-navigation.js"></script>

The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:

 

HTML

Our HTML will consist of a main container with the class and id cc_menu. Here we will place all our vertical menu items and the main content 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

The first item will get a z-index of 5 and then we will decrease the z-index for the next items. This will make the last item be in the lowest layer. We do this in order to create the card deck collapsing effect.

Next goes the content of the pages:

..............
..............
..............
........
..............
..............
back to menu back to page Privacy policy

 

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
}
"Collapsing Site Navigation", 5.0 out of 5 based on 1 rating