en
Visit Templateog体育首页
Submit a Ticket

Categories

en
Visit Templateog体育首页 Account
Submit a Ticket

Categories

og体育首页ONE Subscrioption

og体育首页ONE

“Collapsing Site Navigation”

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

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

?
1
2
<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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div style="z-index:5;">
   <div>
      <img scr="images/img1.jpg" alt="">
      <span class="cc_title">Main page</span>
      <span class="cc_submenu">Main page <span>welcome to  our site</span></span>
   </div>
</div>
<div style="z-index:4;">
   <div>
      <img scr="images/img2.jpg" alt="">
      <span class="cc_title">about us</span>
      <span class="cc_submenu">about us<span>who we are</span></span>
  </div>
</div>
<div style="z-index:3;">
   <div>
      <img scr="images/img3.jpg" alt="">
      <span class="cc_title">services</span>
      <span class="cc_submenu">services <span>& solutions</span></span>
   </div>
</div>
<div style="z-index:2;">
   <div>
      <img scr="images/img4.jpg" alt="">
      <span class="cc_title">partners</span>
      <span class="cc_submenu">partners <span>parnters list</span></span>
   </div>
</div>
<div style="z-index:1;">
   <div>
      <img scr="images/img5.jpg" alt="">
      <span class="cc_title">locations</span>
      <span class="cc_submenu">locations <span>our contacts</span></span>
   </div>
</div>
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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="cc_content" id="cc_content">
        <section class="cc_content_1">
            ..............
        </section>
        <section class="cc_content_2">
            ..............<!-- some content here -->
        </section>
        <section class="cc_content_3">
            ..............<!-- some content here -->
        </section>
        ........
        <section class="privacy">
            ..............<!-- some content here -->
        </section>
        <section class="read_more">
            ..............<!-- some content here -->
        </section>
</div>
<span class="cc_back" id="cc_back">back to menu</span>
<span class="cc_back_page" id="cc_back">back to page</span>
<a href="#" id="privacy">Privacy policy</a>

 

CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.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
}
1500 Premium MotoCMS Templates
This entry was posted in Menu, Working with jQuery scripts and tagged collapsing, dropdown, jQuery, menu, navigation. Bookmark the permalink.

Related posts

HTML/CSS. How to create vertical and horizontal menu
March 13, 2020

This tutorial will show you how to create a vertical and horizontal menus in HTML using CSS styles. Before you proceed please make sure you are familiar with unordered list HTML tags.

HTML. How to create a menu
March 13, 2020

This tutorial shows how to create a menu in HTML. Usually to create a menu we use an onordered list. You can for sure use the div, span, p or other tags but unordered list gives you more flexibility in future stling of the menu.

WordPress. How to a add menu separator (non-clickable menu item)
February 7, 2020

This tutorial is going to show you how to add a add menu separator (non-clickable parent menu item) to your Wordpress template.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket