TITLE: Push Menu 1.1
SKIN SELECTION: Push Menu 1.1
ICON FONT: Yes
NOTES: This code has split sections so please make sure you're putting codes in the correct places.
CSS | CODE |
/*** PUSH MENU 1.1 ***/
#main {
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
}
#content {
padding-left: 15px;
padding-right: 15px;
}
#top {
position: relative;
padding-left: 15px;
padding-right: 15px;
line-height: 32px;
min-height: 32px;
text-transform: uppercase;
background: #B84250;
color: #fff;
}
#top:after {
content: '';
display: table;
clear: both;
}
.burger {
float: left;
padding: 5px;
width: 32px;
height: 32px;
text-align: center;
}
#push-menu-state {
float: left;
padding: 5px;
}
#push-menu {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background: #fff;
color: ivory;
}
.pushed-cbox {
width: 180px;
margin: auto;
margin-top: 20px;
}
.brand {
background-color: #f7f7f7;
font-weight: bold;
font-family: montserrat;
font-size: 8px;
letter-spacing: 1px;
padding: 20px;
color: #B84250;
text-transform: uppercase;
text-align: left;
margin: 0px;
}
.brand b {
border-bottom: 1px solid #fff;
padding: 4px;
}
.nav-menu { padding-top: 30px; }
.nav-menu li {
padding-top: 2px;
padding-bottom: 2px;
line-height: 48px;
}
.nav-menu a {
color: ivory;
text-decoration: none;
}
.nav-image {
float: left;
width: 50px;
line-height: 48px;
text-align: center;
}
.small-menu #main { left: 0; }
.small-menu #push-menu { left: -200px; }
#main, #push-menu {
transition: all 0.15s linear;
} |
HTML| CODE |
<!--- PLACE THIS JUST UNDER YOUR HEAD TAGS --->
<div id='main'>
<div id='top'>
<div id='push-menu-toggle'>
<div class='burger'>
<i class='fa fa-bars'></i>
</div>
</div>
<div id='push-menu-state'>
<strong>Push Menu State is</strong>
<span class='cookie-is'></span>
</div>
</div>
<div id='content'>
<!-- END THIS ABOVE ALL PUSHED CONTENT (HEADER, WRAPPER, ETC) ---> |
HTML PT 2| CODE |
<script>
/*****************
Put this just before the body tag ends but
above the push-menu div. You can delete this
when you are done.
*****************/
$(document).ready(function(){
var $body = $('body'),
$btn = $('#push-menu-toggle'),
$menu = $('#push-menu'),
menu_state = $.cookie('my_cookie_name'),
viewportX = $(window).width();
var cookieValue = $.cookie('my_cookie_name');
if ( cookieValue === 'close' ) {
$body.addClass('small-menu');
} else {
$body.removeClass('small-menu');
}
$.cookie('my_cookie_name', menu_state);
$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
$btn.click(function(){
$body.toggleClass('small-menu');
$.removeCookie('my_cookie_name');
if ( $body.hasClass('small-menu') ) {
menu_state = 'close';
} else {
menu_state = 'open';
}
$.cookie('my_cookie_name', menu_state);
$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
});
});
/*****************
Find more cookie resources at:
http://mercdoescookies.jcink.net
* YOU CAN DELETE THIS NOTE
IF YOU WOULD LIKE
*****************/
</script>
</div>
</div>
<div id='push-menu'>
<h1 class='brand'><b>Cookie Menus</b></h1>
<div class='pushed-cbox'>
<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 180px; font-size: 0; line-height: 0;">
<div style="position: relative; height: 290px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 0px solid;"><iframe src="http://www5.cbox.ws/box/?boxid=906141&boxtag=ve95bw&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain5-906141" id="cboxmain5-906141"></iframe></div>
<div style="position: relative; height: 90px; overflow: hidden; border: 0px solid; border-top: 0px;"><iframe src="http://www5.cbox.ws/box/?boxid=906141&boxtag=ve95bw&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform5-906141" id="cboxform5-906141"></iframe></div>
</div>
<!-- END CBOX -->
</div>
</div>
|
Help 
Search 
Members 
Calendar 
Shoutbox
