This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Extended Menu

Stylish fade-in-out navigation system

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
<!-- DC Extended Menu CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/menus/extended/css/dc_extended_menu.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Extended Menu JS -->
<script type="text/javascript" src="dcodes/menus/extended/js/dc_extended_menu.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
<!-- DC Extended Menu CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/menus/extended/css/dc_extended_menu.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Extended Menu JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/menus/extended/js/dc_extended_menu.js"></script>


View code:

?
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- DC Extended Menu Start -->
<div id="dc_em_overlay" class="dc_em_overlay"></div>
<ul id="dc_exp_menu" class="dc_exp_menu">
  <li><a href="">Home</a>
    <div>
      <ul>
        <li class="dc_em_heading">Info</li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Site Map</a></li>
        <li><a href="#">Media Info</a></li>
      </ul>
      <ul>
        <li class="dc_em_heading">Research</li>
        <li><a href="#">Our Labs</a></li>
        <li><a href="#">Our Vision</a></li>
        <li><a href="#">Our Facilities</a></li>
        <li><a href="#">Our Grants</a></li>         
      </ul>
      <ul>
        <li class="dc_em_heading">Terms</li>
        <li><a href="#">Terms of Use</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Copyrights</a></li>
      </ul>
    </div>
  </li>
  <li><a href="">Products</a>
    <div style="left:-111px;">
      <!-- -112px -->
      <ul>
        <li class="dc_em_heading">Appliances</li>
        <li><a href="#">Ovens</a></li>
        <li><a href="#">Cooktops</a></li>
        <li><a href="#">BBQs</a></li>
        <li><a href="#">Cookware</a></li>
        <li><a href="#">Heating & Cooling</a></li>
        <li><a href="#">Fridges</a></li>
      </ul>
      <ul>
        <li class="dc_em_heading">Computers</li>
        <li><a href="#">Desktops</a></li>
        <li><a href="#">Laptops</a></li>
        <li><a href="#">Printers</a></li>
        <li><a href="#">Software</a></li>
        <li><a href="#">Games</a></li>
      </ul>
      <ul>
        <li class="dc_em_heading">TV & Audio</li>
        <li><a href="#">TVs</a></li>
        <li><a href="#">Home Theatre</a></li>
        <li><a href="#">Speakers</a></li>
        <li><a href="#">Head Phones</a></li>
      </ul>
    </div>
  </li>
  <li><a href="">Full Width Menus</a>
    <div style="left:-223px;">
      <ul class="oe_full">
        <li class="dc_em_heading">News</li>
        <li><a href="#">World</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Science</a></li>
        <li><a href="#">Health</a></li>         
      </ul>
    </div>
  </li>   
  <li><a href="">Media</a>
    <div style="left:-335px;">
      <ul>
        <li class="dc_em_heading">Portfolio</li>
        <li><a href="#">One Column</a></li>
        <li><a href="#">Two Column</a></li>
        <li><a href="#">Three Column</a></li>
        <li><a href="#">Four Column</a></li>
        <li><a href="#">Sortable Portfolio</a></li>
      </ul>
      <ul>
        <li class="dc_em_heading">Gallery</li>
        <li><a href="#">Side Gallery</a></li>
        <li><a href="#">Desktop Gallery</a></li>
        <li><a href="#">Dreamfilm Gallery</a></li>
        <li><a href="#">Respo Gallery</a></li>
        <li><a href="#">PhotoMatrix</a></li>
      </ul>
      <ul>
        <li class="dc_em_heading">Multimedia</li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Streams</a></li>
        <li><a href="#">Flash</a></li>
        <li><a href="#">Music</a></li>
      </ul>
    </div>
  </li>
  <li><a href="">Stores</a>
    <div style="left:-447px;">
      <ul>
        <li class="dc_em_heading">Europe</li>
        <li><a href="#">Milan</a></li>
        <li><a href="#">Paris</a></li>
        <li><a href="#">Berlin</a></li>
        <li><a href="#">London</a></li>
      </ul>
      <ul>
        <li class="dc_em_heading">Asia</li>
        <li><a href="#">Hong Kong</a></li>
        <li><a href="#">Tokyo</a></li>
        <li><a href="#">New Delhi</a></li>
        <li><a href="#">Beijing</a></li>
      </ul>
      <ul>
        <li class="dc_em_heading">United States</li>
        <li><a href="#">New York</a></li>
        <li><a href="#">Los Angeles</a></li>
        <li><a href="#">Seattle</a></li>
        <li><a href="#">Miami</a></li>
      </ul>
    </div>
  </li>  
</ul>
<!-- DC Extended Menu End -->


























© TemplateAccess