You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
490 lines
17 KiB
490 lines
17 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>UI Menu - Semantic</title>
|
|
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
|
|
|
|
<link rel="stylesheet" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
|
|
|
|
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
|
|
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
|
|
|
|
<script src="library/jquery.js" type="text/javascript"></script>
|
|
<script src="library/ace/ace.js" type="text/javascript"></script>
|
|
<script src="library/sidr.js" type="text/javascript"></script>
|
|
<script src="library/waypoints.js" type="text/javascript"></script>
|
|
<script src="javascript/semantic.js" type="text/javascript"></script>
|
|
|
|
<script src="../src/modules/ui/shape.js" type="text/javascript"></script>
|
|
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>
|
|
|
|
</head>
|
|
|
|
<body id="example">
|
|
|
|
<div class="ui large vertical menu" id="menu">
|
|
<div class="menu">
|
|
<div class="item"><a href="module.html"><b>Introduction</b></a></div>
|
|
<div class="item"><a href="download"><b>Download</b></a></div>
|
|
<div class="item">
|
|
<a href="#"><b>UI Collections</b></a>
|
|
<div class="menu">
|
|
<div class="item"><a href="form.html">Forms</a></div>
|
|
<div class="active item"><a href="menu.html">Menu</a></div>
|
|
<div class="item"><a href="element.html">Grid</a></div>
|
|
<div class="item"><a href="table.html">Table</a></div>
|
|
<div class="item"><a href="item.html">Items</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#"><b>UI Elements</b></a>
|
|
<div class="menu">
|
|
<div class="item"><a href="steps.html">Steps</a></div>
|
|
<div class="item"><a href="button.html">Button</a></div>
|
|
<div class="item"><a href="table.html">Table</a></div>
|
|
<div class="item"><a href="progress.html">Progress</a></div>
|
|
<div class="item"><a href="text.html">Text Block</a></div>
|
|
<div class="item"><a href="header.html">Headers</a></div>
|
|
<div class="item"><a href="header.html">Segment</a></div>
|
|
<div class="item"><a href="column.html">Columns</a></div>
|
|
<div class="item"><a href="element.html">Elements (Grid System)</a></div>
|
|
<div class="item"><a href="tag.html">Tags</a></div>
|
|
<div class="item"><a href="item.html">Items (Lists of Content)</a></div>
|
|
<div class="item"><a href="panel.html">Panels (Type of Menu)</a></div>
|
|
<div class="item"><a href="icon.html">Icons</a></div>
|
|
<div class="item"><a href="divider.html">Dividers</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#"><b>UI Views</b></a>
|
|
<div class="menu">
|
|
<div class="item"><a href="form.html">Forms</a></div>
|
|
<div class="item"><a href="activity.html">Activity Feed</a></div>
|
|
<div class="item"><a href="list.html">Content List</a></div>
|
|
<div class="item"><a href="user-list.html">User List</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#"><b>UI Modules</b></a>
|
|
<div class="menu">
|
|
<div class="item"><a href="accordion.html">Accordion</a></div>
|
|
<div class="item"><a href="chatroom.html">Chat Room</a></div>
|
|
<div class="item"><a href="modal.html">Modal</a></div>
|
|
<div class="item"><a href="nag.html">Nag</a></div>
|
|
<div class="item"><a href="popup.html">Popup</a></div>
|
|
<div class="item"><a href="search.html">Search</a></div>
|
|
<div class="item"><a href="star.html">Star Rating</a></div>
|
|
<div class="item"><a href="tab.html">Tabs</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#"><b>Behavioral Modules</b></a>
|
|
<div class="menu">
|
|
<div class="item"><a href="api.html">API</a></div>
|
|
<div class="item"><a href="animation.html">Animation</a></div>
|
|
<div class="item"><a href="validate.html">Form Validation</a></div>
|
|
<div class="item"><a href="placeholder.html">Placeholder Text</a></div>
|
|
<div class="item"><a href="shape.html">Shape</a></div>
|
|
<div class="item"><a href="state.html">State</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui fixed transparent black menu">
|
|
<div class="container">
|
|
<div class="title item">
|
|
Semantic UI: Menu
|
|
</div>
|
|
<div class="icon previous link item">
|
|
<a href="button.html"><i class="icon left-open"></i></a>
|
|
</div>
|
|
<div class="section dropdown item">
|
|
3 of 14
|
|
<div class="menu">
|
|
<a href="button.html" class="item">1. Button</a>
|
|
<a href="form.html" class="item">2. Form</a>
|
|
<a href="table.html" class="item">3. Table</a>
|
|
<a class="item active">4. Menu</a>
|
|
<a class="item">5. Elements</a>
|
|
<a class="item">6. Tags</a>
|
|
<a class="item">7. Items</a>
|
|
<a class="item">8. Panels</a>
|
|
</div>
|
|
</div>
|
|
<div class="icon next link item">
|
|
<i class="icon right-open"></i>
|
|
</div>
|
|
<div class="right menu">
|
|
<a class="item" href="https://github.com/quirkyinc/semantic">
|
|
<i class="icon cloud"></i>
|
|
</a>
|
|
<a class="item" href="https://github.com/quirkyinc/semantic">
|
|
<i class="icon github"></i>
|
|
</a>
|
|
<div class="dropdown item">
|
|
<i class="icon tint"></i> Theme
|
|
<div class="theme menu">
|
|
<div class="item" data-theme="flat">Flat</div>
|
|
<div class="item" data-theme="shaded">Shaded</div>
|
|
<div class="item" data-theme="classic">Classic</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui huge left attached vertical side buttons">
|
|
<div class="ui blue menu button">Menu</div>
|
|
</div>
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1>Menu</h1>
|
|
<p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, or other item types.</p>
|
|
<p>Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui large vertical pointing bottom attached panel">
|
|
<li class="active">Collection</li>
|
|
<li>Elements</li>
|
|
<li>Variations</li>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Collection</h2>
|
|
<div class="example">
|
|
<h4>Menu</h4>
|
|
|
|
<p>This example uses several menu elements to display the versatility of a menu collection.</p>
|
|
<div class="ui menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a>Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a>Section 1</a>
|
|
</div>
|
|
<div class="item">
|
|
<a><i class="icon heart"></i></a>
|
|
</div>
|
|
<div class="right menu">
|
|
<div class="fitted item">
|
|
<input class="ui input" type="text" placeholder="Search...">
|
|
</div>
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon down-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Vertical Menu</h4>
|
|
<p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p>
|
|
<div class="ui vertical menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#">Grouped Section</a>
|
|
<div class="menu">
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon right-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Elements</h2>
|
|
|
|
<div class="example">
|
|
<h4>Text Item</h4>
|
|
<p>Your menu may have a simple text item</p>
|
|
<div class="ui vertical menu">
|
|
<div class="item">
|
|
Text Item
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4>Link Item</h4>
|
|
<p>Your menu may have either a real page link or an item that behaves as a link.</p>
|
|
<div class="ui vertical menu">
|
|
<a href="http://www.google.com" class="item">
|
|
Visit Google
|
|
</a>
|
|
<div class="link item">
|
|
Javascript Link
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Dropdown Item</h4>
|
|
<p>An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.</p>
|
|
<div class="ui vertical menu">
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon right-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4>Menu</h4>
|
|
<p>A menu may contain another menu group inside. This can be useful for formatting multiple menu items with the same qualities.</p>
|
|
<div class="ui menu">
|
|
<div class="item">Left item 1</div>
|
|
<div class="item">Left item 2</div>
|
|
<div class="right menu">
|
|
<div class="item">Right item 1</div>
|
|
<div class="item">Right item 2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Nested Menu</h4>
|
|
<p>A menu may contain another menu nested inside an item that acts as a grouped sub-menu. This is only available when using a vertical menu.</p>
|
|
<div class="ui vertical menu">
|
|
<div class="item">
|
|
<a href="#">Grouped Section</a>
|
|
<div class="menu">
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2>States</h2>
|
|
|
|
<h2>Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4>Colors</h4>
|
|
<p>A menu may have other colors defined</p>
|
|
<div class="ui black menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="right menu">
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon down-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Pointing (Horizontal)</h4>
|
|
<p>A menu can point to content below itself to show ownership</p>
|
|
<div class="ui pointing menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="right menu">
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon down-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Pointing (Horizontal)</h4>
|
|
<p>A vertical menu can point to content adjacent to itself to show ownership</p>
|
|
<div class="ui pointing vertical menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#">Grouped Section</a>
|
|
<div class="menu">
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon right-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Attached</h4>
|
|
<p>A menu may be attached to other content segments</p>
|
|
<div class="ui top attached pointing menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="right menu">
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon down-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui bottom attached segment">
|
|
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Horizontal Sizes</h4>
|
|
<p>A vertical menu can vary in size</p>
|
|
<div class="ui large menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#">Another section</a>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui small menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon right-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4>Vertical Sizes</h4>
|
|
<p>A vertical menu can vary in size</p>
|
|
<div class="ui large vertical menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#">Grouped Section</a>
|
|
<div class="menu">
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon right-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui small vertical menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a href="#">Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a href="#">Grouped Section</a>
|
|
<div class="menu">
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown item">
|
|
Dropdown <i class="icon right-dir"></i>
|
|
<div class="menu">
|
|
<div class="item">Choice 1</div>
|
|
<div class="item">Choice 2</div>
|
|
<div class="item">Choice 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|