Tuesday, 16 May 2017

Navigation Drawer Code Example using html ,css & jquery code

07:21

(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:



Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

1 comments:

 

© 2013 ANDROID TRAINING AT VISSICOMP BY OM SIR. All rights resevered. Designed by Templateism

Back To Top