work on menu docs

Former-commit-id: 7d7d79515dff2a59a5c1b61efe2e61ca00985ad0
Former-commit-id: 8005b97fc141ee878d98d477a66ee5c0db164ec8

docs/menu.html

@@ -37,13 +37,22 @@
   <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="active item"><a href="form.html">Forms</a></div>
         <div class="item"><a href="table.html">Table</a></div>
-        <div class="item"><a href="steps.html">Steps</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>
@@ -214,6 +223,31 @@
   </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>
+  
+  
+  
   <h2>States</h2>
 
   <h2>Variations</h2>

docs/stylesheets/example.css

@@ -56,7 +56,7 @@
     url('../fonts/neutraface-bold.eot');
   src: 
     url('../fonts/neutraface-bold.eot?#iefix') format('embeddedopentype'),
-    url('../fonts/neutraface-bold.otf') format('woff')
+    url('../fonts/neutraface-bold.woff') format('woff')
   ;
   font-style: normal;
   font-weight: bold;
@@ -159,7 +159,6 @@ a:hover {
 
 #example .sidr {
   font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
-  background-color: #FFFFFF;
   -webkit-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
   box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);

src/ui/flat/menu.css

@@ -59,6 +59,11 @@
     background 0.1s linear,
     box-shadow 0.1s linear
   ;
+}
+
+/* Text Color */
+.ui.menu .item,
+.ui.menu .item > a {
   color: rgba(0, 0, 0, 0.8);
 }
 .ui.menu .item > a:hover {
@@ -174,7 +179,6 @@
   right: 0px;
 }
 
-
 /* Hover */
 .ui.menu .dropdown.item:hover .menu {
   display: block;
@@ -250,7 +254,7 @@
 ---------------*/
 
 .ui.menu .item.active {
-  background-color: #F0F0F0;
+  background-color: rgba(0, 0, 0, 0.05);
   text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
 
   -webkit-box-shadow:
@@ -287,14 +291,26 @@
 .ui.black.menu {
   background-color: #333333;
 }
+
+/* Text Color */
 .ui.black.menu .item,
 .ui.black.menu .item > a {
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.95);
+}
+.ui.black.menu .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+  color: rgba(255, 255, 255, 0.95);
 }
 .ui.black.menu .item .item,
 .ui.black.menu .item .item > a {
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.black.menu .item .item > a:hover {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.8);
 }
+
+/* Border */
 .ui.black.menu .item:before {
   background-image: -webkit-linear-gradient(top center, 
     rgba(255, 255, 255, 0.03) 0%,
@@ -322,6 +338,33 @@
     rgba(255, 255, 255, 0.03) 100%)
   ;
 }
+.ui.vertical.black.menu .item:before {
+  background-image: -webkit-linear-gradient(left center, 
+    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 center,
+    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 center,
+    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 center,
+    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 center,
+    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 .item.hover,
 .ui.black.menu .link.item:hover,
@@ -330,7 +373,8 @@
   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,
@@ -341,13 +385,26 @@
   -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
+  ;
+}
 
 
 /*--------------
   Transparent 
 ---------------*/
-
 .ui.transparent.menu {
   opacity: 0.95;
 }