Contact me See Resume

Responsive Menu with Sticky Header - nareshonline.com

Responsive Menu with Sticky Header

Catagory : jQuery Posted : November, 09, 2018

Hello friends, this tutorial will help you to make the Responsive Menu with Sticky Header using media query without using any framework.

In this tutorial I am using jQuery for handling events.

Step 1 :

First we create our HTML Markup :

<!DOCTYPE html>
  <html lang="en">
  <head>
  <title>responsive-menu</title>
  <style type="text/css" href="style.css"></style>
  </head>
  <body>
    <div class="container">
      <header class="head">
        <h1>accessmyzone.com</h1>
        <p>Tutorial for Responsive nagivation</p>
      </header>
      <span class="trigger">MENU</span>
      <div style="clear:both;"></div>
      <div  class="nav-menu">
        <ul>
          <li>MENU-1</li>
          <li>MENU-2</li>
          <li>MENU-3</li>
          <li>MENU-4</li>
          <li>MENU-5</li>
        </ul>
      </div>
    </div>
  </body>
  </html>

Step 2 :

Now  we will style our HTML using CSS  by creating a file called style.css in our route directory :

*{
 margin: 0;
 padding:0;
}
body{
 margin: 50px 0px;
 padding:0px;
 background: #ccc;
 font-family: sans-serif;
}
.container{
 margin: 0 auto;
 max-width: 960px;
 height: auto;
 background: #fff;
 box-shadow: 5px 0px 10px #888888;
}
header{
 background: #0d4fbd;
 padding: 50px;
 color: #f7c80e;
 width: 960px;
 box-sizing:border-box;
 /*transition-timing-function: 2s;*/
}
.trigger{
 padding: 10px;
 max-width: 960px;
 float: right;
 background: #e0e0e0;
 cursor: pointer;
 display: none;
 z-index: 99999999;
}
.red{
 color:#f00;
 font-weight: bold;
}
div.nav-menu ul{
 list-style-type: none;


}
div.nav-menu ul li{
 background: #377beb;
 padding: 25px;
 width: 20%;
 float: left;
 box-sizing:border-box;
 z-index: 999;
 text-align: center;
 transition : all 0.5s;
 cursor: pointer;

}
div.nav-menu ul li:hover{
 background: #0953a7;
 color: #fff;

}
.content1{
 width: 100%;
 height: auto;
 padding: 50px;
 margin-bottom: 50px;
 line-height: 1.67;
 border-bottom: 1px solid;
 box-sizing:border-box;
}
.content1:last-child{
 border-bottom: none;
}
.content1 p{
 margin-bottom: 20px;
 text-align: justify;
}
@media screen and (max-width: 640px){
div.nav-menu ul li{
 float: none;
 display: block;
 width: 100%;
 z-index: 222;
 text-align: left;
 border-bottom: 1px solid;
}
div.nav-menu{
 display: none;
 }
div.nav-menu ul li:last-child{
 border-bottom: none;
}
.trigger{
 display: block;
}
div.expand{
 display:block;
}

}
div.content1 p.main{
 font-weight: bold;
 color: #0d4fbd;
}
div.content1 p:last-child{
 text-align: center;
}
div.content1 p textarea{
 width: 100%;
 height: 200px;
}
footer{
 padding: 20px;
 color: #888;
}
.goToTop {
  position: fixed;
  max-width: 960px;
  top: 0;
  padding: 0px 0 0 50px;
  height: 70px;
  z-index: 1; 
  border-radius:0px;
  box-shadow: 0px 4px 10px #888888;
  transition: all 0.1s;
}

Step 3 :

At last we will add  interactivity by using javascript liberary jQquery :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.trigger').click(function(){
    $('.nav-menu').slideToggle(500, function(){
      $(this).toggleClass("expand").css('display', '');
    });
  });	
// predefined function to get numbering in textarea 
$(function() {
  $(".lined").linedtextarea(
    {selectedLine: 1}
  );
});
// for fixed header
$(window).scroll(function(){
  var sticky = $('#tofix');	
  var scroll = $(window).scrollTop();
  if (scroll >= 100) {

  	sticky.addClass('goToTop');
  	
  }
  else {
  	sticky.removeClass('goToTop');
  }
});
});
</script>

 

 

 

 

Leave a Reply

You have to agree to the comment policy.