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.
897 lines
25 KiB
897 lines
25 KiB
---
|
|
layout : 'default'
|
|
css : 'menu'
|
|
|
|
title : 'Menu'
|
|
type : 'UI Collection'
|
|
---
|
|
<script src="/javascript/menu.js"></script>
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui dividing header">Menu</h1>
|
|
<p>A menu is a collection of interface elements usually showing several actions which a user can take</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Collection</a>
|
|
<a class="item">Elements</a>
|
|
<a class="item">States</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Collection</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Menu</h4>
|
|
|
|
<p>This example uses several menu elements to display the versatility of a menu collection.</p>
|
|
<div class="ui menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
<span class="ui label">22</span>
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
<div class="right menu">
|
|
<div class="fitted borderless item">
|
|
<div class="ui input"><input type="text" placeholder="Search..."></div>
|
|
</div>
|
|
<div class="ui simple dropdown item">
|
|
More <i class="icon dropdown"></i>
|
|
<div class="menu">
|
|
<a class="item"><i class="icon edit"></i> Edit Profile</a>
|
|
<a class="item"><i class="icon globe"></i> Choose Language</a>
|
|
<a class="item"><i class="icon settings"></i> Account Settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Vertical Menu</h4>
|
|
<p>A vertical menu can have its own sub menus. This example uses three levels of menu depth.</p>
|
|
<div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div>
|
|
|
|
<div class="ui vertical menu">
|
|
<a class="active item">
|
|
<i class="icon users"></i>
|
|
Feed
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
<div class="item">
|
|
<div class="ui input"><input type="text" placeholder="Search..."></div>
|
|
</div>
|
|
<div class="ui simple right arrow">
|
|
More <i class="icon right triangle"></i>
|
|
<div class="menu">
|
|
<a class="item"><i class="icon edit"></i> Edit Profile</a>
|
|
<a class="item"><i class="icon globe"></i> Choose Language</a>
|
|
<a class="item"><i class="icon settings"></i> Account Settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Tiered Menu</h4>
|
|
<p>A tiered menu can show the sub-sections available as part of an activated section.</p>
|
|
<div class="ui tiered menu">
|
|
<div class="menu">
|
|
<a class="active item">
|
|
<i class="icon users"></i>
|
|
Friends
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon layout grid"></i> Browse
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<div class="right menu">
|
|
<div class="fitted borderless item">
|
|
<div class="ui input"><input type="text" placeholder="Search..."></div>
|
|
</div>
|
|
<div class="ui simple dropdown item">
|
|
More <i class="icon dropdown"></i>
|
|
<div class="menu">
|
|
<a class="item"><i class="icon edit"></i> Edit Profile</a>
|
|
<a class="item"><i class="icon globe"></i> Choose Language</a>
|
|
<a class="item"><i class="icon settings"></i> Account Settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui sub menu">
|
|
<a class="active item">Search</a>
|
|
<a class="item">Add</a>
|
|
<a class="item">Remove</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Tiered Vertical Menu</h4>
|
|
<p>A tiered menu can show the sub-sections available as part of an activated section.</p>
|
|
<div class="ui vertical menu">
|
|
<div class="item">
|
|
<i class="icon home"></i> Home
|
|
<div class="menu">
|
|
<a class="active item">Search</a>
|
|
<a class="item">Add</a>
|
|
<a class="item">Remove</a>
|
|
</div>
|
|
</div>
|
|
<a class="item">
|
|
<i class="icon layout grid"></i> Browse
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<div class="item">
|
|
<div class="ui input"><input type="text" placeholder="Search..."></div>
|
|
</div>
|
|
<div class="ui simple dropdown item">
|
|
More <i class="icon right triangle"></i>
|
|
<div class="menu">
|
|
<a class="item"><i class="icon edit"></i> Edit Profile</a>
|
|
<a class="item"><i class="icon globe"></i> Choose Language</a>
|
|
<a class="item"><i class="icon settings"></i> Account Settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Secondary Menu</h4>
|
|
<p>A secondary menu allows for a section of content on a page to be activated</p>
|
|
<div class="ui secondary menu">
|
|
<a class="active item">
|
|
<i class="icon users"></i>
|
|
Friends
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
<div class="right menu">
|
|
<div class="fitted borderless item">
|
|
<div class="ui input"><input type="text" placeholder="Search..."></div>
|
|
</div>
|
|
<div class="ui simple dropdown item">
|
|
More <i class="icon dropdown"></i>
|
|
<div class="menu">
|
|
<a class="item"><i class="icon edit"></i> Edit Profile</a>
|
|
<a class="item"><i class="icon globe"></i> Choose Language</a>
|
|
<a class="item"><i class="icon settings"></i> Account Settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<p>A vertical secondary menu</p>
|
|
<div class="ui secondary vertical menu">
|
|
<a class="active item">
|
|
<i class="icon users"></i>
|
|
Friends
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
<div class="item">
|
|
<div class="ui input"><input type="text" placeholder="Search..."></div>
|
|
</div>
|
|
<div class="ui simple dropdown item">
|
|
More <i class="icon right triangle"></i>
|
|
<div class="menu">
|
|
<a class="item"><i class="icon edit"></i> Edit Profile</a>
|
|
<a class="item"><i class="icon globe"></i> Choose Language</a>
|
|
<a class="item"><i class="icon settings"></i> Account Settings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Pointing</h4>
|
|
<p>A menu can point to content to show relationship</p>
|
|
<div class="ui pointing menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui secondary pointing menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<p>A pointing menu can also be vertical</p>
|
|
<div class="ui vertical pointing menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui secondary vertical pointing menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Text</h4>
|
|
<p>A menu can display simple text links</p>
|
|
<div class="ui text menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<p>A vertical text menu</p>
|
|
<div class="ui vertical text menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Elements</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Header Item</h4>
|
|
<p>A menu may have a header to help label sections of a menu.</p>
|
|
<div class="ui vertical menu">
|
|
<div class="header item">
|
|
<i class="icon community"></i>
|
|
Communities
|
|
</div>
|
|
<div class="item">
|
|
College
|
|
<div class="menu">
|
|
<a class="item">Baseball</a>
|
|
<a class="item">Basketball</a>
|
|
<a class="item">Golf</a>
|
|
</div>
|
|
</div>
|
|
<a class="item">
|
|
Dance
|
|
</a>
|
|
<a class="item">
|
|
Aerobics
|
|
</a>
|
|
<div class="header item">
|
|
<i class="icon globe"></i>
|
|
Cities
|
|
</div>
|
|
<a class="item">
|
|
New York
|
|
</a>
|
|
<a class="item">
|
|
Montreal
|
|
</a>
|
|
<a class="item">
|
|
Los Angeles
|
|
</a>
|
|
<a class="item">
|
|
San Francisco
|
|
</a>
|
|
<div class="header item">
|
|
<i class="icon calendar"></i>
|
|
Months
|
|
</div>
|
|
<a class="item">
|
|
August
|
|
</a>
|
|
<a class="item">
|
|
June
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Text Item</h4>
|
|
<p>A menu may have a simple text item.</p>
|
|
<div class="ui ignore info message">
|
|
<p><i class="icon heart"></i> Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname <b>text</b></p>
|
|
</div>
|
|
<div class="ui vertical menu">
|
|
<div class="header item">Current Offer <span class="ui teal label">Exclusive</span></div>
|
|
<div class="item">
|
|
<p><a>Join now</a> and save $10 on a pro membership! </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Link Item</h4>
|
|
<p>A menu may contain a link item, or an item formatted as if it is a link.</p>
|
|
|
|
<div class="ui ignore info message">
|
|
<p><i class="icon heart"></i> Items that are anchor tags will automatically be formatted as a link.</p>
|
|
</div>
|
|
<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 class="ui header">Dropdown Item</h4>
|
|
<p>An item may contain a nested menu in a dropdown.</p>
|
|
<div class="ui ignore warning message">
|
|
<p><i class="icon heart"></i>Dropdowns use <a href="/modules/dropdown.html">UI dropdown elements. To have a dropdown open without javascript, use the simple variation</p>
|
|
</div>
|
|
<div class="ui vertical menu">
|
|
<div class="ui simple dropdown item">
|
|
Categories <i class="icon right triangle"></i>
|
|
<div class="menu">
|
|
<a class="item">Electronics</a>
|
|
<a class="item">Automotive</a>
|
|
<a class="item">Home</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Menu</h4>
|
|
<p>A menu may contain another menu group in the same level as menu items.</p>
|
|
<div class="ui menu">
|
|
<a class="item">Browse</a>
|
|
<a class="item">Submit</a>
|
|
<div class="right menu">
|
|
<a class="item">Sign Up</a>
|
|
<a class="item">Help</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Nested Menu</h4>
|
|
<p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p>
|
|
<div class="ui vertical menu">
|
|
<a class="item"><b>Friends</b></a>
|
|
<div class="item">
|
|
<a><b>Your Profile</b></a>
|
|
<div class="menu">
|
|
<a class="item">Inbox</a>
|
|
<a class="item">Activity</a>
|
|
<a class="item">Groups</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Hover</h4>
|
|
<p>A menu item can be hovered</p>
|
|
<div class="ui ignore warning message"><i class="icon heart"></i> Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.</div>
|
|
<div class="ui compact menu">
|
|
<div class="hover item">
|
|
Link
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Down</h4>
|
|
<p>A menu item can be pressed in</p>
|
|
<div class="ui compact menu">
|
|
<div class="down item">
|
|
Link
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Active</h4>
|
|
<p>A menu item can be active</p>
|
|
<div class="ui compact menu">
|
|
<div class="active item">
|
|
Link
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<h3 class="ui header">Menu</h3>
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A menu may have its colors inverted to show greater contrast</p>
|
|
<div class="ui inverted menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Colors</h4>
|
|
<p>Additional colors can be specified.</p>
|
|
<div class="ui green menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui red menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui blue menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui orange menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui purple menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui teal menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<p>These colors can also be inverted</p>
|
|
<div class="ui green inverted menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui red inverted menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui blue inverted menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui orange inverted menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui purple inverted menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
<br>
|
|
<div class="ui teal inverted menu">
|
|
<a class="active item">
|
|
<i class="icon home"></i> Home
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon mail"></i> Messages
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon community"></i> Browse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Icons</h4>
|
|
<p>A menu may have just icons</p>
|
|
<div class="ui icon menu">
|
|
<a class="item">
|
|
<i class="icon mail"></i>
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon lab"></i>
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon star"></i>
|
|
</a>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui vertical icon menu">
|
|
<a class="item">
|
|
<i class="icon mail"></i>
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon lab"></i>
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon star"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Icons</h4>
|
|
<p>A menu may have labeled icons</p>
|
|
<div class="ui labeled icon menu">
|
|
<a class="item">
|
|
<i class="icon mail"></i>
|
|
Mail
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon lab"></i>
|
|
Lab
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon star"></i>
|
|
Favorites
|
|
</a>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui vertical labeled icon menu">
|
|
<a class="item">
|
|
<i class="icon mail"></i>
|
|
Mail
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon lab"></i>
|
|
Lab
|
|
</a>
|
|
<a class="item">
|
|
<i class="icon star"></i>
|
|
Favorites
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Fluid</h4>
|
|
<p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p>
|
|
<div class="ui fluid vertical menu">
|
|
<a class="item">Run</a>
|
|
<a class="item">Walk</a>
|
|
<a class="item">Bike</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Evenly sized items</h4>
|
|
<p>A menu may divide its items evenly</p>
|
|
<div class="ui fluid three item menu">
|
|
<a class="item">Buy</a>
|
|
<a class="item">Sell</a>
|
|
<a class="item">Rent</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<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="item">
|
|
<a>Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a>Grouped Section</a>
|
|
<div class="menu">
|
|
<a class="item">Subsection 1</a>
|
|
<a class="active item">Subsection 1</a>
|
|
<a class="item">Subsection 1</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui simple dropdown item">
|
|
Dropdown <i class="icon right triangle"></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 class="ui header">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>Current section</a>
|
|
</div>
|
|
<div class="right menu">
|
|
<div class="ui simple 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 class="ui header">Horizontal Sizes</h4>
|
|
<p>A horizontal menu can vary in size</p>
|
|
<div class="ui large menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a>Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a>Another section</a>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui small menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a>Current section</a>
|
|
</div>
|
|
<div class="ui simple 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="example">
|
|
<p>A vertical menu can also vary in size</p>
|
|
<div class="ui large vertical menu">
|
|
<div class="item">
|
|
Site Title
|
|
</div>
|
|
<div class="active item">
|
|
<a>Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a>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="ui simple dropdown item">
|
|
Dropdown <i class="icon right triangle"></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>Current section</a>
|
|
</div>
|
|
<div class="item">
|
|
<a>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="ui simple dropdown item">
|
|
Dropdown <i class="icon right triangle"></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>
|
|
|
|
<h3 class="ui header">Items</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Fitted</h4>
|
|
<p>A menu item or menu might be fitted to remove element padding</p>
|
|
<div class="ui menu">
|
|
<div class="fitted item">
|
|
No vertical padding
|
|
</div>
|
|
<div class="tight item">
|
|
No padding at all
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Borderless</h4>
|
|
<p>A menu item or menu might might have no dividers</p>
|
|
<div class="ui borderless menu">
|
|
<div class="item">
|
|
<i class="icon left arrow"></i> Previous
|
|
</div>
|
|
<div class="item">1</div>
|
|
<div class="item">2</div>
|
|
<div class="item">3</div>
|
|
<div class="item">4</div>
|
|
<div class="item">5</div>
|
|
<div class="item">6</div>
|
|
<div class="item">
|
|
Next <i class="icon right arrow"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|