Skip to content

Commit 6531e9d

Browse files
author
Ben Kamens
committed
Start of a working example using a bootstrap template
1 parent 35181d5 commit 6531e9d

10 files changed

+9783
-0
lines changed

‎example/css/bootstrap-responsive.css

Lines changed: 1109 additions & 0 deletions
Large diffs are not rendered by default.

‎example/css/bootstrap-responsive.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/css/bootstrap.css

Lines changed: 6158 additions & 0 deletions
Large diffs are not rendered by default.

‎example/css/bootstrap.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/example.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!--
5+
jQuery-menu-aim: this example uses Twitter's Bootstrap
6+
(http://twitter.github.com/bootstrap) to setup a clean example page.
7+
8+
Search for "jQuery-menu-aim" in this page to find the jQuery-menu-aim
9+
integration examples.
10+
-->
11+
12+
<meta charset="utf-8">
13+
<title>jQuery-menu-aim example</title>
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
<meta name="description" content="">
16+
<meta name="author" content="">
17+
18+
<link href="css/bootstrap.css" rel="stylesheet">
19+
<style>
20+
body {
21+
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
22+
}
23+
</style>
24+
<link href="css/bootstrap-responsive.css" rel="stylesheet">
25+
26+
<!--
27+
jQuery-menu-aim: the following styles are used to customize bootstrap's
28+
dropdowns and popover to play a little nicer w/ this example. They are
29+
personal choices and not necessary for your use of jQuery-menu-aim.
30+
jQuery-menu-aim is HTML/style-agnostic, it simply fires events when menu
31+
items should be activated.
32+
You can choose to do whatever you want w/ those events.
33+
-->
34+
<style>
35+
.popover {
36+
width: 400px;
37+
-webkit-border-top-left-radius: 0px;
38+
-webkit-border-bottom-left-radius: 0px;
39+
border-top-left-radius: 0px;
40+
border-bottom-left-radius: 0px;
41+
}
42+
43+
.dropdown-menu > li > a:hover {
44+
background-image: none;
45+
color: white;
46+
background-color: rgb(0, 129, 194);
47+
background-color: rgba(0, 129, 194, 0.5);
48+
}
49+
50+
.dropdown-menu > li > a.maintainHover {
51+
color: white;
52+
background-color: #0081C2;
53+
}
54+
</style>
55+
56+
<!--[if lt IE 9]>
57+
<script src="js/html5shiv.js"></script>
58+
<![endif]-->
59+
</head>
60+
61+
<body>
62+
63+
<div class="navbar navbar-inverse navbar-fixed-top">
64+
<div class="navbar-inner">
65+
<div class="container">
66+
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
67+
<span class="icon-bar"></span>
68+
<span class="icon-bar"></span>
69+
<span class="icon-bar"></span>
70+
</button>
71+
<a class="brand" href="#">A dropdown example</a>
72+
<div class="nav-collapse collapse">
73+
<ul class="nav">
74+
<li class="active">
75+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Explore the Monkeys</a>
76+
77+
<!--
78+
jQuery-menu-aim: this <ul> defines the dropdown main menu and its contents.
79+
This is just one of many possible examples for defining the menu's HTML.
80+
jQuery-menu-aim is agnostic to your HTML structure, it only fires events to
81+
be used as you please.
82+
-->
83+
<ul class="dropdown-menu" role="menu">
84+
<li data-submenu-id="submenu-patas"><a href="#">Patas</a></li>
85+
<li data-submenu-id="submenu-snub-nosed"><a href="#">Golden Snub-Nosed</a></li>
86+
<li data-submenu-id="submenu-duoc-langur"><a href="#">Duoc Langur</a></li>
87+
<li data-submenu-id="submenu-pygmy"><a href="#">Baby Pygmy Marmoset</a></li>
88+
<li data-submenu-id="submenu-tamarin"><a href="#">Black Lion Tamarin</a></li>
89+
<li data-submenu-id="submenu-monk"><a href="#">Monk Saki</a></li>
90+
<li data-submenu-id="submenu-gabon"><a href="#">Gabon Talapoin</a></li>
91+
<li data-submenu-id="submenu-grivet"><a href="#">Grivet</a></li>
92+
<li data-submenu-id="submenu-red-leaf"><a href="#">Red Leaf</a></li>
93+
<li data-submenu-id="submenu-king-colobus"><a href="#">King Colobus</a></li>
94+
</ul>
95+
96+
</li>
97+
</ul>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
103+
<div class="container">
104+
105+
<h1>jQuery-menu-aim example</h1>
106+
<p>Click "Explore the Monkeys" above to start playing around w/ the dropdown. View source and search for "jQuery-menu-aim" to find all the integration points for this example.</p>
107+
108+
</div>
109+
110+
<!--
111+
jQuery-menu-aim: the following defines each submenu's content. There are a million
112+
and one ways to do this, places to structure the HTML, etc. This is just one example.
113+
jQuery-menu-aim is agnostic to your HTML structure, it only fires events to be used
114+
as you please.
115+
-->
116+
<div id="submenu-patas" class="popover">
117+
<h3 class="popover-title">Patas</h3>
118+
<div class="popover-content"></div>
119+
</div>
120+
<div id="submenu-snub-nosed" class="popover">
121+
<h3 class="popover-title">Golden Snub-Nosed</h3>
122+
<div class="popover-content"></div>
123+
</div>
124+
<div id="submenu-duoc-langur" class="popover">
125+
<h3 class="popover-title">Duoc Langur</h3>
126+
<div class="popover-content"></div>
127+
</div>
128+
<div id="submenu-pygmy" class="popover">
129+
<h3 class="popover-title">Baby Pygmy Marmoset</h3>
130+
<div class="popover-content"></div>
131+
</div>
132+
<div id="submenu-tamarin" class="popover">
133+
<h3 class="popover-title">Black Lion Tamarin</h3>
134+
<div class="popover-content"></div>
135+
</div>
136+
<div id="submenu-monk" class="popover">
137+
<h3 class="popover-title">Monk Saki</h3>
138+
<div class="popover-content"></div>
139+
</div>
140+
<div id="submenu-gabon" class="popover">
141+
<h3 class="popover-title">Gabon</h3>
142+
<div class="popover-content"></div>
143+
</div>
144+
<div id="submenu-grivet" class="popover">
145+
<h3 class="popover-title">Grivet</h3>
146+
<div class="popover-content"></div>
147+
</div>
148+
<div id="submenu-red-leaf" class="popover">
149+
<h3 class="popover-title">Red Leaf</h3>
150+
<div class="popover-content"></div>
151+
</div>
152+
<div id="submenu-king-colobus" class="popover">
153+
<h3 class="popover-title">King Colobus</h3>
154+
<div class="popover-content"></div>
155+
</div>
156+
157+
<script src="js/jquery-1.9.1.min.js"></script>
158+
<script src="../jquery.menu-aim.js"></script>
159+
<script src="js/bootstrap.min.js"></script>
160+
<script>
161+
162+
var $menu = $(".dropdown-menu");
163+
164+
// jQuery-menu-aim: <meaningful part of the example>
165+
// Hook up events to be fired on menu row activation.
166+
$menu.menuAim({
167+
activate: activateSubmenu,
168+
deactivate: deactivateSubmenu
169+
});
170+
// jQuery-menu-aim: </meaningful part of the example>
171+
172+
// jQuery-menu-aim: the following JS is used to show and hide the submenu
173+
// contents. Again, this can be done in any number of ways. jQuery-menu-aim
174+
// doesn't care how you do this, it just fires the activate and deactivate
175+
// events at the right times so you know when to show and hide your submenus.
176+
function activateSubmenu(row) {
177+
var $row = $(row),
178+
submenuId = $row.data("submenuId"),
179+
$submenu = $("#" + submenuId),
180+
offset = $menu.offset(),
181+
height = $menu.outerHeight(),
182+
width = $menu.outerWidth();
183+
184+
// Show the submenu
185+
$submenu.css({
186+
display: "block",
187+
top: offset.top,
188+
left: offset.left + width - 5, // main should overlay submenu
189+
height: height - 4 // padding for main dropdown's arrow
190+
});
191+
192+
// Keep the currently activated row's highlighted look
193+
$row.find("a").addClass("maintainHover");
194+
}
195+
196+
function deactivateSubmenu(row) {
197+
var $row = $(row),
198+
submenuId = $row.data("submenuId"),
199+
$submenu = $("#" + submenuId);
200+
201+
// Hide the submenu and remove the row's highlighted look
202+
$submenu.css("display", "none");
203+
$row.find("a").removeClass("maintainHover");
204+
}
205+
206+
</script>
207+
208+
</body>
209+
</html>
210+

‎example/img/glyphicons-halflings-white.png

8.57 KB
Loading

‎example/img/glyphicons-halflings.png

12.5 KB
Loading

0 commit comments

Comments
 (0)