From d2a77f09f05fccab7f65678dc364a3767de2a936 Mon Sep 17 00:00:00 2001 From: Priit Haamer Date: Mon, 19 Aug 2013 06:47:54 +0000 Subject: [PATCH] Add responsive menu. --- components/js.tpl | 2 +- components/mobilemenus.tpl | 64 +++++++++++++++++-------------------- components/siteheader.tpl | 2 +- images/arr-bottom.png | Bin 0 -> 522 bytes images/arr-bottom.svg | 6 ++++ images/arr-top.png | Bin 0 -> 1324 bytes images/arr-top.svg | 8 +++++ javascripts/scripts.js | 4 +++ manifest.json | 2 +- stylesheets/style.css | 19 +++++++++-- 10 files changed, 68 insertions(+), 39 deletions(-) create mode 100644 images/arr-bottom.png create mode 100644 images/arr-bottom.svg create mode 100644 images/arr-top.png create mode 100644 images/arr-top.svg diff --git a/components/js.tpl b/components/js.tpl index c9ef477..a44132c 100644 --- a/components/js.tpl +++ b/components/js.tpl @@ -10,7 +10,7 @@ {% unless editmode %}{{site.analytics}}{% endunless %} - + \ No newline at end of file diff --git a/components/mobilemenus.tpl b/components/mobilemenus.tpl index 2b16f45..d929adf 100644 --- a/components/mobilemenus.tpl +++ b/components/mobilemenus.tpl @@ -9,39 +9,35 @@ {% include "LangmenuSelect" %}
- - +
\ No newline at end of file diff --git a/components/siteheader.tpl b/components/siteheader.tpl index 1ce2e81..90ecc72 100644 --- a/components/siteheader.tpl +++ b/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 %} diff --git a/images/arr-bottom.png b/images/arr-bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..dc1c4672311ce7b037edf4c0e03768d11a49cf2f GIT binary patch literal 522 zcmV+l0`>igP)es92DaaiKg`8Z zF1m$u_+)`+sL6{uu`po!_1tp>yEBLMpyNFtjhc8(f-qnm_0)6ZwHuIwFY+FVqX7H> zdAL*DT}Xsh-1hk3iNYa(&z^Ql2&|u_N2>+A-n;Hn%-O(zrC2o%YYR^9-WN^<#se8@ z9M?9XnIP12BObUGFUJkQTj=In#rkINRR&5pCm8i*4NJ4uxov`sJM|-0glls+seE~O~ zL&D?KYvqgLu1X}Xnto8P&F93 + + + + + \ No newline at end of file diff --git a/images/arr-top.png b/images/arr-top.png new file mode 100644 index 0000000000000000000000000000000000000000..2da3678fc474244a60737d48721125cbf5ed3055 GIT binary patch literal 1324 zcmeAS@N?(olHy`uVBq!ia0vp^>LAR)1|)kH2buyY$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@%*vS|5hW46K32*3xq68pHF_1f1wh>l3^w)^1&PVosU-?Y zsp*+{wo31J?^jaDOtDo8H}y5}EpSfF$n>ZxN)4{^3rViZPPR-@vbR&PsjvbXkegbP zs8ErclUHn2VXFi-*9yo63F|8hm3bwJ6}oxF$}kgLQj3#|G7CyF^YauyCMG83 zmzLNn0bL65LT&-v*t}wBFaZNhzap_f-%!s0klAm0fo0?Yw)0=|O>xfe?C@tg`0Bv?jEy^rQO>ryA&s6~X*(wvaTg-8q z2i2Q`+btG2_38s1qYsK%q?m>Y0h14i2~W2`4m{Eakt zaqCJ%V{Ws7fJq#KnTHw2+y%0Yf_ofqE+}cqnULpT?xDV7H{(qP{|EoV^Em~bdjIy` zo$Tj$V#ewD^85F1xYosRs*Jzd21SE3pON5y!d(Q``mqp zq8?;a8eFQm_~@HM?tivf&-jI|8@OfbcAX6?Jatd}RCrACaSMj+}{rhF_${k`A0-1#hvi1er!bHvmEooo))by0+l_G&>Z*rGUJiOwq zi`|ZdFDj`V(>Ites|@hhUAgPQ0qcN^`s`9$M7?LZuX8;!BS!w*wFnI%wHM)rXCk@V za+mMlX#ahq@Zz=8PM)(|^mgjT?r&`d>G>g>j&@jI`kBC+E+yU)5UoGOWAX7DU0QQv zJ)Zcal>KYF@W#~W!HH+d&nN9&FFpUF(F51>6^nQtoW5q?lFfJh-0~Cr{5Qi@JA%^! zt^dyUlDNG0v`W_8-#%yi+pIn+KF^L)J=wbVlFF9gwQtul2kVMO31`j!7qe~eq&K^L qZhn8h>3xpcTTXGy^2_^KB^XRE3h-ZT3VRDGzdT+2T-G@yGywoIrsfg= literal 0 HcmV?d00001 diff --git a/images/arr-top.svg b/images/arr-top.svg new file mode 100644 index 0000000..f37f71e --- /dev/null +++ b/images/arr-top.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/javascripts/scripts.js b/javascripts/scripts.js index f50d315..1e93146 100644 --- a/javascripts/scripts.js +++ b/javascripts/scripts.js @@ -30,5 +30,9 @@ $(function() { $('html, body').scrollTop(top); } + $('.mobile-menu-arr').click(function(event) { + $(event.target).closest('li').toggleClass('open'); + }); + }); \ No newline at end of file diff --git a/manifest.json b/manifest.json index 28e7ecb..030075c 100644 --- a/manifest.json +++ b/manifest.json @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/stylesheets/style.css b/stylesheets/style.css index b790eb6..e0d588f 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -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; }