Tuesday, 16 May 2017

Navigation Drawer Code Example using html ,css & jquery code

(1)write jquery code for  jquery.hamburger.js :


/* global jQuery */
(function ($) {
  'use strict';

  var action = $('.hamburger-action'),
    hamburger = $('#hamburger'),
    content = $('#content'),
    overlay = $('<div>').attr({
      id: 'hamburger-overlay',
    }).insertAfter(content),
    nav = $('nav'),

    onClick = function() {
      var contentWidth = content.width(),
        current = nav.css('margin-left'),
        val = '0%',
        layer = 'block',
        opacity = 0.5,
        ham = -10;

      content.css('width', contentWidth);
      if(current === '0px') {
        val = '-70%';
        layer = 'none';
        opacity = 0;
        ham = 0;
      } else {
        overlay.css('display', layer);
      }

      nav.animate({'margin-left': [val]}, {
        duration: 700
      });

      hamburger.animate({'left': [ham]}, {
        duration: 700
      });

      overlay.animate({'opacity': [opacity]}, {
        duration: 700,
        complete: function() {
          overlay.css('display', layer);
        }
      });
    };

  action.click(onClick);
  overlay.click(onClick);
  hamburger.click(onClick);
}(jQuery));


(2) write code for style.css file:

body {
  margin: 0;
  padding: 0;
  background: #eee;
  overflow-x: hidden;
}

a { text-decoration: none; }

.title {
  float: left;
  color: #fff;
  position: relative;
  top: 1px;
}

.clear { clear: 'both'; }

#circle {
  margin-top: 20px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 300px;
  height: 300px;
  background: #f86057;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  border-radius: 150px;
  color: #fff;
  font-size: 60px;
}

header {
  background-color: #5EA97F;
  padding: 10px 10px 10px 0px;
  text-decoration: none;
  position: fixed;
  width: 100%;
  z-index: 5;
}

#content {
  background-color: #eee;
  padding: 52px 10px 10px 10px;
  position: relative;
  width: auto;
  min-height: 1000px;
  -webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
  box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}

nav {
  top: 40px;
  margin-left: -70%;
  position: fixed;
  z-index: 2;
  width: 70%;
  height: 100%;
  background: #FFF;
}

nav ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}

nav li {
  position: relative;
  padding: 25px;
}

nav li a {
  color: #222;
  text-decoration: none;
}

#hamburger {
  cursor: pointer;
  display: block;
  height: 20px;
  position: relative;
  width: 20px;
  float: left;
  padding-right: 10px;
}

#hamburger div {
  background-color: #fff;
  height: 3px;
  margin-top: 3px;
  width: 90%;
}

.hamburger-action { cursor: pointer; }

#hamburger-overlay {
  display: none;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  background: #000;
}

(3)write code for  index.html file:
<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    <title>jQuery  Plugin Demo</title>
</head>

<body>
    <div id="container">
        <header>
            <div id="hamburger">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="title hamburger-action" data-i18n='app-title'>Android Tutorials</div>
        </header>
        <nav class="clear">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="androidlayout.html">Android Layout</a></li>
    <li><a href="eventhandling.html">Event Handling</a></li>
    <li><a href="intent.html">Intent</a></li>
    <li><a href="fragment.html">Fragment</a></li>
  </ul>
</nav>
        <div id="content">
         <h1>What is Android?</h1>
<p><h3>Before learning all topics of android, it is required to know what is android.
Android is a software package and linux based operating system for mobile devices such as tablet computers and smartphones.
It is developed by Google and later the OHA (Open Handset Alliance). Java language is mainly used to write the android code even though other languages can be used.
The goal of android project is to create a successful real-world product that improves the mobile experience for end users.
There are many code names of android such as Lollipop, Kitkat, Jelly Bean, Ice cream Sandwich, Froyo, Ecliar, Donut etc which is covered in next page.</h3></p>


</script></div>
        </div>
    </div>

   
     <script src="jquery.min.js"></script>
    <script src="jquery.hamburger.js"></script>

</body>
</html>

Output:



Recent Posts

Powered by Blogger.

Pages

About Me

My Photo
B.E.(COMPUTER ENGINEER) PHP Web developer & Provide Training for Web Development , Digital Marketing ,Android Mobile Apps Development

 

© 2013 ANDROID TRAINING IN MUMBAI BY OM SIR. All rights resevered. Designed by Templateism

Back To Top