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; } |
HTMLCODE |
<!--- 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 2CODE |
<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
* DO NOT DELETE THIS NOTE.
*****************/ </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>
|