Pages

Ads 468x60px

For New Update Use this Link http://dotnethubs.blogspot.in/

Tuesday, 16 April 2013

simple Menu using Jquery Beginners Tutorial

simple Menu using Jquery Beginners Tutorial in html from
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.

Download sample code attached






create simple drop down menu using jquery

No comments:

Post a Comment

 

..

New Updates

Related Posts Plugin for WordPress, Blogger... View My Stats

Related Result