richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds more menu examples, fixes some issues with pointing menus, fixes 

some issues with dividers, adds attached menus
pull/13/head
Jack Lukic 11 years ago
parent
d526f2e576
commit
46371ed4a3
3 changed files with 368 additions and 80 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 208
      docs/menu.html
  2. 224
      src/ui/flat/menu.css
  3. 16
      src/ui/flat/segment.css

208
docs/menu.html
View File

@ -160,7 +160,6 @@
<li class="active">Collection</li>
<li>Elements</li>
<li>Variations</li>
<li>Group</li>
</div>
</div>
@ -168,7 +167,7 @@
<div class="example">
<h4>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>
<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
@ -179,15 +178,20 @@
<div class="item">
<a>Section 1</a>
</div>
<div class="icon item">
<div class="item">
<a><i class="icon heart"></i></a>
</div>
<div class="right 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 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>
@ -245,16 +249,80 @@
</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 horizontal menu can point to content below itself to show ownership</p>
<p>A menu can point to content below itself to show ownership</p>
<div class="ui pointing menu">
<div class="item">
Site Title
@ -274,9 +342,10 @@
</div>
</div>
</div>
<div class="example">
<h4>Pointing (Horizontal)</h4>
<p>A menu can point to content adjacent to itself to show ownership</p>
<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
@ -302,12 +371,117 @@
</div>
</div>
</div>
<h2>Groups</h2>
<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>Menu Groups</h4>
<p>Menu can exist side by side to show relation</p>
<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>

224
src/ui/flat/menu.css
View File

@ -15,10 +15,17 @@
Standard
*******************************/
/*--------------
Menu
---------------*/
.ui.menu {
background-color: #FFFFFF;
font-size: 0px;
border: 1px solid rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@ -61,13 +68,17 @@
;
}
/*--------------
Colors
---------------*/
/* Text Color */
.ui.menu .item,
.ui.menu .item > a {
color: rgba(0, 0, 0, 0.8);
}
.ui.menu .item > a:hover {
background-color: rgba(0, 0, 0, 0.02);
background-color: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.95);
}
.ui.menu .item .item,
@ -75,11 +86,14 @@
color: rgba(0, 0, 0, 0.6);
}
.ui.menu .item .item > a:hover {
background-color: transparent;
color: rgba(0, 0, 0, 0.8);
background-color: rgba(0, 0, 0, 0.02);
color: rgba(0, 0, 0, 0.9);
}
/* Items */
/*--------------
Items
---------------*/
.ui.menu .item {
position: relative;
display: inline-block;
@ -107,7 +121,11 @@
float: right;
}
/* borders */
/*--------------
Borders
---------------*/
.ui.menu .item:before {
position: absolute;
content: '';
@ -141,14 +159,26 @@
rgba(0, 0, 0, 0.05) 100%)
;
}
.ui.menu .menu.right:before,
.ui.menu .menu.right .item:before,
.ui.menu .item.right:before {
right: auto;
left: 0px;
}
/* Dropdown Menu */
/*--------------
Icons
---------------*/
.ui.menu .item > i:only-child,
.ui.menu .item > a > i:only-child {
margin: 0em;
}
/*--------------
Dropdowns
---------------*/
.ui.menu .dropdown.item {
box-shadow: none !important;
z-index: 10;
@ -174,27 +204,6 @@
transition: opacity 0.2s ease-out;
z-index: 11;
}
.ui.menu .dropdown.item:last-child .menu {
left: auto;
right: 0px;
}
/* Hover */
.ui.menu .dropdown.item:hover .menu {
display: block;
overflow: visible;
min-width: 150px;
width: 100%;
height: auto;
opacity: 1;
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.ui.menu .dropdown.item .menu .item {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
@ -212,6 +221,11 @@
.ui.menu .dropdown.item .menu .item:first-child {
border-top: none;
}
.ui.menu .dropdown.item:last-child .menu {
left: auto;
right: 0px;
}
@ -233,8 +247,25 @@
background-color: rgba(0, 0, 0, 0.05);
}
/* Dropdown Display */
.ui.menu .dropdown.item:hover .menu {
display: block;
overflow: visible;
min-width: 150px;
width: 100%;
height: auto;
opacity: 1;
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
/*--------------
Down
Down
---------------*/
.ui.menu .item.down,
@ -258,13 +289,16 @@
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
-webkit-box-shadow:
0px 0px 1px rgba(0, 0, 0, 0.1) inset
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
;
-moz-box-shadow:
0px 0px 1px rgba(0, 0, 0, 0.1) inset
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
;
box-shadow:
0px 0px 1px rgba(0, 0, 0, 0.1) inset
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
;
}
@ -280,10 +314,13 @@
background-color: transparent;
}
/*******************************
Variations
*******************************/
/*--------------
Colors
---------------*/
@ -291,14 +328,12 @@
.ui.black.menu {
background-color: #333333;
}
/* Text Color */
.ui.black.menu .item,
.ui.black.menu .item > a {
color: rgba(255, 255, 255, 0.95);
}
.ui.black.menu .item > a:hover {
background-color: rgba(255, 255, 255, 0.02);
background-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.95);
}
.ui.black.menu .item .item,
@ -306,11 +341,11 @@
color: rgba(255, 255, 255, 0.6);
}
.ui.black.menu .item .item > a:hover {
background-color: transparent;
color: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.9);
}
/* Border */
/*--- Border ---*/
.ui.black.menu .item:before {
background-image: -webkit-linear-gradient(top center,
rgba(255, 255, 255, 0.03) 0%,
@ -365,7 +400,9 @@
rgba(255, 255, 255, 0.03) 100%)
;
}
/* hover */
/*--- Hover ---*/
.ui.black.menu .item.hover,
.ui.black.menu .link.item:hover,
.ui.menu .dropdown.item:hover,
@ -374,7 +411,8 @@
background-color: rgba(255, 255, 255, .15);
}
/* down */
/*--- Down ---*/
.ui.black.menu .item.down,
.ui.menu .dropdown.item:active,
.ui.black.menu .link.item:active,
@ -385,7 +423,9 @@
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}
/* active */
/*--- Active ---*/
.ui.black.menu .item.active {
background-color: rgba(255, 255, 255, 0.05);
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
@ -405,12 +445,13 @@
/*--------------
Transparent
---------------*/
.ui.transparent.menu {
opacity: 0.95;
}
/*--------------
Vertical
Vertical
---------------*/
.ui.vertical.menu {
@ -421,7 +462,9 @@
border-left: none;
border-right: none;
}
/* border */
/*--- Border ---*/
.ui.vertical.menu .item:before {
position: absolute;
content: '';
@ -460,7 +503,8 @@
background-image: none;
}
/* Dropdown menu */
/*--- Dropdown ---*/
.ui.vertical.menu .dropdown.item > i {
float: right;
}
@ -477,7 +521,8 @@
}
/* Sub Menu */
/*--- Sub Menu ---*/
.ui.vertical.menu .item > .menu {
margin: 0.5em -1em -0.75em;
}
@ -494,18 +539,34 @@
padding: 0.5em 1.5em;
}
/*--------------
Icons
Fitted
---------------*/
.ui.menu .icon.menu .item i {
margin: 0px;
.ui.fitted.menu .item,
.ui.fitted.menu .item > a,
.ui.fitted.menu .item .menu .item,
.ui.fitted.menu .item .menu .item > a,
.ui.menu .fitted.item,
.ui.menu .fitted.item > a {
padding-top: 0em;
padding-bottom: 0em;
}
.ui.menu .icon.item i {
margin: 0px;
/*--------------
Tight
---------------*/
.ui.tight.menu .item,
.ui.tight.menu .item > a,
.ui.tight.menu .item .menu .item,
.ui.tight.menu .item .menu .item > a,
.ui.menu .tight.item,
.ui.menu .tight.item > a {
padding: 0em;
}
/*--------------
Fixed
---------------*/
@ -559,17 +620,33 @@
width: 12px;
height: 12px;
-webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset;
box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
background-color: #F0F0F0;
background-color: #F3F3F3;
background-image: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 2;
-webkit-transition:
background 0.1s linear
;
-moz-transition:
background 0.1s linear
;
-o-transition:
background 0.1s linear
;
-ms-transition:
background 0.1s linear
;
transition:
background 0.1s linear
;
}
.ui.vertical.pointing.menu .item.active:after {
@ -579,14 +656,42 @@
bottom: auto;
left: auto;
-webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
margin-top: -7px;
width: 12px;
height: 12px;
}
.ui.pointing.menu .item.active:hover:after {
background-color: #EAEAEA;
}
/*--------------
Attached
---------------*/
.ui.menu.attached {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
/* avoid rgba multiplying */
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
box-shadow: 0px 0px 0px 1px #DDDDDD;
}
.ui.top.attached.menu {
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.ui.menu.bottom.attached {
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
/*--------------
Sizes
@ -595,7 +700,6 @@
.ui.small.menu .item {
font-size: 14px;
}
.ui.menu .item {
font-size: 16px;
}

16
src/ui/flat/segment.css
View File

@ -20,19 +20,29 @@
}
.ui.segment.attached {
margin: -1px 0px;
position: relative;
top: -1px;
bottom: -1px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
/* avoid rgba multiplying */
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
box-shadow: 0px 0px 0px 1px #DDDDDD;
}
.ui.top.attached.segment {
margin-bottom: -1px;
top: 0px;
bottom: -1px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.ui.segment.bottom.attached {
margin-top: -1px;
top: -1px;
bottom: 0px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;

Write Preview
Loading…
Cancel
Save