So friends today I am going to tell you people about how to add icon menu based on Java and Jquery.
First of all develop a html page consisting of:
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="Any image" />
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
</div>
</body></div>
Now you need to add two java files in body,by using script tag<script src="
"></script>,use two tags for two files.
These are,one is that you willl develop other one is the jquery whick makes java programming easier.
jquery link-http://code.jquery.com/jquery-2.2.2.min.js
Other one is
var main=function(){
$('.icon-menu').click(function()
{
$('.menu').animate({
left: '0px'},200);
$('body').animate({
left:'285px'
},200);
});
$('.icon-close').click(function()
{
$('.menu').animate({
left:'-285px'
},200);
$('body').animate({
left:'0px'},200);
});
};
$(document).ready(main);
You need to save this file as app.js
Also you need to add a CSS file:
/* Initial body */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('any image');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
Here is our java programming complete.
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="Any image" />
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
</div>
</body></div>
Now you need to add two java files in body,by using script tag<script src="
"></script>,use two tags for two files.
These are,one is that you willl develop other one is the jquery whick makes java programming easier.
jquery link-http://code.jquery.com/jquery-2.2.2.min.js
Other one is
var main=function(){
$('.icon-menu').click(function()
{
$('.menu').animate({
left: '0px'},200);
$('body').animate({
left:'285px'
},200);
});
$('.icon-close').click(function()
{
$('.menu').animate({
left:'-285px'
},200);
$('body').animate({
left:'0px'},200);
});
};
$(document).ready(main);
You need to save this file as app.js
Also you need to add a CSS file:
/* Initial body */
body {
left: 0;
margin: 0;overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('any image');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
Here is our java programming complete.