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

Button Menu

Popup & dropdown web menus.

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- DC Button Menu CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/menus/button/css/dc_button_menu.css" />
<link type="text/css" rel="stylesheet" href="dcodes/menus/button/css/ui.core.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 Button Menu JS -->
<script type="text/javascript" src="dcodes/menus/button/js/fg.menu.js"></script>
<script type="text/javascript" src="dcodes/menus/button/js/button_menu.js"></script>
<script type="text/javascript" src="dcodes/menus/button/js/themeswitchertool.js"></script>
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<![endif]-->

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- DC Button Menu CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/menus/button/css/dc_button_menu.css" />
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/menus/button/css/ui.core.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 Button Menu JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/menus/button/js/fg.menu.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/menus/button/js/button_menu.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/menus/button/js/themeswitchertool.js"></script>
<!--[if IE 6]>
<style type="text/css">
.fg-menu-ipod .fg-menu li { width: 95%; }
.fg-menu-ipod .ui-widget-content { border:0; }
</style>
<![endif]-->
flat menu

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!-- DC Button Menu Start -->
<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a>
<div id="search-engines" class="hidden">
  <ul>
    <li><a href="#">Google</a></li>
    <li><a href="#">Yahoo</a></li>
    <li><a href="#">MSN</a></li>
    <li><a href="#">Ask</a></li>
    <li><a href="#">AOL</a></li>
  </ul>
</div>
<!-- DC Button Menu End -->
ipod-style menu

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!-- DC Button Menu Start -->
<a tabindex="0" href="#news-items" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchy"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu</a>
<div id="news-items" class="hidden">
  <ul>
    <li><a href="#">Breaking News</a>
      <ul>
        <li><a href="#">Entertainment</a></li>
        <li><a href="">Politics</a></li>
        <li><a href="#">A&E</a></li>
        <li><a href="#">Sports</a>
          <ul>
            <li><a href="#">Baseball</a></li>
            <li><a href="#">Basketball</a></li>
            <li><a href="#">A really long label would wrap nicely as you can see</a></li>
            <li><a href="#">Swimming</a>
              <ul>
                <li><a href="#">High School</a></li>
                <li><a href="#">College</a></li>
                <li><a href="#">Professional</a>
                  <ul>
                    <li><a href="#">Mens Swimming</a>
                      <ul>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Awards</a></li>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Team Members</a></li>
                        <li><a href="#">Fan Site</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Womens Swimming</a>
                      <ul>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Awards</a></li>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Team Members</a></li>
                        <li><a href="#">Fan Site</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#">Adult Recreational</a></li>
                <li><a href="#">Youth Recreational</a></li>
                <li><a href="#">Senior Recreational</a></li>
              </ul>
            </li>
            <li><a href="#">Tennis</a></li>
            <li><a href="#">Ice Skating</a></li>
            <li><a href="#">Javascript Programming</a></li>
            <li><a href="#">Running</a></li>
            <li><a href="#">Walking</a></li>
          </ul>
        </li>
        <li><a href="#">Local</a></li>
        <li><a href="#">Health</a></li>
      </ul>
    </li>
    <li><a href="#">Entertainment</a>
      <ul>
        <li><a href="#">Celebrity news</a></li>
        <li><a href="#">Gossip</a></li>
        <li><a href="#">Movies</a></li>
        <li><a href="#">Music</a>
          <ul>
            <li><a href="#">Alternative</a></li>
            <li><a href="#">Country</a></li>
            <li><a href="#">Dance</a></li>
            <li><a href="#">Electronica</a></li>
            <li><a href="#">Metal</a></li>
            <li><a href="#">Pop</a></li>
            <li><a href="#">Rock</a>
              <ul>
                <li><a href="#">Bands</a>
                  <ul>
                    <li><a href="#">Dokken</a></li>
                  </ul>
                </li>
                <li><a href="#">Fan Clubs</a></li>
                <li><a href="#">Songs</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Slide shows</a></li>
        <li><a href="#">Red carpet</a></li>
      </ul>
    </li>
    <li><a href="#">Finance</a>
      <ul>
        <li><a href="#">Personal</a>
          <ul>
            <li><a href="#">Loans</a></li>
            <li><a href="#">Savings</a></li>
            <li><a href="#">Mortgage</a></li>
            <li><a href="#">Debt</a></li>
          </ul>
        </li>
        <li><a href="#">Business</a></li>
      </ul>
    </li>
    <li><a href="#">Food & Cooking</a>
      <ul>
        <li><a href="#">Breakfast</a></li>
        <li><a href="#">Lunch</a></li>
        <li><a href="#">Dinner</a></li>
        <li><a href="#">Dessert</a>
          <ul>
            <li><a href="#">Dump Cake</a></li>
            <li><a href="#">Doritos</a></li>
            <li><a href="#">Both please.</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Lifestyle</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Politics</a></li>
    <li><a href="#">Sports</a>
      <ul>
        <li><a href="#">Baseball</a></li>
        <li><a href="#">Basketball</a></li>
        <li><a href="#">Swimming</a>
          <ul>
            <li><a href="#">High School</a></li>
            <li><a href="#">College</a></li>
            <li><a href="#">Professional</a>
              <ul>
                <li><a href="#">Mens Swimming</a>
                  <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Awards</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">Team Members</a></li>
                    <li><a href="#">Fan Site</a></li>
                  </ul>
                </li>
                <li><a href="#">Womens Swimming</a>
                  <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Awards</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">Team Members</a></li>
                    <li><a href="#">Fan Site</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Adult Recreational</a></li>
            <li><a href="#">Youth Recreational</a></li>
            <li><a href="#">Senior Recreational</a></li>
          </ul>
        </li>
        <li><a href="#">Tennis</a></li>
        <li><a href="#">Ice Skating</a></li>
        <li><a href="#">Javascript Programming</a></li>
        <li><a href="#">Running</a></li>
        <li><a href="#">Walking</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- DC Button Menu End -->
ipod-style menu w/ breadcrumb

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!-- DC Button Menu Start -->
<a tabindex="0" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu w/ breadcrumb</a>
<div id="news-items-2" class="hidden">
  <ul>
    <li><a href="#">Breaking News</a>
      <ul>
        <li><a href="#">Entertainment</a></li>
        <li><a href="#">Politics</a></li>
        <li><a href="#">A&E</a></li>
        <li><a href="#">Sports</a>
          <ul>
            <li><a href="#">Baseball</a></li>
            <li><a href="#">Basketball</a></li>
            <li><a href="#">A really long label would wrap nicely as you can see</a></li>
            <li><a href="#">Swimming</a>
              <ul>
                <li><a href="#">High School</a></li>
                <li><a href="#">College</a></li>
                <li><a href="#">Professional</a>
                  <ul>
                    <li><a href="#">Mens Swimming</a>
                      <ul>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Awards</a></li>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Team Members</a></li>
                        <li><a href="#">Fan Site</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Womens Swimming</a>
                      <ul>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Awards</a></li>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Team Members</a></li>
                        <li><a href="#">Fan Site</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#">Adult Recreational</a></li>
                <li><a href="#">Youth Recreational</a></li>
                <li><a href="#">Senior Recreational</a></li>
              </ul>
            </li>
            <li><a href="#">Tennis</a></li>
            <li><a href="#">Ice Skating</a></li>
            <li><a href="#">Javascript Programming</a></li>
            <li><a href="#">Running</a></li>
            <li><a href="#">Walking</a></li>
          </ul>
        </li>
        <li><a href="#">Local</a></li>
        <li><a href="#">Health</a></li>
      </ul>
    </li>
    <li><a href="#">Entertainment</a>
      <ul>
        <li><a href="#">Celebrity news</a></li>
        <li><a href="#">Gossip</a></li>
        <li><a href="#">Movies</a></li>
        <li><a href="#">Music</a>
          <ul>
            <li><a href="#">Alternative</a></li>
            <li><a href="#">Country</a></li>
            <li><a href="#">Dance</a></li>
            <li><a href="#">Electronica</a></li>
            <li><a href="#">Metal</a></li>
            <li><a href="#">Pop</a></li>
            <li><a href="#">Rock</a>
              <ul>
                <li><a href="#">Bands</a>
                  <ul>
                    <li><a href="#">Dokken</a></li>
                  </ul>
                </li>
                <li><a href="#">Fan Clubs</a></li>
                <li><a href="#">Songs</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Slide shows</a></li>
        <li><a href="#">Red carpet</a></li>
      </ul>
    </li>
    <li><a href="#">Finance</a>
      <ul>
        <li><a href="#">Personal</a>
          <ul>
            <li><a href="#">Loans</a></li>
            <li><a href="#">Savings</a></li>
            <li><a href="#">Mortgage</a></li>
            <li><a href="#">Debt</a></li>
          </ul>
        </li>
        <li><a href="#">Business</a></li>
      </ul>
    </li>
    <li><a href="#">Food & Cooking</a>
      <ul>
        <li><a href="#">Breakfast</a></li>
        <li><a href="#">Lunch</a></li>
        <li><a href="#">Dinner</a></li>
        <li><a href="#">Dessert</a>
          <ul>
            <li><a href="#">Dump Cake</a></li>
            <li><a href="#">Doritos</a></li>
            <li><a href="#">Both please.</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Lifestyle</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Politics</a></li>
    <li><a href="#">Sports</a>
      <ul>
        <li><a href="#">Baseball</a></li>
        <li><a href="#">Basketball</a></li>
        <li><a href="#">Swimming</a>
          <ul>
            <li><a href="#">High School</a></li>
            <li><a href="#">College</a></li>
            <li><a href="#">Professional</a>
              <ul>
                <li><a href="#">Mens Swimming</a>
                  <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Awards</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">Team Members</a></li>
                    <li><a href="#">Fan Site</a></li>
                  </ul>
                </li>
                <li><a href="#">Womens Swimming</a>
                  <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Awards</a></li>
                    <li><a href="#">Schedule</a></li>
                    <li><a href="#">Team Members</a></li>
                    <li><a href="#">Fan Site</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Adult Recreational</a></li>
            <li><a href="#">Youth Recreational</a></li>
            <li><a href="#">Senior Recreational</a></li>
          </ul>
        </li>
        <li><a href="#">Tennis</a></li>
        <li><a href="#">Ice Skating</a></li>
        <li><a href="#">Javascript Programming</a></li>
        <li><a href="#">Running</a></li>
        <li><a href="#">Walking</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- DC Button Menu End -->
   


© TemplateAccess

Switch Theme