Get started with your cookies today!

 
Add Reply
New Topic
New Poll

 push menu 1.1, push, topbar
merc
 Posted: Mar 9 2016, 05:57 PM
Quote

merc

merc is Offline



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>
PMEmail
^
merc
 Posted: Mar 9 2016, 05:59 PM
Quote

merc

merc is Offline



Thank you for your submission (:
PMEmail
^
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
New Topic
New Poll


 


 


Cookie Menus