add drop-up-menu to navbar

kirinse · Jan 18, 2014 · 6566c89 · 6566c89
1 parent 1c1a921
commit 6566c89
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 9 deletions.
diff --git a/css/metro-bootstrap.css b/css/metro-bootstrap.css
@@ -4156,9 +4156,14 @@ a {
   right: 0;
   left: auto;
 }
-.metro .navigation-bar .element-menu > li > .dropdown-menu .dropdown-menu,
-.metro .navbar .element-menu > li > .dropdown-menu .dropdown-menu {
-  border: 0 !important;
+.metro .navigation-bar .element-menu.drop-up li > .dropdown-menu,
+.metro .navbar .element-menu.drop-up li > .dropdown-menu {
+  top: auto;
+  bottom: 45px;
+}
+.metro .navigation-bar .element-menu.drop-up li > .dropdown-menu .dropdown-menu,
+.metro .navbar .element-menu.drop-up li > .dropdown-menu .dropdown-menu {
+  bottom: 0;
 }
 .metro .navigation-bar .pull-menu,
 .metro .navbar .pull-menu {

diff --git a/docs/css/metro-bootstrap.css b/docs/css/metro-bootstrap.css
@@ -4156,9 +4156,14 @@ a {
   right: 0;
   left: auto;
 }
-.metro .navigation-bar .element-menu > li > .dropdown-menu .dropdown-menu,
-.metro .navbar .element-menu > li > .dropdown-menu .dropdown-menu {
-  border: 0 !important;
+.metro .navigation-bar .element-menu.drop-up li > .dropdown-menu,
+.metro .navbar .element-menu.drop-up li > .dropdown-menu {
+  top: auto;
+  bottom: 45px;
+}
+.metro .navigation-bar .element-menu.drop-up li > .dropdown-menu .dropdown-menu,
+.metro .navbar .element-menu.drop-up li > .dropdown-menu .dropdown-menu {
+  bottom: 0;
 }
 .metro .navigation-bar .pull-menu,
 .metro .navbar .pull-menu {

diff --git a/docs/navbar.html b/docs/navbar.html
@@ -207,7 +207,7 @@ <h3>Default</h3>
                     <ul class="element-menu">
                         <li>
                             <a class="dropdown-toggle" href="#">Base CSS</a>
-                            <ul class="dropdown-menu" data-role="dropdown">
+                            <ul class="dropdown-menu " data-role="dropdown">
                                 <li><a href="requirements.html">Requirements</a></li>
                                 <li>
                                     <a href="#" class="dropdown-toggle">General CSS</a>
@@ -520,6 +520,68 @@ <h3>White</h3>
 &lt;nav class="navigation-bar white"&gt;...&lt;/nav&gt;
 </pre>
 
+        <h3 id="drop-up-menu">Drop-up menu</h3>
+        <p>
+            For navigation bar, located at the bottom of the page may need to disclose the possibility of up menu.
+            Metro UI CSS gives you this opportunity. To do this you need to add to the <code>element-menu</code> class <code>drop-up</code>
+        </p>
+<pre class="prettyprint linenums">
+&lt;nav class="navigation-bar fixed-bottom"&gt;
+    &lt;ul class="element-menu drop-up"&gt;
+        ...
+    &lt;/ul&gt;
+&lt;/nav&gt;
+</pre>
+
+        <div class="example">
+            <div class="navigation-bar">
+                <div class="navigation-bar-content">
+                    <a href="/" class="element"><span class="icon-grid-view"></span> METRO UI CSS <sup>2.0</sup></a>
+                    <span class="element-divider"></span>
+
+                    <a class="pull-menu" href="#"></a>
+                    <ul class="element-menu drop-up">
+                        <li>
+                            <a class="dropdown-toggle" href="#">Base CSS</a>
+                            <ul class="dropdown-menu " data-role="dropdown">
+                                <li><a href="requirements.html">Requirements</a></li>
+                                <li>
+                                    <a href="#" class="dropdown-toggle">General CSS</a>
+                                    <ul class="dropdown-menu" data-role="dropdown">
+                                        <li><a href="global.html">Global styles</a></li>
+                                        <li><a href="grid.html">Grid system</a></li>
+                                        <div class="divider"></div>
+                                        <li><a href="typography.html">Typography</a></li>
+                                        <li><a href="tables.html">Tables</a></li>
+                                        <li><a href="forms.html">Forms</a></li>
+                                        <li><a href="buttons.html">Buttons</a></li>
+                                        <li><a href="images.html">Images</a></li>
+                                    </ul>
+                                </li>
+                                <li class="divider"></li>
+                                <li><a href="responsive.html">Responsive</a></li>
+                                <li class="disabled"><a href="layouts.html">Layouts and templates</a></li>
+                                <li class="divider"></li>
+                                <li><a href="icons.html">Icons</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a class="dropdown-toggle"  href="#">Community</a>
+                            <ul class="dropdown-menu" data-role="dropdown">
+                                <li class="disabled"><a href="http://blog.metroui.net">Blog</a></li>
+                                <li class="disabled"><a href="http://forum.metroui.net">Community Forum</a></li>
+                                <li class="divider"></li>
+                                <li><a href="https://github.com/olton/Metro-UI-CSS">Github</a></li>
+                                <li class="divider"></li>
+                                <li><a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+
+                </div>
+            </div>
+        </div>
+
     </div>
 
     <script src="js/hitua.js"></script>

diff --git a/less/navigation-bar.less b/less/navigation-bar.less
@@ -203,14 +203,27 @@
 
                 .dropdown-menu {
                     //background-color: inherit !important;
-                    border: 0 !important;
+                    //border: 0 !important;
                 }
             }
         }
 
         &.responsive {}
     }
 
+    .element-menu {
+        &.drop-up {
+            & li > .dropdown-menu {
+                top: auto;
+                bottom: 45px;
+
+                .dropdown-menu {
+                    bottom: 0;
+                }
+            }
+        }
+    }
+
     .pull-menu {
 
         display: none;

diff --git a/min/metro-bootstrap.min.css b/min/metro-bootstrap.min.css