Skip to content

Commit 1283417

Browse files
tjvantolljzaefferer
tjvantoll
authored and
jzaefferer
committed
Menu: Document the new wrapper requirement
Fixes gh-234 Closes gh-239
1 parent 4db4b19 commit 1283417

File tree

1 file changed

+64
-27
lines changed

1 file changed

+64
-27
lines changed

‎entries/menu.xml

+64-27
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,36 @@
55
Themeable menu with mouse and keyboard interactions for navigation.
66
</desc>
77
<longdesc>
8-
<p>A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. The most commonly used element is the unordered list (<code>&lt;ul></code>):</p>
8+
<p>A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. The most commonly used element is the unordered list (<code>&lt;ul></code>). Additionally, the contents of each menu item must be wrapped with a block-level DOM element. In the example below <code>&lt;div&gt;</code> elements are used as wrappers:</p>
99

1010
<pre><code><![CDATA[
1111
<ul id="menu">
12-
<li>Item 1</li>
13-
<li>Item 2</li>
14-
<li>Item 3
12+
<li>
13+
<div>Item 1</div>
14+
</li>
15+
<li>
16+
<div>Item 2</div>
17+
</li>
18+
<li>
19+
<div>Item 3</div>
1520
<ul>
16-
<li>Item 3-1</li>
17-
<li>Item 3-2</li>
18-
<li>Item 3-3</li>
19-
<li>Item 3-4</li>
20-
<li>Item 3-5</li>
21+
<li>
22+
<div>Item 3-1</div>
23+
</li>
24+
<li>
25+
<div>Item 3-2</div>
26+
</li>
27+
<li>
28+
<div>Item 3-3</div>
29+
</li>
2130
</ul>
2231
</li>
23-
<li>Item 4</li>
24-
<li>Item 5</li>
32+
<li>
33+
<div>Item 4</div>
34+
</li>
35+
<li>
36+
<div>Item 5</div>
37+
</li>
2538
</ul>
2639
]]></code></pre>
2740

@@ -35,20 +48,26 @@
3548

3649
<pre><code><![CDATA[
3750
<ul id="menu">
38-
<li><span class="ui-icon ui-icon-disk"></span>Save</li>
51+
<li>
52+
<div><span class="ui-icon ui-icon-disk"></span>Save</div>
53+
</li>
3954
</ul>
4055
]]></code></pre>
4156
<p>Menu automatically adds the necessary padding to items without icons.</p>
4257

4358
<h3 id="dividers">Dividers</h3>
4459

45-
<p>Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes:</p>
60+
<p>Divider elements can be created by including menu items that contain only spaces and/or dashes:</p>
4661

4762
<pre><code><![CDATA[
4863
<ul id="menu">
49-
<li>Item 1</li>
64+
<li>
65+
<div>Item 1</div>
66+
</li>
5067
<li>-</li>
51-
<li>Item 2</li>
68+
<li>
69+
<div>Item 2</div>
70+
</li>
5271
</ul>
5372
]]></code></pre>
5473

@@ -76,7 +95,12 @@
7695
<li>
7796
<code>ui-menu-item</code>: The container for individual menu items.
7897
<ul>
79-
<li><code>ui-menu-icon</code>: The submenu icons set via the <a href="#option-icons"><code>icons</code></a> option.</li>
98+
<li>
99+
<code>ui-menu-item-wrapper</code>: The wrapper element inside each individual menu item.
100+
<ul>
101+
<li><code>ui-menu-icon</code>: The submenu icons set via the <a href="#option-icons"><code>icons</code></a> option.</li>
102+
</ul>
103+
</li>
80104
</ul>
81105
</li>
82106
<li><code>ui-menu-divider</code>: Divider elements between menu items.</li>
@@ -167,7 +191,7 @@
167191
</method>
168192
<method name="focus" example-params='null, menu.find( ".ui-menu-item:last" )'>
169193
<desc>
170-
Activates a particular menu item, begins opening any sub-menu if present and triggers the menu's <a href="#event-focus"><code>focus</code></a> event.
194+
Activates the given menu item and triggers the menu's <a href="#event-focus"><code>focus</code></a> event. Opens the menu item's sub-menu, if one exists.
171195
</desc>
172196
<argument name="event" type="Event" optional="true">
173197
<desc>What triggered the menu item to gain focus.</desc>
@@ -318,19 +342,32 @@ $( "#menu" ).menu();
318342
]]></css>
319343
<html><![CDATA[
320344
<ul id="menu">
321-
<li>Item 1</li>
322-
<li>Item 2</li>
323-
<li>Item 3
345+
<li>
346+
<div>Item 1</div>
347+
</li>
348+
<li>
349+
<div>Item 2</div>
350+
</li>
351+
<li>
352+
<div>Item 3</div>
324353
<ul>
325-
<li>Item 3-1</li>
326-
<li>Item 3-2</li>
327-
<li>Item 3-3</li>
328-
<li>Item 3-4</li>
329-
<li>Item 3-5</li>
354+
<li>
355+
<div>Item 3-1</div>
356+
</li>
357+
<li>
358+
<div>Item 3-2</div>
359+
</li>
360+
<li>
361+
<div>Item 3-3</div>
362+
</li>
330363
</ul>
331364
</li>
332-
<li>Item 4</li>
333-
<li>Item 5</li>
365+
<li>
366+
<div>Item 4</div>
367+
</li>
368+
<li>
369+
<div>Item 5</div>
370+
</li>
334371
</ul>
335372
]]></html>
336373
</example>

0 commit comments

Comments
 (0)