Slide tutorial whats up

Hey! Thank you so much for being so respectful! It's a toggle slide menu and theres quite a few way to achieve it. I used codrops tutorial

It's a really fucked up tutorial because it's hard to integrate it into tumblr. So I'm just gonna be really nice and give you the codes I'm using for a basic slide menu. You can customize to your hearts content!

First you have the script it's pretty baller and makes everything work. It goes with your metas or if your code has tooltips then past it above that stuff. Pretty much ANYWHERE above the <style type="css">

<!--side push menu from codrops-->
<!--don't touch-->
<script src="http://takien.github.io/jPushMenu/js/jquery-1.9.1.min.js"></script>
<script src="http://takien.github.io/jPushMenu/js/jPushMenu.js"></script>

                <!--call jPushMenu, required-->
                <script>
                jQuery(document).ready(function($) {
                        $('.toggle').jPushMenu();
                });
                </script>

Next is the CSS this is where shit gets cool. You customize the WHOLE slide here. I'm going to break it down but this will be the main area of loving.

/*don't touch this it makes it so even if people scroll on the blog the slide
stays in the same spot.*/
.cbp-spmenu {
            position: fixed;
            }


        /* This is the main style of your slide. You can do anything you
you want with it really.  */

.cbp-spmenu-horizontal {
    padding:10px;
    margin-left:1000px;
    background:white;
    width: 400px;
    height: 100%;
    z-index:1;}

/* this part is going to control where the slide is coming from so if you
change right to like top,left,bottom it will slide from that direction.*/
.cbp-spmenu-bottom {
    right: -700px;/* Always use a negative number it so it hides it.*/
    bottom:0;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
    bottom:0px;
    right:0px; /*this one opens thats lovely slide menu*/
}


/*this controls what you put in the slide.

#pushdescription {
        margin-top:50px;
        padding:20px;
        overflow-y:scroll; /*makes it so it doesn't have scroll bar on the bottom
cause it looks like shit imo. so the Y controls the left and the X controls the
bottom. Hence why the overflow-x is set to hidden.*/
        overflow-x:hidden;

        }


/* Transitions the lower the number the faster it comes out
the smaller the number the slower it comes out.*/
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease; }


NEXT IS HTML::::


<body class="cbp-spmenu-push" class="{select:Background image}">

<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s1">
<div class="menu" >
<div id="pushdescription">
whooo hoo type your stuff here. add more divs for more shit. this just
makes an empty slide.
</div>
</div>
</nav>

Alright so there ya go a basic push menu that comes out from the right side of the page To link this shit up with a link you have is super easy.

Just use this within your link section.

<a title="this is if you want hover text" class="toggle menu-bottom">type link</a>


SO yeah this is how I make my push menus It's easy and basic in my opinion but they work. Just read up more about how to do the stuff you want and you can do just about anything with these little slides! I hope this helps you!