minicms/core
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

FEATURE #1525: responsive menu

Browse Source
This commit is contained in:
peter
2016-04-02 00:53:51 +02:00
parent c48b99eaf0
commit 3900462229
6 changed files with 151 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/visitor/cwbs_template/about.html
+24 -10
View File
@@ -16,20 +16,19 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<ul class="menu">
<li class="menu-text">
<a href="/"><img src="images/cwbs_logo_medium.png" alt="Custom Wristbands Logo"></a>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Home</a></li>
<li id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#" class="active">O nás</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
@@ -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";
}
</script>
</body>
</html>
resources/views/visitor/cwbs_template/contact.html
+24 -10
View File
@@ -16,17 +16,16 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<ul class="menu">
<li class="menu-text">
<a href="/"><img src="images/cwbs_logo_medium.png" alt="Custom Wristbands Logo"></a>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Sortiment</a></li>
<li id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">O nás</a></li>
@@ -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";
}
</script>
</body>
</html>
resources/views/visitor/cwbs_template/galerie.html
+24 -10
View File
@@ -16,19 +16,18 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<ul class="menu">
<li class="menu-text">
<a href="/"><img src="images/cwbs_logo_medium.png" alt="Custom Wristbands Logo"></a>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Home</a></li>
<li id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
<li><a href="#" class="active">Galerie</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
@@ -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";
}
</script>
</body>
</html>
resources/views/visitor/cwbs_template/homepage.html
+31 -8
View File
@@ -19,19 +19,27 @@
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">
<a href="/"><img src="images/cwbs_logo_medium.png" alt="Custom Wristbands Logo"></a>
<a href="/"><img id="logo" src="images/cwbs_logo_medium.png" alt="Custom Wristbands Logo"></a>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<ul class="menu">
<li id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</div>
@@ -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";
}
</script>
</body>
</html>
resources/views/visitor/cwbs_template/sortiment.html
+24 -10
View File
@@ -16,17 +16,16 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<ul class="menu">
<li class="menu-text">
<a href="/"><img src="images/cwbs_logo_medium.png" alt="Custom Wristbands Logo"></a>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Sortiment</a></li>
<li id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">O nás</a></li>
@@ -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";
}
</script>
</body>
</html>
resources/views/visitor/cwbs_template/style.css
Vendored
+24 -2
View File
@@ -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;}
}