adding more variations and docs for menu, adding badge type

11 years ago · c82e388ff2
7 changed files with 1585 additions and 168 deletions
--- a/docs/form.html
+++ b/docs/form.html
@ -105,8 +105,8 @@
        <div class="menu">
          <a href="button.html" class="item">1. Button</a>
          <a class="active item">2. Form</a>
-          <a class="item">3. Tables</a>
-          <a href="table.html" class="item">4. Columns</a>
+          <a href="table.html" class="item">3. Tables</a>
+          <a class="item">4. Columns</a>
          <a class="item">5. Elements</a>
          <a class="item">6. Tags</a>
          <a class="item">7. Items</a>
--- a/docs/menu.html
+++ b/docs/menu.html
@ -13,8 +13,8 @@
  <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" class="ui" href="../src/ui/flat/menu.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" />
@ -107,10 +107,10 @@
        Semantic UI: Menu 
      </div>
      <div class="icon previous link item">
-        <a href="button.html"><i class="icon left-open"></i></a>
+        <a href="table.html"><i class="icon left-open"></i></a>
      </div>
      <div class="section dropdown item">
-        3 of 14
+        4 of 14
        <div class="menu">
          <a href="button.html" class="item">1. Button</a>
          <a href="form.html" class="item">2. Form</a>
@ -119,7 +119,6 @@
          <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">
@ -149,17 +148,17 @@
 <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>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, badges, or other standard html 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 class="ui small vertical pointing menu">
+      <div class="active item">Collection</div>
+      <div class="item">Elements</div>
+      <div class="item">Variations</div>
    </div>
  </div>
  
@ -179,7 +178,10 @@
        <a>Section 1</a>
      </div>
      <div class="item">
-        <a><i class="icon heart"></i></a>
+        <a>
+          <div class="badge">2</div>
+          <i class="icon mail"></i>
+        </a>
      </div>
      <div class="right menu">
        <div class="fitted borderless item">
@ -200,19 +202,20 @@
  <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 warning block">A vertical menus width must typically be defined. An alternative is to use the fluid variation  in conjunction with ui grid.</div>
    <div class="ui vertical menu">
      <div class="item">
-        Site Title
+        <b>Site Title</b>
      </div>
-      <div class="active item">
-        <a>Current section</a>
+      <div class="item">
+        <p>This is a paragraph of expository text</p>
      </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>
+          <a class="item">Current Section</a>
+          <a class="item">Subsection 2</a>
+          <a class="item">Subsection 3</a>
        </div>
      </div>
      <div class="dropdown item">
@ -230,7 +233,7 @@

  <div class="example">
    <h4>Text Item</h4>
-    <p>Your menu may have a simple text item</p>
+    <p>A menu may have a simple text item</p>
    <div class="ui vertical menu">
      <div class="item">
        Text Item
@ -239,7 +242,7 @@
  </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>
+    <p>A 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
@ -253,6 +256,10 @@
  <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 warning block">
+      <p>A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
+      <p>If you need to programmatically close the dropdown, use the "stateful" variant and the javascript state module, which will allow you to manipulate the state directly.</p>
+    </div>
    <div class="ui vertical menu">
      <div class="dropdown item">
        Dropdown <i class="icon right-dir"></i>
@ -294,9 +301,33 @@
  
  
  <h2>States</h2>
+  
+  <div class="example">
+    <h4>Hover</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>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>

  <h2>Variations</h2>

+  <h3>Menu</h3>
  <div class="example">
    <h4>Colors</h4>
    <p>A menu may have other colors defined</p>
@ -350,14 +381,14 @@
      <div class="item">
        Site Title
      </div>
-      <div class="active item">
+      <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="item">Subsection 1</a>
+          <a class="active item">Subsection 1</a>
          <a class="item">Subsection 1</a>
        </div>
      </div>
@ -484,6 +515,36 @@
    </div>
  </div>
  
+  <h3>Items</h3>
+  
+  <div class="example">
+    <h4>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>Borderless</h4>
+    <p>A menu item or menu might might have no dividers</p>
+    <div class="ui borderless menu">
+      <div class="item">
+        A
+      </div>
+      <div class="item">
+        B
+      </div>
+    </div>
+  </div>
+  
+  
+  
 </div>
 </body>

--- a/docs/stub.html
+++ b/docs/stub.html
@ -13,8 +13,8 @@
  <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" class="ui" href="../src/ui/flat/ZZZZZZZZZZZZZ.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" />
--- a/docs/stylesheets/example.css
+++ b/docs/stylesheets/example.css
@ -158,6 +158,7 @@ a:hover {
 }

 #example .sidr {
+  width: 275px;
  font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
  -webkit-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
--- a/src/ui/classic/menu.css
+++ b/src/ui/classic/menu.css
@ -0,0 +1,792 @@
+/*
+ * # Semantic Menu - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+
+
+/*******************************
+            Standard
+*******************************/
+
+/*--------------
+      Menu 
+---------------*/
+
+.ui.menu {
+  background-color: #FFFFFF;
+  font-size: 0px;
+
+  -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;
+  border-radius: 5px;
+
+}
+.ui.menu .item,
+.ui.menu .item > a {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  vertical-align: middle;
+  min-height: 1.25em;
+
+  -webkit-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+}
+
+/*--------------
+      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.03);
+  color: rgba(0, 0, 0, 0.95);
+}
+.ui.menu .item .item,
+.ui.menu .item .item > a {
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.menu .item .item > a:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+  color: rgba(0, 0, 0, 0.9);
+}
+
+/*--------------
+      Items 
+---------------*/
+
+.ui.menu .item {
+  position: relative;
+  display: inline-block;
+
+  padding: 0.75em 0.95em;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  user-select: none;
+}
+
+.ui.menu .item > a {
+  display: block;
+  margin: -0.75em -0.95em;
+  padding: 0.75em 0.95em;
+}
+
+.ui.menu .menu.left,
+.ui.menu .item.left {
+  float: left;
+}
+.ui.menu .menu.right,
+.ui.menu .item.right {
+  float: right;
+}
+
+
+/*--------------
+    Borders 
+---------------*/
+
+.ui.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  right: 0px;
+  width: 1px;
+  height: 100%;
+  background-image: -webkit-linear-gradient(top, 
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+}
+.ui.menu .menu.right .item:before,
+.ui.menu .item.right:before {
+  right: auto;
+  left: 0px;
+}
+
+
+/*--------------
+      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;
+}
+.ui.menu .dropdown.item .menu {
+  overflow: hidden;
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  background-color: #FFFFFF;
+  opacity: 0;
+
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+
+  -webkit-transition: opacity 0.2s ease-out;
+  -moz-transition: opacity 0.2s ease-out;
+  -o-transition: opacity 0.2s ease-out;
+  -ms-transition: opacity 0.2s ease-out;
+  transition: opacity 0.2s ease-out;
+  z-index: 11;
+}
+.ui.menu .dropdown.item .menu .item {
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 0.9em;
+  display: block;
+  color: rgba(0, 0, 0, 0.75);
+  
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ui.menu .dropdown.item .menu .item:first-child {
+  border-top: none;
+}
+.ui.menu .dropdown.item:last-child .menu {
+  left: auto;
+  right: 0px;
+}
+
+/*--------------
+  Notification 
+---------------*/
+.ui.menu .item .alert {
+  position: absolute;
+  top: -8px;
+  left: 75%;
+
+  background-color: #EEEEEE;
+  padding: 3px 5px;
+
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+
+  border: 1px solid #E5E5E5;
+
+  border-radius: 5px;
+
+  -webkit-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  -moz-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+
+  font-size: 11px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #555555;
+  z-index: 100;
+}
+
+
+
+
+/*******************************
+             States
+*******************************/
+
+/*--------------
+      Hover 
+---------------*/
+
+/* Pseudo states cautiously used for convenience */
+.ui.menu .item.hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover,
+.ui.menu .dropdown.item.hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .dropdown.item .menu .item.hover,
+.ui.menu .dropdown.item .menu .item:hover {
+  cursor: pointer;
+  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 
+---------------*/
+
+.ui.menu .item.down,
+.ui.menu .link.item:active,
+.ui.menu a.item:active,
+.ui.menu .item > a:active,
+.ui.menu .dropdown.item .menu .item:active {
+  background-color: rgba(0, 0, 0, 0.05);
+
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -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 
+---------------*/
+
+.ui.menu .item.active {
+  border-top: 0.2em solid #999999;
+  padding-top: 0.55em;
+
+  background-color: rgba(0, 0, 0, 0.05);
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+
+  -webkit-box-shadow:
+    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 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+.ui.vertical.menu .item.active {
+  border-top: none;
+  border-left: 0.2em solid #999999;
+  padding-top: 0.75em;
+  padding-left: 0.75em;
+}
+.ui.vertical.menu .item .menu .item.active {
+  padding-left: 1.35em;
+  padding-top: 0.5em;
+}
+
+/*--------------
+     Disabled 
+---------------*/
+
+.ui.menu .item.disabled,
+.ui.menu .item.disabled:hover,
+.ui.menu .item.disabled.hover {
+  cursor: default;
+  opacity: 0.3;
+  background-color: transparent;
+}
+
+
+
+/*******************************
+            Variations
+*******************************/
+
+
+/*--------------
+     Colors 
+---------------*/
+
+.ui.black.menu {
+  background-color: #333333;
+}
+.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.08);
+  color: rgba(255, 255, 255, 0.95);
+}
+.ui.black.menu .item .item,
+.ui.black.menu .item .item > a {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.black.menu .item .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/*--- Border ---*/
+.ui.black.menu .item:before {
+  background-image: -webkit-linear-gradient(top, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+}
+.ui.vertical.black.menu .item:before {
+  background-image: -webkit-linear-gradient(left, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+}
+
+/*--- Hover ---*/
+
+.ui.black.menu .link.item.hover,
+.ui.black.menu .link.item:hover,
+.ui.black.menu .dropdown.item:hover,
+.ui.black.menu a.item:hover {
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, .15);
+}
+
+/*--- Down ---*/
+
+.ui.black.menu .item.down,
+.ui.black.menu .dropdown.item:active,
+.ui.black.menu .link.item:active,
+.ui.black.menu a.item:active {
+  background-color: rgba(255, 255, 255, .1);
+
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -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 ---*/
+
+.ui.black.menu .item.active {
+  border-color: transparent;
+  background-color: rgba(255, 255, 255, 0.05);
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  -moz-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+
+/*--- Pointers ---*/
+
+.ui.black.pointing.menu .item.active:after {
+  background-color: #3E3E3E;
+}
+.ui.black.pointing.menu .item.active:hover:after {
+  background-color: #3B3B3B;
+}
+
+
+/*--------------
+  Transparent 
+---------------*/
+
+.ui.transparent.menu {
+  opacity: 0.95;
+}
+
+/*--------------
+    Vertical 
+---------------*/
+
+.ui.vertical.menu {
+  width: 200px;
+}
+.ui.vertical.menu .item {
+  display: block;
+  border-left: none;
+  border-right: none;
+}
+
+/*--- Border ---*/
+
+.ui.vertical.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 0px;
+  width: 100%;
+  height: 1px;
+  background-image: -webkit-linear-gradient(left, 
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+}
+
+.ui.vertical.menu .item:first-child:before {
+  background-image: none;
+}
+
+/*--- Dropdown ---*/
+
+.ui.vertical.menu .dropdown.item > i {
+  float: right;
+}
+.ui.vertical.menu .dropdown.item .menu {
+  top: 0%;
+  left: 100%;
+  margin: 0px;
+  border-left: none;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 1em;
+}
+.ui.vertical.menu .dropdown.item .menu .item {
+  font-size: 1em;
+}
+
+
+/*--- Sub Menu ---*/
+
+.ui.vertical.menu .item > .menu {
+  margin: 0.5em -1em -0.75em;
+}
+.ui.vertical.menu .item > .menu > .item {
+  padding: 0.5em 1.5em;
+  font-size: 0.85em;
+}
+.ui.vertical.menu .item > .menu > .item:before {
+  display: none;
+}
+.ui.vertical.menu .item > .menu > .item > a {
+  margin: -0.5em -1.5em;
+  padding: 0.5em 1.5em;
+}
+
+/*--------------
+     Fitted 
+---------------*/
+
+.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;
+}
+
+/*--------------
+   Borderless 
+---------------*/
+
+.ui.borderless.menu .item:before,
+.ui.borderless.menu .item > a:before,
+.ui.borderless.menu .item .menu .item:before, 
+.ui.borderless.menu .item .menu .item > a:before,
+.ui.menu .borderless.item:before,
+.ui.menu .borderless.item > a:before {
+  background-image: none;
+}
+
+
+/*--------------
+     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 
+---------------*/
+
+.ui.menu.fixed {
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  border: none;
+}
+.ui.menu.fixed.top {
+  top: 0px;
+  left: 0px;
+  right: auto;
+  bottom: auto;
+}
+.ui.menu.fixed.right {
+  top: 0px;
+  right: 0px;
+  left: auto;
+  bottom: auto;
+  width: auto;
+  height: 100%;
+}
+.ui.menu.fixed.bottom {
+  bottom: 0px;
+  left: 0px;
+  top: auto;
+  right: auto;
+}
+.ui.menu.fixed.left {
+  top: 0px;
+  left: 0px;
+  right: auto;
+  bottom: auto;
+  width: auto;
+  height: 100%;
+}
+
+/*-------------------
+       Pointing
+--------------------*/
+
+.ui.pointing.menu .item.active:after {
+  position: absolute;
+  bottom: -0.3em;
+  left: 50%;
+  content: "";
+
+  margin-left: -0.3em;
+  width: 0.6em;
+  height: 0.6em;
+
+  -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-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 {
+  position: absolute;
+  top: 50%;
+  right: -0.22em;
+  bottom: auto;
+  left: auto;
+
+  -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: -0.3em;
+}
+
+/* Colors */
+.ui.pointing.menu .item.active:after {
+  background-color: #F3F3F3;
+}
+.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 
+---------------*/
+
+.ui.small.menu .item {
+  font-size: 14px;
+}
+.ui.menu .item {
+  font-size: 16px;
+}
+.ui.large.menu .item {
+  font-size: 18px;
+}
--- a/src/ui/flat/menu.css
+++ b/src/ui/flat/menu.css
@ -41,6 +41,9 @@

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

+  vertical-align: middle;
+  min-height: 1.25em;
+
  -webkit-transition:
    opacity 0.1s linear,
    background 0.1s linear,
@ -227,44 +230,34 @@
 }

 /*--------------
-  Notification 
+     Badges 
 ---------------*/
-.ui.menu .item .alert {
-  position: absolute;
-  top: -8px;
-  left: 75%;
-
-  background-color: #EEEEEE;
-  padding: 3px 5px;

-  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-
-  border: 1px solid #E5E5E5;
-
-  border-radius: 5px;
+.ui.menu .item .badge {    
+  position: absolute;
+  z-index: 100;
+  top: -1em;
+  left: 100%;
+  margin-left: -1.5em;

-  -webkit-box-shadow:
-    0px 1px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 0px rgba(255, 255, 255, 0.6) inset
-  ;
-  -moz-box-shadow:
-    0px 1px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 0px rgba(255, 255, 255, 0.6) inset
-  ;
-  box-shadow:
-    0px 1px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 0px rgba(255, 255, 255, 0.6) inset
-  ;
+  min-width: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #AAAAAA;
+  padding: 0.3em 0.5em;

-  font-size: 11px;
+  font-size: 0.9em;
+  font-weight: bold;
  line-height: 1;
-  text-transform: uppercase;
-  color: #555555;
-  z-index: 100;
+  text-align: center;
+  color: #FFFFFF;
+
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  
+  -moz-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
 }


@ -282,7 +275,9 @@
 .ui.menu .item.hover,
 .ui.menu .link.item:hover,
 .ui.menu a.item:hover,
+.ui.menu .dropdown.item.hover,
 .ui.menu .dropdown.item:hover,
+.ui.menu .dropdown.item .menu .item.hover,
 .ui.menu .dropdown.item .menu .item:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.05);
@ -326,6 +321,10 @@
 ---------------*/

 .ui.menu .item.active {
+  
+  border-top: 0.2em solid #999999;
+  padding-top: 0.55em;
+
  background-color: rgba(0, 0, 0, 0.05);
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);

@ -342,6 +341,16 @@
    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
  ;
 }
+.ui.vertical.menu .item.active {
+  border-top: none;
+  border-left: 0.2em solid #999999;
+  padding-top: 0.75em;
+  padding-left: 0.75em;
+}
+.ui.vertical.menu .item .menu .item.active {
+  padding-left: 1.35em;
+  padding-top: 0.5em;
+}

 /*--------------
     Disabled 
@ -444,9 +453,9 @@

 /*--- Hover ---*/

-.ui.black.menu .item.hover,
+.ui.black.menu .link.item.hover,
 .ui.black.menu .link.item:hover,
-.ui.menu .dropdown.item:hover,
+.ui.black.menu .dropdown.item:hover,
 .ui.black.menu a.item:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, .15);
@ -455,7 +464,7 @@
 /*--- Down ---*/

 .ui.black.menu .item.down,
-.ui.menu .dropdown.item:active,
+.ui.black.menu .dropdown.item:active,
 .ui.black.menu .link.item:active,
 .ui.black.menu a.item:active {
  background-color: rgba(255, 255, 255, .1);
@ -468,6 +477,7 @@
 /*--- Active ---*/

 .ui.black.menu .item.active {
+  border-color: transparent;
  background-color: rgba(255, 255, 255, 0.05);
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);

@ -482,6 +492,15 @@
  ;
 }

+/*--- Pointers ---*/
+
+.ui.black.pointing.menu .item.active:after {
+  background-color: #3E3E3E;
+}
+.ui.black.pointing.menu .item.active:hover:after {
+  background-color: #3B3B3B;
+}
+

 /*--------------
  Transparent 
@ -496,7 +515,7 @@
 ---------------*/

 .ui.vertical.menu {
-  width: 280px;
+  width: 200px;
 }
 .ui.vertical.menu .item {
  display: block;
@ -565,10 +584,9 @@
 /*--- Sub Menu ---*/

 .ui.vertical.menu .item > .menu {
-  margin: 0.5em -1em -0.75em;
+  margin: 0.5em -1em 0em;
 }
 .ui.vertical.menu .item > .menu > .item {
-  border: none;
  padding: 0.5em 1.5em;
  font-size: 0.85em;
 }
@ -594,6 +612,20 @@
  padding-bottom: 0em;
 }

+/*--------------
+     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;
+}
+
+
 /*--------------
   Borderless 
 ---------------*/
@ -608,19 +640,60 @@
 }


-/*--------------
-     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;
-}
+/*-------------------
+        Fluid
+--------------------*/

+.ui.menu.fluid {
+  width: 100%;
+  height: 43px;
+}
+.ui.menu.fluid,
+.ui.menu.fluid .item {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+}
+.ui.menu.fluid .item {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.ui.menu.two.fluid .item {
+  width: 50%;
+}
+.ui.menu.three.fluid .item {
+  width: 33.333%;
+}
+.ui.menu.four.fluid .item {
+  width: 25%;
+}
+.ui.menu.five.fluid .item {
+  width: 20%;
+}
+.ui.menu.six.fluid .item {
+  width: 16.666%;
+}
+.ui.menu.seven.fluid .item {
+  width: 14.285%;
+}
+.ui.menu.eight.fluid .item {
+  width: 12.500%;
+}
+.ui.menu.nine.fluid .item {
+  width: 11.11%;
+}
+.ui.menu.ten.fluid .item {
+  width: 10.0%;
+}
+.ui.menu.eleven.fluid .item {
+  width: 9.09%;
+}
+.ui.menu.twelve.fluid .item {
+  width: 8.333%;
+}

 /*--------------
     Fixed 
@ -667,13 +740,13 @@

 .ui.pointing.menu .item.active:after {
  position: absolute;
-  bottom: -6px;
+  bottom: -0.3em;
  left: 50%;
  content: "";

-  margin-left: -5px;
-  width: 12px;
-  height: 12px;
+  margin-left: -0.3em;
+  width: 0.6em;
+  height: 0.6em;

  -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;
@ -706,7 +779,7 @@
 .ui.vertical.pointing.menu .item.active:after {
  position: absolute;
  top: 50%;
-  right: -6px;
+  right: -0.22em;
  bottom: auto;
  left: auto;

@ -714,9 +787,7 @@
  -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;
+  margin-top: -0.3em;
 }

 /* Colors */
@ -726,12 +797,6 @@
 .ui.pointing.menu .item.active:hover:after {
  background-color: #EAEAEA;
 }
-.ui.black.pointing.menu .item.active:after {
-  background-color: #3E3E3E;
-}
-.ui.black.pointing.menu .item.active:hover:after {
-  background-color: #3B3B3B;
-}

 /*--------------
    Attached 
--- a/src/ui/shaded/menu.css
+++ b/src/ui/shaded/menu.css
@ -1,5 +1,5 @@
 /*
- * # Semantic Menu - Flat
+ * # Semantic Menu - Shaded
 * http://github.com/quirkyinc/semantic
 *
 *
@ -15,25 +15,113 @@
            Standard
 *******************************/

+/*--------------
+      Menu 
+---------------*/
+
 .ui.menu {
-  background-color: #EEEEEE;
+  background-color: #FFFFFF;
  font-size: 0px;
+
+  background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: -ms-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+
+  -webkit-box-shadow:
+    0px 0px 0px 1px rgba( 0, 0, 0, 0.15)
+  ;
+  -moz-box-shadow:
+    0px 0px 0px 1px rgba( 0, 0, 0, 0.15)
+  ;
+  box-shadow:
+    0px 0px 0px 1px rgba( 0, 0, 0, 0.15)
+  ;
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+}
+.ui.menu .item,
+.ui.menu .item > a {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  -webkit-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+}
+
+/*--------------
+      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.03);
+  color: rgba(0, 0, 0, 0.95);
 }
-.ui.menu a {
-  color: #333333;
+.ui.menu .item .item,
+.ui.menu .item .item > a {
+  color: rgba(0, 0, 0, 0.6);
 }
+.ui.menu .item .item > a:hover {
+  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;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
+
+  padding: 0.75em 0.95em;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
+  user-select: none;
 }
-.ui.menu .item:first-child {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
+
+.ui.menu .item > a {
+  display: block;
+  margin: -0.75em -0.95em;
+  padding: 0.75em 0.95em;
 }

 .ui.menu .menu.left,
@ -43,13 +131,69 @@
 .ui.menu .menu.right,
 .ui.menu .item.right {
  float: right;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
 }


-/* Dropdown Menu */
+/*--------------
+    Borders 
+---------------*/
+
+.ui.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  right: 0px;
+  width: 1px;
+  height: 100%;
+  background-image: -webkit-linear-gradient(top, 
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+}
+.ui.menu .menu.right .item:before,
+.ui.menu .item.right:before {
+  right: auto;
+  left: 0px;
+}
+
+
+/*--------------
+      Icons 
+---------------*/
+
+.ui.menu .item > i:only-child,
+.ui.menu .item > a > i:only-child {
+  margin: 0em;
+}
+
+/*--------------
+    Dropdowns 
+---------------*/
+
 .ui.menu .dropdown.item {
-  position: relative;
+  box-shadow: none !important;
+  z-index: 10;
 }
 .ui.menu .dropdown.item .menu {
  overflow: hidden;
@ -61,39 +205,23 @@
  background-color: #FFFFFF;
  opacity: 0;

+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  -ms-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
-}
-.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);
+  z-index: 11;
 }
 .ui.menu .dropdown.item .menu .item {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
  display: block;
-  color: #555555;
+  color: rgba(0, 0, 0, 0.75);
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
@ -105,6 +233,52 @@
 .ui.menu .dropdown.item .menu .item:first-child {
  border-top: none;
 }
+.ui.menu .dropdown.item:last-child .menu {
+  left: auto;
+  right: 0px;
+}
+
+/*--------------
+  Notification 
+---------------*/
+.ui.menu .item .alert {
+  position: absolute;
+  top: -8px;
+  left: 75%;
+
+  background-color: #EEEEEE;
+  padding: 3px 5px;
+
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+
+  border: 1px solid #E5E5E5;
+
+  border-radius: 5px;
+
+  -webkit-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  -moz-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+
+  font-size: 11px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #555555;
+  z-index: 100;
+}
+



@ -126,23 +300,67 @@
  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);
+}
+
 /*--------------
-     Active 
+      Down 
 ---------------*/

 .ui.menu .item.down,
 .ui.menu .link.item:active,
 .ui.menu a.item:active,
+.ui.menu .item > a:active,
 .ui.menu .dropdown.item .menu .item:active {
  background-color: rgba(0, 0, 0, 0.05);

-  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -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 
+---------------*/
+
 .ui.menu .item.active {
-  font-weight: bold;
+  
+  border-top: 0.2em solid #999999;
+  padding-top: 0.55em;
+
+  background-color: rgba(0, 0, 0, 0.05);
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+
+  -webkit-box-shadow:
+    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 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+.ui.vertical.menu .item.active {
+  border-left: 0.2em solid #999999;
+  padding-left: 0.75em;
 }

 /*--------------
@ -157,52 +375,141 @@
  background-color: transparent;
 }

+
+
 /*******************************
            Variations
 *******************************/

+
 /*--------------
     Colors 
 ---------------*/

 .ui.black.menu {
  background-color: #333333;
-  color: #FFFFFF;
-}
-.ui.black.menu a {
-  color: #FFFFFF;
-}
-.ui.black.menu .item {
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
-}
-.ui.black.menu .item:first-child {
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
-}
-.ui.black.menu .menu.right,
-.ui.black.menu .item.right {
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
 }
+.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.08);
+  color: rgba(255, 255, 255, 0.95);
+}
+.ui.black.menu .item .item,
+.ui.black.menu .item .item > a {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.black.menu .item .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/*--- Border ---*/
+.ui.black.menu .item:before {
+  background-image: -webkit-linear-gradient(top, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+}
+.ui.vertical.black.menu .item:before {
+  background-image: -webkit-linear-gradient(left, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    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,
 .ui.black.menu a.item:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, .15);
 }
-/* active */
+
+/*--- Down ---*/
+
 .ui.black.menu .item.down,
+.ui.menu .dropdown.item:active,
 .ui.black.menu .link.item:active,
-.ui.menu .dropdown.item:hover,
 .ui.black.menu a.item:active {
-  background-color: rgba(255, 255, 255, .05);
+  background-color: rgba(255, 255, 255, .1);

-  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -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 ---*/
+
+.ui.black.menu .item.active {
+  background-color: rgba(255, 255, 255, 0.05);
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  -moz-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+
+/*--- Pointers ---*/
+
+.ui.black.pointing.menu .item.active:after {
+  background-color: #3E3E3E;
+}
+.ui.black.pointing.menu .item.active:hover:after {
+  background-color: #3B3B3B;
+}


 /*--------------
@ -214,28 +521,135 @@
 }

 /*--------------
-     Vertical 
+    Vertical 
 ---------------*/

 .ui.vertical.menu {
-  width: 100%;
+  width: 280px;
 }
 .ui.vertical.menu .item {
+  display: block;
  border-left: none;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: none;
+}
+
+/*--- Border ---*/
+
+.ui.vertical.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 0px;
+  width: 100%;
+  height: 1px;
+  background-image: -webkit-linear-gradient(left, 
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+}
+
+.ui.vertical.menu .item:first-child:before {
+  background-image: none;
+}
+
+/*--- Dropdown ---*/
+
+.ui.vertical.menu .dropdown.item > i {
+  float: right;
+}
+.ui.vertical.menu .dropdown.item .menu {
+  top: 0%;
+  left: 100%;
+  margin: 0px;
+  border-left: none;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 1em;
+}
+.ui.vertical.menu .dropdown.item .menu .item {
+  font-size: 1em;
+}
+
+
+/*--- Sub Menu ---*/
+
+.ui.vertical.menu .item > .menu {
+  margin: 0.5em -1em -0.75em;
+}
+.ui.vertical.menu .item > .menu > .item {
+  padding: 0.5em 1.5em;
+  font-size: 0.85em;
+}
+.ui.vertical.menu .item > .menu > .item:before {
+  display: none;
+}
+.ui.vertical.menu .item > .menu > .item > a {
+  margin: -0.5em -1.5em;
+  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 {
-  padding: 0px;
+
+/*--------------
+   Borderless 
+---------------*/
+
+.ui.borderless.menu .item:before,
+.ui.borderless.menu .item > a:before,
+.ui.borderless.menu .item .menu .item:before, 
+.ui.borderless.menu .item .menu .item > a:before,
+.ui.menu .borderless.item:before,
+.ui.menu .borderless.item > a:before {
+  background-image: none;
 }

+
+/*--------------
+     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 
 ---------------*/
@ -244,6 +658,7 @@
  position: fixed;
  z-index: 10;
  width: 100%;
+  border: none;
 }
 .ui.menu.fixed.top {
  top: 0px;
@ -274,24 +689,107 @@
  height: 100%;
 }

+/*-------------------
+       Pointing
+--------------------*/
+
+.ui.pointing.menu .item.active:after {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  content: "";
+
+  margin-left: -5px;
+  width: 12px;
+  height: 12px;
+
+  -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-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 {
+  position: absolute;
+  top: 50%;
+  right: -6px;
+  bottom: auto;
+  left: auto;
+
+  -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;
+}
+
+/* Colors */
+.ui.pointing.menu .item.active:after {
+  background-color: #F3F3F3;
+}
+.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 
 ---------------*/
-.ui.menu .item {
-  padding: 5px 10px;
+
+.ui.small.menu .item {
  font-size: 14px;
 }
-.ui.menu .item > a {
-  display: block;
-  margin: -5px -10px;
-  padding: 5px 10px;
-}
-.ui.large.menu .item {
-  padding: 12px 10px;
+.ui.menu .item {
  font-size: 16px;
 }
-.ui.menu .item > a {
-  display: block;
-  margin: -12px -10px;
-  padding: 12px 10px;
+.ui.large.menu .item {
+  font-size: 18px;
 }