This article is to teach how to create drop down menu in html.I am not going to design a
graphical pull down menu. Instead I am trying to reveal the basic construction of pull down
menu.
When creating menus using jquery only the hiding and pop up of menu is handled by jquery. The
actual layout is created using css. Creating drop down menus in css means align a <ul> and
it's child <ul> using css,because the pull down menu is constructed using a <ul>.So code for
creating menu in html includes css and jquery.
You can see a demo of resultant menu here
Code is Here
<html>
<head>
<style type="text/css">
*{ margin: 0;
padding: 0}
#menu{
z-index:5;
}
a{
text-decoration:none;
}
#menu li
{ float: left;
list-style: none;
}
#menu li a
{ display: block;
}
#menu li ul
{
position: absolute;
display: none;
}
#menu li ul li
{ float: none;
display: inline
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});
$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a>Menu1</a>
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://newprograminglogics.blogspot.com">My Blog</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="http://www.gmail.com">GMail</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
</ul>
</li>
</ul><br>
</body>
</html>
Code description
The pull down menu is actually a <ul> that is unordered list. Here in the <body>
section I have placed a <ul> with id="menu". As seen in the demo above in this page,
here have two menus namely Menu1 and Menu2.
This Menu1 and Menu2 are links(<a>) placed in <li> of <ul> with id="menu". Besides this link
there have another <ul> in each <li>. The menu items are placed in the <li> of this child <ul>.
This <ul> without applying css is displayed just like a list. But using some simple css
commands we can convert it into a menu form.
*{ margin: 0;
padding: 0}
This code is for remove margin and padding from all elements.
#menu{
z-index:5;
}
Is used to place the menu above all elements in page.
a{
text-decoration:none;
}
Is use to remove the under line from links.
In the code segment :-
#menu li
{ float: left;
list-style: none;
}
float : left place the li of ul side by side.In default it is from top to bottom, that is vertically.
list-style: none removes the dots (.) from the front of each item.
#menu li a
{ display: block;
}
Is for display each item as a block.
#menu li ul
{
position: absolute;
display: none;
}
Here position: absolute is for place the menu items exactly below menu heading
irrespect of other elements in the page.
display: none is for hide this contents initially.The menu items will be displayed only
after mouse entered in menu heading.
#menu li ul li
{ float: none;
display: inline
}
Here float: none is for remove the float to left property of child <ul>'s <li>, which is
set in #menu li by{ float: left}
Because here that does not require because the menu items should be displayed in vertical manner.
display: inline set the menu items vertically.
The alignment of menu is over.Now we go through the jquery section which displays and hide
the menu items.
$("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});
This code will display the child ul,that is our menu items.The parent <ul>s <li>s
mouseenter event is defined with setting child <ul>'s display property to inline.Note
that this is set to display:none initially in the css section.$(this).find(ul)
will get the child element. .css() is a jquery library function used to change css
property of certain elements.
One more thing remain is that we need to hide the menu item again when mouse is come out from the menu items. That is done by this code
$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
This is just like above code. mouseleave event is used to detect the disappearence of mouse
pointer. $(this).find('ul') will give the child <ul> then display : none is used
to hide the menu items.
create simple drop down menu using jquery
graphical pull down menu. Instead I am trying to reveal the basic construction of pull down
menu.
When creating menus using jquery only the hiding and pop up of menu is handled by jquery. The
actual layout is created using css. Creating drop down menus in css means align a <ul> and
it's child <ul> using css,because the pull down menu is constructed using a <ul>.So code for
creating menu in html includes css and jquery.
You can see a demo of resultant menu here
<html>
<head>
<style type="text/css">
*{ margin: 0;
padding: 0}
#menu{
z-index:5;
}
a{
text-decoration:none;
}
#menu li
{ float: left;
list-style: none;
}
#menu li a
{ display: block;
}
#menu li ul
{
position: absolute;
display: none;
}
#menu li ul li
{ float: none;
display: inline
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});
$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a>Menu1</a>
<ul>
<li><a href="http://www.facebook.com">Facebook</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://newprograminglogics.blogspot.com">My Blog</a></li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li><a href="http://www.gmail.com">GMail</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
</ul>
</li>
</ul><br>
</body>
</html>
Code description
The pull down menu is actually a <ul> that is unordered list. Here in the <body>
section I have placed a <ul> with id="menu". As seen in the demo above in this page,
here have two menus namely Menu1 and Menu2.
This Menu1 and Menu2 are links(<a>) placed in <li> of <ul> with id="menu". Besides this link
there have another <ul> in each <li>. The menu items are placed in the <li> of this child <ul>.
This <ul> without applying css is displayed just like a list. But using some simple css
commands we can convert it into a menu form.
*{ margin: 0;
padding: 0}
This code is for remove margin and padding from all elements.
#menu{
z-index:5;
}
Is used to place the menu above all elements in page.
a{
text-decoration:none;
}
Is use to remove the under line from links.
In the code segment :-
#menu li
{ float: left;
list-style: none;
}
float : left place the li of ul side by side.In default it is from top to bottom, that is vertically.
list-style: none removes the dots (.) from the front of each item.
#menu li a
{ display: block;
}
Is for display each item as a block.
#menu li ul
{
position: absolute;
display: none;
}
Here position: absolute is for place the menu items exactly below menu heading
irrespect of other elements in the page.
display: none is for hide this contents initially.The menu items will be displayed only
after mouse entered in menu heading.
#menu li ul li
{ float: none;
display: inline
}
Here float: none is for remove the float to left property of child <ul>'s <li>, which is
set in #menu li by{ float: left}
Because here that does not require because the menu items should be displayed in vertical manner.
display: inline set the menu items vertically.
The alignment of menu is over.Now we go through the jquery section which displays and hide
the menu items.
$("#menu > li").mouseenter(function(){
$(this).find('ul').css('display', 'inline');
});
This code will display the child ul,that is our menu items.The parent <ul>s <li>s
mouseenter event is defined with setting child <ul>'s display property to inline.Note
that this is set to display:none initially in the css section.$(this).find(ul)
will get the child element. .css() is a jquery library function used to change css
property of certain elements.
One more thing remain is that we need to hide the menu item again when mouse is come out from the menu items. That is done by this code
$("#menu > li").mouseleave(function(){
$(this).find('ul').css('display', 'none');
});
});
This is just like above code. mouseleave event is used to detect the disappearence of mouse
pointer. $(this).find('ul') will give the child <ul> then display : none is used
to hide the menu items.
Download sample code attached
create simple drop down menu using jquery
No comments:
Post a Comment