How to Create PageSlide for Responsive Menu Demo with CSS and Javascript

MenuPageSlide Responsive Demo (Browser Minimize)

• Menu Item 1
• Menu Item 2
• Menu Item 3
• Menu Item 4
• Menu Item 5

If you've ever used the mobile version of Facebook, or Path, then you've probably seen something akin to PageSlide in action.

In this example, resizing the browser to a smaller window (less than or equal to an iPhone's landscape view) will collapse and hide the faux menu nav above. Clicking on the menu icon will then trigger PageSlide to open.

 /* Include this files in head */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Code for a menu which comes from leftside.

 
   
 <div id="responsive-menu">
     <h1><a class="open" href="#nav">Menu</a>PageSlide Responsive Demo</h1>
  <ul id="nav">
            <li><a href="">Menu Item 1</a></li>
            <li><a href="">Menu Item 2</a></li>
            <li><a href="">Menu Item 3</a></li>
            <li><a href="">Menu Item 4</a></li>
            <li><a href="">Menu Item 5</a></li>
        </ul>
  </div>
   
   

ADD CSS You can changed it according to your requirements

 
   
     #pageslide {
  /* These styles MUST be included. Do not change. */
  display: none;
  position: absolute;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  
  /* Specify the width of your pageslide here */
  width: 260px;
  padding: 20px;
  
  /* These styles are optional, and describe how the pageslide will look */
  background-color: #333;
  color: #FFF;
  -webkit-box-shadow: inset 0 0 5px 5px #222;
  -moz-shadow: inset 0 0 5px 5px #222;
  box-shadow: inset 0 0 5px 5px #222;
 }
 
            ul#nav { padding-left: 0; list-style: none; width: 100%; margin-bottom: 40px; }
            ul#nav:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
            
                #responsive-menu ul#nav li { float: left; width: 20%; text-align: center; }
                #responsive-menu ul#nav a { 
                        display: block; 
                        background: #000;
                        color: #FFF; 
                        font-weight: bold; 
                        padding: 10px; 
                        border-right: 1px solid #FFF;
                }
                #responsive-menu ul#nav a:hover { background: #333; }

        .open {
            display: none;
            float: left;
            width: 40px;
            height: 30px;
            margin-right: 10px;
            background: url(images/menu.png) center center no-repeat #333;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -border-radius: 8px;
            box-shadow: inset 0 0 3px #000;
            text-indent: -999999px;
            border: 0;
        }
        
        /* Media Queries
        * 
        * Note: Please don't base your responsive design off of this code. It is just here for demo purposes.
        * Rather, grab yourself a copy of Ethan's book: http://www.abookapart.com/products/responsive-web-design
        ================================================== */
        
       
     /* Mobile Landscape and Portrait */
     @media only screen and (max-width: 767px) {
        
         #responsive-menu h1 { font-size: 22px; line-height: 30px; background-color: #000; color: #FFF; padding: 10px; }
         #responsive-menu ul#nav { display: none; }
         
         .open { display: block; }
         #pageslide { width: 200px; }
             #pageslide #nav li { padding: 10px 0; border-bottom: 1px solid #666; }
             #pageslide #nav li a { color: #FFF; border: none; }
             #pageslide #nav li a:hover { text-decoration: underline; }
     }
     
     /* Mobile Portrait */
        @media only screen and (max-width: 479px) {
            #responsive-menu { width: 280px; }
            #responsive-menu h1 { font-size: 14px; }
        }
   
   

ADD Javascript

 
    
   $(".open").pageslide();
   
   

ADD these in footer

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="https://code.jquery.com/jquery-1.10.2.js">
<script src="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/js/jquery.pageslide.min.js"></script>

Click here to Download Code Download