From 39004622293d656b1c54db99ae9cdbd9032cbbbc Mon Sep 17 00:00:00 2001 From: peter Date: Sat, 2 Apr 2016 00:53:51 +0200 Subject: [PATCH] FEATURE #1525: responsive menu --- .../views/visitor/cwbs_template/about.html | 34 +++++++++++----- .../views/visitor/cwbs_template/contact.html | 34 +++++++++++----- .../views/visitor/cwbs_template/galerie.html | 34 +++++++++++----- .../views/visitor/cwbs_template/homepage.html | 39 +++++++++++++++---- .../visitor/cwbs_template/sortiment.html | 34 +++++++++++----- .../views/visitor/cwbs_template/style.css | 26 ++++++++++++- 6 files changed, 151 insertions(+), 50 deletions(-) diff --git a/resources/views/visitor/cwbs_template/about.html b/resources/views/visitor/cwbs_template/about.html index a78a9fa5..615c5923 100644 --- a/resources/views/visitor/cwbs_template/about.html +++ b/resources/views/visitor/cwbs_template/about.html @@ -16,20 +16,19 @@
-
+ +
    -
  • - Custom Wristbands Logo -
    • -
-
-
-
@@ -136,6 +135,21 @@ $(function() { $(document).foundation(); }); + + function showResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="block"; + menuHolder.style.height = document.documentElement.clientHeight + 'px'; + menuHolder.style.height = window.innerHeight + 'px'; + menuHolder.style.height = '100%;'; + + } + function hideResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="none"; + } diff --git a/resources/views/visitor/cwbs_template/contact.html b/resources/views/visitor/cwbs_template/contact.html index b30fb84a..a0a2ead4 100644 --- a/resources/views/visitor/cwbs_template/contact.html +++ b/resources/views/visitor/cwbs_template/contact.html @@ -16,17 +16,16 @@
-
+ +
    -
  • - Custom Wristbands Logo -
    • -
-
-
-
    -
  • Home
    • -
  • Sortiment
    • +
  • MENU
    -
    • +
  • Home
    • +
  • Sortiment
  • Doprodej
  • Galerie
  • O nás
    • @@ -141,6 +140,21 @@ $(function() { $(document).foundation(); }); + + function showResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="block"; + menuHolder.style.height = document.documentElement.clientHeight + 'px'; + menuHolder.style.height = window.innerHeight + 'px'; + menuHolder.style.height = '100%;'; + + } + function hideResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="none"; + } diff --git a/resources/views/visitor/cwbs_template/galerie.html b/resources/views/visitor/cwbs_template/galerie.html index b4c8dbc0..aaf8989e 100644 --- a/resources/views/visitor/cwbs_template/galerie.html +++ b/resources/views/visitor/cwbs_template/galerie.html @@ -16,19 +16,18 @@
    -
    + +
      -
    • - Custom Wristbands Logo -
      • -
    -
    -
    - @@ -249,6 +248,21 @@ $(function() { $(document).foundation(); }); + + function showResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="block"; + menuHolder.style.height = document.documentElement.clientHeight + 'px'; + menuHolder.style.height = window.innerHeight + 'px'; + menuHolder.style.height = '100%;'; + + } + function hideResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="none"; + } diff --git a/resources/views/visitor/cwbs_template/homepage.html b/resources/views/visitor/cwbs_template/homepage.html index afd5347d..2ca81354 100644 --- a/resources/views/visitor/cwbs_template/homepage.html +++ b/resources/views/visitor/cwbs_template/homepage.html @@ -19,19 +19,27 @@
    • - Custom Wristbands Logo +
    -
    @@ -456,6 +464,21 @@ $(function() { $(document).foundation(); }); + + function showResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="block"; + menuHolder.style.height = document.documentElement.clientHeight + 'px'; + menuHolder.style.height = window.innerHeight + 'px'; + menuHolder.style.height = '100%;'; + + } + function hideResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="none"; + } diff --git a/resources/views/visitor/cwbs_template/sortiment.html b/resources/views/visitor/cwbs_template/sortiment.html index 15430ffd..741ed632 100644 --- a/resources/views/visitor/cwbs_template/sortiment.html +++ b/resources/views/visitor/cwbs_template/sortiment.html @@ -16,17 +16,16 @@
    -
    + +
      -
    • - Custom Wristbands Logo -
      • -
    -
    -
    -
      -
    • Home
      • -
    • Sortiment
      • +
    • MENU
      -
      • +
    • Home
      • +
    • Sortiment
    • Doprodej
    • Galerie
    • O nás
      • @@ -190,6 +189,21 @@ $(function() { $(document).foundation(); }); + + function showResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="block"; + menuHolder.style.height = document.documentElement.clientHeight + 'px'; + menuHolder.style.height = window.innerHeight + 'px'; + menuHolder.style.height = '100%;'; + + } + function hideResponsiveMenu() { + var menuHolder = document.getElementById('responsive-menu'); + + menuHolder.style.display="none"; + } diff --git a/resources/views/visitor/cwbs_template/style.css b/resources/views/visitor/cwbs_template/style.css index c539506d..932a13cd 100644 --- a/resources/views/visitor/cwbs_template/style.css +++ b/resources/views/visitor/cwbs_template/style.css @@ -23,8 +23,10 @@ a:hover {text-decoration: underline;} .button.expanded.long {height: 3rem; padding: 1em 4em;} .w-t {color: #ffffff} .green-text {color: #46c1be !important;} +.dark {color: #414042 !important;} .uppercase {text-transform: uppercase;} .bold {font-weight: 700;} +.pointer {cursor: pointer;} [type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea, @@ -45,7 +47,7 @@ textarea, textarea:focus {height: 120px;} .menu > li:not(.menu-text) > a {font-weight: 700; text-transform:uppercase; color: #4D4D4F} .menu > li:not(.menu-text) > a.active {color: #46c1be} -.top-bar-right {position: absolute; bottom: 5px; right: 0;} +.top-bar-right {margin-top: 75px;} .orbit.header {position: relative; z-index: 1;} .orbit.header .orbit-next, .orbit.header .orbit-previous { background-color: #ffffff; color: #4d4d4f; padding: 40px;} @@ -132,6 +134,10 @@ footer a:hover {color: #46c1be;} .social-icons .fa.w-t {color: #ffffff;} @media (max-width:1023px) { + #responsive-menu {display: none;} + .top-bar-right .menu.hide-for-large {font-size: 1.5rem; position: absolute; right: 0; top: 25px;} + #logo {width: 175px; height: auto;} + .orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);} .orbit.header .orbit-slide {height: 600px} .orbit.header .orbit-slide:before { top: 30%; height: 50%;} @@ -148,8 +154,17 @@ footer a:hover {color: #46c1be;} .contact-detail {text-align: center; margin-top: -50px;} #content .contact-detail h2{text-align: center; font-size: 1rem; font-weight: 500; margin-bottom: 25px; margin-top: 25px;} #content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;} + + #responsive-menu {z-index: 500; width: 50%; height: 100%; min-height: 100%; position: absolute; top: -0; left: 50%; background-color: rgba(70, 193, 190, 0.8); } + #hidden-menu-divider {display: block; margin: 50px auto 20px; font-size: 1.8rem; color: #ffffff; text-align: center; font-weight: 500;} + .menu {height: auto;} + .top-bar-right .menu li {display: block; text-align: center; font-size: 1.8rem;} + .top-bar-right .menu li a { font-weight: 500;} + .top-bar-right .menu li a.active {color: #ffffff;} } @media (max-width:639px) { + #logo {width: 150px; height: auto;} + .orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);} .orbit.header .orbit-slide {height: 500px} .orbit.header .orbit-slide:before { top: 35%; height: 45%;} @@ -176,7 +191,7 @@ footer a:hover {color: #46c1be;} #content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;} - .orbit.footer .orbit-slide {height: 500px;} + .orbit.footer .orbit-slide {height: auto;} .orbit.footer .orbit-slide .small-6{margin-bottom: 10px; float: left;} .orbit.footer .orbit-slide .small-6:nth-child(even):after{} .orbit.footer .orbit-slide .img {height: 530px;} @@ -187,5 +202,12 @@ footer a:hover {color: #46c1be;} footer {padding-top: 20px;} .p-lr-50-sm {padding-left: 50px; padding-right: 50px;} + + #responsive-menu {z-index: 500; width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(70, 193, 190, 0.8); } + #hidden-menu-divider {display: block; margin: 50px auto 20px; font-size: 1.8rem; color: #ffffff; text-align: center; font-weight: 500;} + .menu {height: auto;} + .top-bar-right .menu li {display: block; text-align: center; font-size: 1.8rem;} + .top-bar-right .menu li a { font-weight: 500;} + .top-bar-right .menu li a.active {color: #ffffff;} }