Add responsive menu.

Author: Priit Haamer

components/js.tpl

@@ -10,7 +10,7 @@
 {% unless editmode %}{{site.analytics}}{% endunless %}
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
-<script src="{{ javascripts_path }}/scripts.js"></script>
+<script src="{{ javascripts_path }}/scripts.js?1"></script>
 
 
 

components/mobilemenus.tpl

@@ -9,39 +9,35 @@
     {% include "LangmenuSelect" %}
   </div>
   <div class="mobile-menu-inner">
-    
-<ul>
-  {% unless site.root_item.hidden? %}<li><a href="{{site.root_item.url}}"{% if site.root_item.selected? %} class="active"{% endif %}>{{site.root_item.title}}</a></li>{% endunless %}
-  {% for item in site.visible_menuitems %}
-    <li class="{% if forloop.last%}last{% endif %} {% unless item.translated? %}untranslated{%endunless%}">
-      <a href="{{item.url}}"{% if item.selected? %} class="active"{% endif %}{% unless item.translated? %} class="fci-editor-menuadd"{% endunless %}>{{item.title}}</a>
-      {% if item.selected? %}
-    
-    {% if item.children? and item.selected? %}
-      <ul>
-        {% for level2 in item.visible_children %}
-          <li class="{% if forloop.last %}last{%endif%} {% unless level2.translated? %}untranslated{% endunless %}">
-            <a href="{{ level2.url }}"{% if level2.selected? %} class="active"{% endif %}{% unless level2.translated? %} class="fci-editor-menuadd"{% endunless %}>{{ level2.title }}</a>
-          
-            {% if level2.selected? %}
-              {% if level2.children? %}
-                <ul>
-                  {% for level3 in level2.visible_children %}
-                    <li class="{% if forloop.last %}last{% endif %} {% unless level3.translated? %}untranslated{% endunless %}">
-                      <a href="{{ level3.url }}"{% if level3.selected? %} class="active"{% endif%}{% unless level3.translated? %} class="fci-editor-menuadd"{% endunless %}>{{ level3.title }}</a>
-                    </li>
-                  {% endfor %}
-                  
-                </ul>
-              {% endif %}
-            {% endif %}
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-  {% endif %}
-    </li>
-  {% endfor %}
-</ul>
+    <ul>
+      {% unless site.root_item.hidden? %}<li><a href="{{site.root_item.url}}"{% if site.root_item.selected? %} class="active"{% endif %}>{{site.root_item.title}}</a></li>{% endunless %}
+      {% for item in site.visible_menuitems %}
+        <li class="{% if forloop.last%}last{% endif %} {% unless item.translated? %}untranslated{%endunless%} {% if item.selected? %}open{% endif %}">
+          {% if item.children? %}<div class="mobile-menu-arr"></div>{% endif %}
+          <a href="{{item.url}}"{% if item.selected? %} class="active"{% endif %}{% unless item.translated? %} class="fci-editor-menuadd"{% endunless %}>{{item.title}}</a>
+          {% if item.children? %}
+            <ul>
+              {% for level2 in item.visible_children %}
+                <li class="{% if forloop.last %}last{%endif%} {% unless level2.translated? %}untranslated{% endunless %} {% if level2.selected? %}open{% endif %}">
+                  {% if level2.children? %}<div class="mobile-menu-arr"></div>{% endif %}
+                  <a href="{{ level2.url }}"{% if level2.selected? %} class="active"{% endif %}{% unless level2.translated? %} class="fci-editor-menuadd"{% endunless %}>{{ level2.title }}</a>
+                
+                    {% if level2.children? %}
+                      <ul>
+                        {% for level3 in level2.visible_children %}
+                          <li class="{% if forloop.last %}last{% endif %} {% unless level3.translated? %}untranslated{% endunless %}">
+                            <a href="{{ level3.url }}"{% if level3.selected? %} class="active"{% endif%}{% unless level3.translated? %} class="fci-editor-menuadd"{% endunless %}>{{ level3.title }}</a>
+                          </li>
+                        {% endfor %}
+                        
+                      </ul>
+                    {% endif %}
+                </li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
   </div>
 </div>

components/siteheader.tpl

@@ -13,7 +13,7 @@
   {% endif %}
 
   {% if site.search.enabled %}{% stylesheet_link "assets/site_search/3.0/style.css?1" static_host="true" %}{% endif %}
-  {% stylesheet_link "style.css?reykjavik1" %}
+  {% stylesheet_link "style.css?reykjavik3" %}
   {% if editmode %}{% stylesheet_link "assets/admin/editmode.css" static_host="true" %}{% endif %}
 
   <link rel="icon" href="/favicon.ico" type="image/x-icon" />

images/arr-bottom.png

@@ -30,5 +30,9 @@ $(function() {
     $('html, body').scrollTop(top);
   }
 
+  $('.mobile-menu-arr').click(function(event) {
+    $(event.target).closest('li').toggleClass('open');
+  });
+  
 
 });

images/arr-bottom.svg

@@ -1 +1 @@
-{"name":"Reykjavik","layouts":[{"component":false,"title":"Blog & News","layout_name":"blog","content_type":"blog","file":"layouts/blog___news.tpl"},{"component":false,"title":"Blog article","layout_name":"blog_article","content_type":"blog_article","file":"layouts/blog_article.tpl"},{"component":false,"title":"Common page","layout_name":"page_default","content_type":"page","file":"layouts/common_page.tpl"},{"component":false,"title":"Front page","layout_name":"page_front","content_type":"page","file":"layouts/front_page.tpl"},{"component":true,"title":"JS","layout_name":"js","content_type":"component","file":"components/js.tpl"},{"component":true,"title":"Langmenu","layout_name":"langmenu","content_type":"component","file":"components/langmenu.tpl"},{"component":true,"title":"LatestNews","layout_name":"latestnews","content_type":"component","file":"components/latestnews.tpl"},{"component":true,"title":"Mainmenu","layout_name":"mainmenu","content_type":"component","file":"components/mainmenu.tpl"},{"component":true,"title":"Search","layout_name":"search","content_type":"component","file":"components/search.tpl"},{"component":true,"title":"SiteHeader","layout_name":"siteheader","content_type":"component","file":"components/siteheader.tpl"},{"component":true,"title":"Submenu","layout_name":"submenu","content_type":"component","file":"components/submenu.tpl"},{"component":true,"title":"LangmenuSelect","layout_name":"langmenuselect","content_type":"component","file":"components/langmenuselect.tpl"},{"component":true,"title":"MobileMenus","layout_name":"mobilemenus","content_type":"component","file":"components/mobilemenus.tpl"}],"author":"Paavel Liik","assets":[{"kind":"images","content_type":"image/gif","filename":"arr_down.gif","file":"images/arr_down.gif"},{"kind":"assets","content_type":"font/eot","filename":"avenir-medium-webfont.eot","file":"assets/avenir-medium-webfont.eot"},{"kind":"assets","content_type":"font/eot","filename":"avenir-light-webfont.eot","file":"assets/avenir-light-webfont.eot"},{"kind":"assets","content_type":"font/woff","filename":"avenir-light-webfont.woff","file":"assets/avenir-light-webfont.woff"},{"kind":"assets","content_type":"font/ttf","filename":"avenir-light-webfont.ttf","file":"assets/avenir-light-webfont.ttf"},{"kind":"assets","content_type":"font/ttf","filename":"avenir-medium-webfont.ttf","file":"assets/avenir-medium-webfont.ttf"},{"kind":"assets","content_type":"font/woff","filename":"avenir-medium-webfont.woff","file":"assets/avenir-medium-webfont.woff"},{"kind":"assets","content_type":"font/eot","filename":"avenir-roman-webfont.eot","file":"assets/avenir-roman-webfont.eot"},{"kind":"assets","content_type":"font/ttf","filename":"avenir-roman-webfont.ttf","file":"assets/avenir-roman-webfont.ttf"},{"kind":"assets","content_type":"font/woff","filename":"avenir-roman-webfont.woff","file":"assets/avenir-roman-webfont.woff"},{"kind":"images","content_type":"image/gif","filename":"list_dot.gif","file":"images/list_dot.gif"},{"kind":"images","content_type":"image/gif","filename":"list_dot_2x.gif","file":"images/list_dot_2x.gif"},{"kind":"images","content_type":"image/gif","filename":"search_2x.gif","file":"images/search_2x.gif"},{"kind":"images","content_type":"image/gif","filename":"search.gif","file":"images/search.gif"},{"kind":"stylesheets","content_type":"text/css","filename":"style.css","file":"stylesheets/style.css"},{"kind":"javascripts","content_type":"text/javascript","filename":"scripts.js","file":"javascripts/scripts.js"},{"kind":"images","content_type":"image/jpeg","filename":"reykjavik_photo01.jpg","file":"images/reykjavik_photo01.jpg"},{"kind":"images","content_type":"image/png","filename":"tag.png","file":"images/tag.png"},{"kind":"images","content_type":"image/svg+xml","filename":"tag.svg","file":"images/tag.svg"},{"kind":"images","content_type":"image/svg+xml","filename":"header-tag.svg","file":"images/header-tag.svg"},{"kind":"javascripts","content_type":"text/javascript","filename":"modernizr.js","file":"javascripts/modernizr.js"},{"kind":"images","content_type":"image/png","filename":"header-tag2.png","file":"images/header-tag2.png"}],"preview_medium":"http://static.edicy.com/designs/previews/reykjavik_medium.jpg","preview_small":"http://static.edicy.com/designs/previews/reykjavik_small.jpg","description":"Reykjavik"}
+{"name":"Reykjavik","layouts":[{"component":false,"title":"Blog & News","layout_name":"blog","content_type":"blog","file":"layouts/blog___news.tpl"},{"component":false,"title":"Blog article","layout_name":"blog_article","content_type":"blog_article","file":"layouts/blog_article.tpl"},{"component":false,"title":"Common page","layout_name":"page_default","content_type":"page","file":"layouts/common_page.tpl"},{"component":false,"title":"Front page","layout_name":"page_front","content_type":"page","file":"layouts/front_page.tpl"},{"component":true,"title":"JS","layout_name":"js","content_type":"component","file":"components/js.tpl"},{"component":true,"title":"Langmenu","layout_name":"langmenu","content_type":"component","file":"components/langmenu.tpl"},{"component":true,"title":"LatestNews","layout_name":"latestnews","content_type":"component","file":"components/latestnews.tpl"},{"component":true,"title":"Mainmenu","layout_name":"mainmenu","content_type":"component","file":"components/mainmenu.tpl"},{"component":true,"title":"Search","layout_name":"search","content_type":"component","file":"components/search.tpl"},{"component":true,"title":"SiteHeader","layout_name":"siteheader","content_type":"component","file":"components/siteheader.tpl"},{"component":true,"title":"Submenu","layout_name":"submenu","content_type":"component","file":"components/submenu.tpl"},{"component":true,"title":"LangmenuSelect","layout_name":"langmenuselect","content_type":"component","file":"components/langmenuselect.tpl"},{"component":true,"title":"MobileMenus","layout_name":"mobilemenus","content_type":"component","file":"components/mobilemenus.tpl"}],"author":"Paavel Liik","preview_medium":"http://static.edicy.com/designs/previews/reykjavik_medium.jpg","assets":[{"kind":"images","content_type":"image/gif","filename":"arr_down.gif","file":"images/arr_down.gif"},{"kind":"assets","content_type":"font/eot","filename":"avenir-medium-webfont.eot","file":"assets/avenir-medium-webfont.eot"},{"kind":"assets","content_type":"font/eot","filename":"avenir-light-webfont.eot","file":"assets/avenir-light-webfont.eot"},{"kind":"assets","content_type":"font/woff","filename":"avenir-light-webfont.woff","file":"assets/avenir-light-webfont.woff"},{"kind":"assets","content_type":"font/ttf","filename":"avenir-light-webfont.ttf","file":"assets/avenir-light-webfont.ttf"},{"kind":"assets","content_type":"font/ttf","filename":"avenir-medium-webfont.ttf","file":"assets/avenir-medium-webfont.ttf"},{"kind":"assets","content_type":"font/woff","filename":"avenir-medium-webfont.woff","file":"assets/avenir-medium-webfont.woff"},{"kind":"assets","content_type":"font/eot","filename":"avenir-roman-webfont.eot","file":"assets/avenir-roman-webfont.eot"},{"kind":"assets","content_type":"font/ttf","filename":"avenir-roman-webfont.ttf","file":"assets/avenir-roman-webfont.ttf"},{"kind":"assets","content_type":"font/woff","filename":"avenir-roman-webfont.woff","file":"assets/avenir-roman-webfont.woff"},{"kind":"images","content_type":"image/gif","filename":"list_dot.gif","file":"images/list_dot.gif"},{"kind":"images","content_type":"image/gif","filename":"list_dot_2x.gif","file":"images/list_dot_2x.gif"},{"kind":"images","content_type":"image/gif","filename":"search_2x.gif","file":"images/search_2x.gif"},{"kind":"images","content_type":"image/gif","filename":"search.gif","file":"images/search.gif"},{"kind":"stylesheets","content_type":"text/css","filename":"style.css","file":"stylesheets/style.css"},{"kind":"javascripts","content_type":"text/javascript","filename":"scripts.js","file":"javascripts/scripts.js"},{"kind":"images","content_type":"image/jpeg","filename":"reykjavik_photo01.jpg","file":"images/reykjavik_photo01.jpg"},{"kind":"images","content_type":"image/png","filename":"tag.png","file":"images/tag.png"},{"kind":"images","content_type":"image/svg+xml","filename":"tag.svg","file":"images/tag.svg"},{"kind":"images","content_type":"image/svg+xml","filename":"header-tag.svg","file":"images/header-tag.svg"},{"kind":"javascripts","content_type":"text/javascript","filename":"modernizr.js","file":"javascripts/modernizr.js"},{"kind":"images","content_type":"image/png","filename":"header-tag2.png","file":"images/header-tag2.png"},{"kind":"images","content_type":"image/png","filename":"arr-bottom.png","file":"images/arr-bottom.png"},{"kind":"images","content_type":"image/png","filename":"arr-top.png","file":"images/arr-top.png"},{"kind":"images","content_type":"image/svg+xml","filename":"arr-top.svg","file":"images/arr-top.svg"},{"kind":"images","content_type":"image/svg+xml","filename":"arr-bottom.svg","file":"images/arr-bottom.svg"}],"preview_small":"http://static.edicy.com/designs/previews/reykjavik_small.jpg","description":"Reykjavik"}

images/arr-top.png

@@ -184,8 +184,8 @@ pre { white-space: normal; }
 
    .mobile-menu-inner li.last { border-bottom: none;  }
 
-   .mobile-menu-inner ul ul { border-top: 1px solid #444444; }
-   
+   .mobile-menu-inner ul ul { border-top: 1px solid #444444; display: none; }
+   .mobile-menu-inner ul li.open > ul { display: block; }
    .mobile-menu-inner a { 
        display: block; outline: 0; border-bottom: none;
        color: #9DA0A4;
@@ -202,6 +202,21 @@ pre { white-space: normal; }
    .mobile-menu-inner a.active { 
      color: white; font-weight: bold;
    }
+   
+   .mobile-menu-arr {
+      cursor: pointer;
+      height: 37px;
+      right: 16px;
+      top: 14px;
+      width: 30px;
+      background: url("../images/arr-bottom.png") no-repeat right center;
+      background-size: 18px 18px;
+      float: right;
+      opacity: 0.5;
+   }
+   .svg .mobile-menu-arr { background-image: url("../images/arr-bottom.svg"); }
+   .mobile-menu-inner li.open > .mobile-menu-arr { background-image: url("../images/arr-top.png"); opacity: 1; }
+   .svg .mobile-menu-inner li.open > .mobile-menu-arr { background-image: url("../images/arr-top.svg"); }
 
 /* container */
   #container { padding: 40px 0 60px; }