Updated menu at small screen view #8016

openlabs · Jun 9, 2015 · 008488d · 008488d
1 parent eace016
commit 008488d
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 2 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -1878,7 +1878,8 @@ h3.product-item-name{
   font-size: 17px;
   font-weight: 600;
   padding-left: 5px;
-}.cart-add-msg{
+}
+.cart-add-msg{
   background: #fff;
   border: 1px solid #eee;
   position: absolute;
@@ -1888,4 +1889,51 @@ h3.product-item-name{
   margin-top: 17px;
   z-index: 100;
   padding: 10px;
+}
+a.nav-expander{
+  background: none repeat scroll 0 0 #000000;
+  color: #FFFFFF;
+  font-size: 15px;
+  height: 40px;
+  padding: .6em .8em 1em;
+  position: absolute;
+  right: 1%;
+  top: 1%;
+  transition: right 0.3s ease-in-out 0s;
+  width: 44px;
+  transition: right 0.3s ease-in-out 0s;
+  -webkit-transition: right 0.3s ease-in-out 0s;
+  -moz-transition: right 0.3s ease-in-out 0s;
+  -o-transition: right 0.3s ease-in-out 0s;
+}
+a.nav-expander:hover{
+  cursor: pointer;
+}
+a.nav-expander.fixed{
+  position: fixed;
+  z-index: 4000;
+  background: #000;
+}
+.visible-xs-block nav{
+  background: #2d2f33;
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  right: -15em;
+  font-size: 15px;
+  top: 0;
+  width: 15em;
+  z-index: 2000;
+  padding: 10px 0;
+  transition: right 0.3s ease-in-out 0s;
+  -webkit-transition: right 0.3s ease-in-out 0s;
+  -moz-transition: right 0.3s ease-in-out 0s;
+  -o-transition: right 0.3s ease-in-out 0s;
+}
+.nav-expanded nav{
+  right: 0;
+}
+.visible-xs-block nav li a{
+  color: #fff;
+  padding: 20px;
 }
diff --git a/templates/webshop/base.jinja b/templates/webshop/base.jinja
@@ -230,7 +230,7 @@
 
       <!--Main Navigation -->
       {% block main_navigation %}
-      <div class="container sticky">
+      <div class="container sticky hidden-xs">
         {% if not checkout_page %}
         <div class="row main-navigation">
           <div class="col-md-12">
@@ -245,6 +245,25 @@
         </div>
         {% endif %}
       </div>
+      {% if not checkout_page %}
+      <div class="visible-xs-block">
+        <nav>
+          <ul class="list-unstyled main-menu">
+            {% from '_helpers.jinja' import render_cms_root_menu %}
+              {% if request.nereid_website.cms_root_menu %}
+                {{ render_cms_root_menu(request.nereid_website.cms_root_menu) }}
+              {% endif %}
+              {# add any other navigational elements like probably an article list or custom link here #}
+            <!--Include your navigation here-->
+          </ul>
+        </nav>
+        <div class="navbar-header pull-right">
+          <a id="nav-expander" class="nav-expander fixed">
+            <i class="fa fa-bars fa-lg white"></i>
+          </a>
+        </div>
+      </div>
+      {% endif %}
       {% endblock main_navigation %}
     </section>
     <div class="container container-breadcrumb hidden-xs">
@@ -484,6 +503,27 @@
       </script>
     {% endblock flash_message_script %}
 
+    <script>
+      $(document).ready(function(){
+       //Navigation Menu Slider
+        $('#nav-expander').on('click',function(e){
+          e.preventDefault();
+          if($(this).children('.fa').hasClass('fa-bars')) {
+           $(this).children('.fa-bars').removeClass('fa-bars');
+           $(this).children('.fa').addClass('fa-close');
+           $('a.nav-expander.fixed').css("background","#898A8E");
+          }
+          else {
+            $(this).children('.fa-close').removeClass('fa-close');
+            $(this).children('.fa').addClass('fa-bars');
+            $('a.nav-expander.fixed').css("background","#000");
+          }
+          $('a.nav-expander.fixed').css("-webkit-transition","background-color 500ms linear");
+          $('.visible-xs-block').toggleClass('nav-expanded');
+        });
+      });
+    </script>
+
     <script type="text/javascript">
       function disableBuyNow (lines) {
         // Disable buy now button for already bought items from cart lines