Get started with your cookies today!

 
Add Reply
New Topic
New Poll

 push menu 1.4 (left), fixed top, sidebar under menu
merc
 Posted: May 20 2016, 02:26 PM
Quote

merc

merc is Offline



TITLE: push menu 1.4
SKIN SELECTION: push menu 1.4
ICON FONT: Yes
NOTES: Split into parts; make sure you put them in the right places!
CSS

CODE
/*** PUSH MENU 1.4 ***/

#main {
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
}

#content {
padding-left: 15px;
padding-right: 15px;
}

#top {
position: fixed;
width: calc(100% - 30px);
padding-left: 15px;
padding-right: 15px;
line-height: 32px;
min-height: 32px;
text-transform: uppercase;
background: #B84250;
color: #fff;
left: 0px;
}
#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: 42px;
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) --->
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

* 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>
PMEmail
^
merc
 Posted: May 20 2016, 02:27 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