Skip to content

Commit c98a809

Browse files
author
Ben Kamens
committed
Move example's submenu contents into HTML structure of menu itself so new exitMenu event fires at proper times in example.
1 parent b1db2d3 commit c98a809

File tree

1 file changed

+90
-62
lines changed

1 file changed

+90
-62
lines changed

‎example/example.html

Lines changed: 90 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,17 @@
5050
max-width: 250px;
5151
}
5252

53+
.dropdown-menu {
54+
-webkit-border-top-right-radius: 0px;
55+
-webkit-border-bottom-right-radius: 0px;
56+
border-top-right-radius: 0px;
57+
border-bottom-right-radius: 0px;
58+
59+
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
60+
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
61+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
62+
}
63+
5364
.dropdown-menu > li > a:hover {
5465
background-image: none;
5566
color: white;
@@ -83,26 +94,90 @@
8394
<ul class="nav">
8495
<li class="active">
8596
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Explore the Monkeys</a>
86-
8797
<!--
8898
jQuery-menu-aim: this <ul> defines the dropdown main menu and its contents.
8999
This is just one of many possible examples for defining the menu's HTML.
90100
jQuery-menu-aim is agnostic to your HTML structure, it only fires events to
91101
be used as you please.
92102
-->
93103
<ul class="dropdown-menu" role="menu">
94-
<li data-submenu-id="submenu-patas"><a href="#">Patas</a></li>
95-
<li data-submenu-id="submenu-snub-nosed"><a href="#">Golden Snub-Nosed</a></li>
96-
<li data-submenu-id="submenu-duoc-langur"><a href="#">Duoc Langur</a></li>
97-
<li data-submenu-id="submenu-pygmy"><a href="#">Baby Pygmy Marmoset</a></li>
98-
<li data-submenu-id="submenu-tamarin"><a href="#">Black Lion Tamarin</a></li>
99-
<li data-submenu-id="submenu-monk"><a href="#">Monk Saki</a></li>
100-
<li data-submenu-id="submenu-gabon"><a href="#">Gabon Talapoin</a></li>
101-
<li data-submenu-id="submenu-grivet"><a href="#">Grivet</a></li>
102-
<li data-submenu-id="submenu-red-leaf"><a href="#">Red Leaf</a></li>
103-
<li data-submenu-id="submenu-king-colobus"><a href="#">King Colobus</a></li>
104+
<li data-submenu-id="submenu-patas">
105+
<a href="#">Patas</a>
106+
<!--
107+
jQuery-menu-aim: each class="popover" div defines submenu content. There are a million
108+
and one ways to do this, places to structure the HTML, etc. This is just one example.
109+
jQuery-menu-aim is agnostic to your HTML structure, it only fires events to be used
110+
as you please.
111+
-->
112+
<div id="submenu-patas" class="popover">
113+
<h3 class="popover-title">Patas</h3>
114+
<div class="popover-content"><img src="img/patas.png"></div>
115+
</div>
116+
</li>
117+
<li data-submenu-id="submenu-snub-nosed">
118+
<a href="#">Golden Snub-Nosed</a>
119+
<div id="submenu-snub-nosed" class="popover">
120+
<h3 class="popover-title">Golden Snub-Nosed</h3>
121+
<div class="popover-content"><img src="img/snub-nosed.png"></div>
122+
</div>
123+
</li>
124+
<li data-submenu-id="submenu-duoc-langur">
125+
<a href="#">Duoc Langur</a>
126+
<div id="submenu-duoc-langur" class="popover">
127+
<h3 class="popover-title">Duoc Langur</h3>
128+
<div class="popover-content"><img src="img/duoc-langur.png"></div>
129+
</div>
130+
</li>
131+
<li data-submenu-id="submenu-pygmy">
132+
<a href="#">Baby Pygmy Marmoset</a>
133+
<div id="submenu-pygmy" class="popover">
134+
<h3 class="popover-title">Baby Pygmy Marmoset</h3>
135+
<div class="popover-content"><img src="img/pygmy.png"></div>
136+
</div>
137+
</li>
138+
<li data-submenu-id="submenu-tamarin">
139+
<a href="#">Black Lion Tamarin</a>
140+
<div id="submenu-tamarin" class="popover">
141+
<h3 class="popover-title">Black Lion Tamarin</h3>
142+
<div class="popover-content"><img src="img/tamarin.png"></div>
143+
</div>
144+
</li>
145+
<li data-submenu-id="submenu-monk">
146+
<a href="#">Monk Saki</a>
147+
<div id="submenu-monk" class="popover">
148+
<h3 class="popover-title">Monk Saki</h3>
149+
<div class="popover-content"><img src="img/monk.png"></div>
150+
</div>
151+
</li>
152+
<li data-submenu-id="submenu-gabon">
153+
<a href="#">Gabon Talapoin</a>
154+
<div id="submenu-gabon" class="popover">
155+
<h3 class="popover-title">Gabon</h3>
156+
<div class="popover-content"><img src="img/gabon.png"></div>
157+
</div>
158+
</li>
159+
<li data-submenu-id="submenu-grivet">
160+
<a href="#">Grivet</a>
161+
<div id="submenu-grivet" class="popover">
162+
<h3 class="popover-title">Grivet</h3>
163+
<div class="popover-content"><img src="img/grivet.png"></div>
164+
</div>
165+
</li>
166+
<li data-submenu-id="submenu-red-leaf">
167+
<a href="#">Red Leaf</a>
168+
<div id="submenu-red-leaf" class="popover">
169+
<h3 class="popover-title">Red Leaf</h3>
170+
<div class="popover-content"><img src="img/red-leaf.png"></div>
171+
</div>
172+
</li>
173+
<li data-submenu-id="submenu-king-colobus">
174+
<a href="#">King Colobus</a>
175+
<div id="submenu-king-colobus" class="popover">
176+
<h3 class="popover-title">King Colobus</h3>
177+
<div class="popover-content"><img src="img/colobus.png"></div>
178+
</div>
179+
</li>
104180
</ul>
105-
106181
</li>
107182
</ul>
108183
</div>
@@ -117,53 +192,6 @@ <h1>jQuery-menu-aim example</h1>
117192

118193
</div>
119194

120-
<!--
121-
jQuery-menu-aim: the following defines each submenu's content. There are a million
122-
and one ways to do this, places to structure the HTML, etc. This is just one example.
123-
jQuery-menu-aim is agnostic to your HTML structure, it only fires events to be used
124-
as you please.
125-
-->
126-
<div id="submenu-patas" class="popover">
127-
<h3 class="popover-title">Patas</h3>
128-
<div class="popover-content"><img src="img/patas.png"></div>
129-
</div>
130-
<div id="submenu-snub-nosed" class="popover">
131-
<h3 class="popover-title">Golden Snub-Nosed</h3>
132-
<div class="popover-content"><img src="img/snub-nosed.png"></div>
133-
</div>
134-
<div id="submenu-duoc-langur" class="popover">
135-
<h3 class="popover-title">Duoc Langur</h3>
136-
<div class="popover-content"><img src="img/duoc-langur.png"></div>
137-
</div>
138-
<div id="submenu-pygmy" class="popover">
139-
<h3 class="popover-title">Baby Pygmy Marmoset</h3>
140-
<div class="popover-content"><img src="img/pygmy.png"></div>
141-
</div>
142-
<div id="submenu-tamarin" class="popover">
143-
<h3 class="popover-title">Black Lion Tamarin</h3>
144-
<div class="popover-content"><img src="img/tamarin.png"></div>
145-
</div>
146-
<div id="submenu-monk" class="popover">
147-
<h3 class="popover-title">Monk Saki</h3>
148-
<div class="popover-content"><img src="img/monk.png"></div>
149-
</div>
150-
<div id="submenu-gabon" class="popover">
151-
<h3 class="popover-title">Gabon</h3>
152-
<div class="popover-content"><img src="img/gabon.png"></div>
153-
</div>
154-
<div id="submenu-grivet" class="popover">
155-
<h3 class="popover-title">Grivet</h3>
156-
<div class="popover-content"><img src="img/grivet.png"></div>
157-
</div>
158-
<div id="submenu-red-leaf" class="popover">
159-
<h3 class="popover-title">Red Leaf</h3>
160-
<div class="popover-content"><img src="img/red-leaf.png"></div>
161-
</div>
162-
<div id="submenu-king-colobus" class="popover">
163-
<h3 class="popover-title">King Colobus</h3>
164-
<div class="popover-content"><img src="img/colobus.png"></div>
165-
</div>
166-
167195
<script src="js/jquery-1.9.1.min.js"></script>
168196
<script src="../jquery.menu-aim.js"></script>
169197
<script src="js/bootstrap.min.js"></script>
@@ -187,15 +215,14 @@ <h3 class="popover-title">King Colobus</h3>
187215
var $row = $(row),
188216
submenuId = $row.data("submenuId"),
189217
$submenu = $("#" + submenuId),
190-
offset = $menu.offset(),
191218
height = $menu.outerHeight(),
192219
width = $menu.outerWidth();
193220

194221
// Show the submenu
195222
$submenu.css({
196223
display: "block",
197-
top: offset.top,
198-
left: offset.left + width - 5, // main should overlay submenu
224+
top: -1,
225+
left: width - 3, // main should overlay submenu
199226
height: height - 4 // padding for main dropdown's arrow
200227
});
201228

@@ -217,6 +244,7 @@ <h3 class="popover-title">King Colobus</h3>
217244
// Simply hide the submenu on any click. Again, this is just a hacked
218245
// together menu/submenu structure to show the use of jQuery-menu-aim.
219246
$(".popover").css("display", "none");
247+
$("a.maintainHover").removeClass("maintainHover");
220248
});
221249

222250
</script>

0 commit comments

Comments
 (0)