“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
}