“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

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:

   

      
      Main page
      Main page welcome to  our site
   


   

      
      about us
      about uswho we are
  


   

      
      services
      services & solutions
   


   

      
      partners
      partners parnters list
   


   

      
      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
}