Page 1 of 1

Menu

Posted: Thu Mar 08, 2012 4:11 pm
by YoussefSiblini
Hi guys,

I am trying to learn Jquery, I usually try to build every thing by myself as I think it is the best way to learn, but I am in a rush for this :)
I am trying to build a drop down menu, here is the code:

HTML

Code: Select all

<ul id="nav">
    <li><a href="#" class="selected">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Pages +</a>
        <ul>
            <li style="border-top:0px;"><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Features +</a>
    <ul>
        <li style="border-top:0px;"><a href="#">Feature 1</a></li>
        <li><a href="#">Feature 2</a></li>
        <li><a href="#">Feature 3</a></li>
        <li><a href="#">Feature 4</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div class="clear"></div>
CSS

Code: Select all

body {font-family:arial; font-size:12px; background:#F1F1F1;}
.clear {clear:both} 
/* remove the list style */
#nav {
    margin:0; 
    padding:0; 
    list-style:none;
}   
     
    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        float:left; 
        display:block; 
        position:relative;
        z-index:500; 
        margin:0 1px;
    }
         
    /* this is the parent menu */
    #nav li a {
        display:block; 
        padding:10px; 
        font-weight:700;  
        height:23px; 
        text-decoration:none; 
        color:#333333; 
        text-align:center; 
        color:#333;
    }
 
    #nav li a:hover {
        color:#FF9921;
    }
     
    /* you can make a different style for default selected value */
    #nav a.selected {
        color:#FF9921;
    }
     
        /* submenu, it's hidden by default */
        #nav ul {
            position:absolute; 
            left:0; 
            display:none; 
            margin:0 0 0 -1px; 
            padding:0; 
            list-style:none;
        }
         
        #nav ul li {
            float:left; 
            border-top:1px solid #fff;
			background:#d7d7d7;
        }		
        /* display block will make the link fill the whole area of LI */
        #nav ul a {
            display:block;  
            height:15px;
            padding:10px; 
            color:#666;
        }
         
        #nav ul a:hover {
            text-decoration:underline;  
        }
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}
JAVASCRIPT

Code: Select all

<script type="text/javascript">
$(document).ready(function () { 
     
    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);
 
        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );	
     
});
</script>
OK this is working fine but what I want to to do is add a submenu into the submenu, like UL slide out when user hover over submenu feature 2.
Other thing I am not understanding is what is the use of <div class="clear"></div> in the above code.

Re: Menu

Posted: Tue Mar 13, 2012 2:38 am
by Gopesh
HI check this link
1.http://stackoverflow.com/questions/8706 ... ith-jquery
2.http://jsfiddle.net/MkR7W/3/
Hope it will give u an idea for solve this pblm.

Re: Menu

Posted: Tue Mar 13, 2012 5:33 am
by YoussefSiblini
Thank you :)
I sorted it out, it took a while to get it working but got it at the end, now I can build full menu by my self :) happy about that lol



Youssef

Re: Menu

Posted: Tue Mar 13, 2012 7:43 am
by Gopesh
ok,glad to see that pblm is solved.Can u post the solved code here,so other users can also get it with easy.Good Luck

Re: Menu

Posted: Sun Mar 18, 2012 12:53 pm
by YoussefSiblini
Yes, sure here is what I used, hope that every thing is OK as I am still learning lol

HTML

Code: Select all

              <ul id="nav">
                  <li><a href="index.html">Home</a></li>
                  <li><a href="about.html" class="selected">About</a></li>                            
                  <li><a href="#">Drops +</a>
                      <ul>
                                
                          <li style="border-top:0px;"><a href="#">Drops +</a>
                              <ul>
                                  <li style="border-top:0px;"><a href="#">One</a></li>
                                  <li><a href="#">Two</a></li>
                                  <li><a href="#">Three</a></li>
                                  <li><a href="#">Four</a></li>
                              </ul>
                              <div class="clear"></div>
                          </li>
                                    
                          <li><a href="#">One</a></li>
                          <li><a href="#">Two</a></li>
                          <li><a href="#">Three</a></li>
                      </ul>         
                      <div class="clear"></div>
                  </li>
                            
                  <li><a href="#">Portfolio +</a></li>
                  <li class="common_LastColumn"><a href="contact.html" style="padding-right:0 !important">Contact</a></li>
              </ul>
JavaScript

Code: Select all

    $(document).ready(function () { 
     
        $('#nav li').hover(
            function () {
                //show its submenu
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(300);
 
            }, 
            function () {
                //hide its submenu
                $(this).find('ul:first').slideUp(100);         
            }
        );
     
    });
    // this is for the dropdawn menu
    $(document).ready(function () { 
	    $('#nav ul li').hover(
            function () {
                $(this).find('ul:first').css({visibility: "visible"}).slideDown(300);;
 
            }, 
            function(){
		    $(this).find('ul:first').css({visibility: "hidden"});
		    });
    });
CSS

Code: Select all

#nav {
    margin:0; 
    padding:0; 
    list-style:none;
	float:right;
}   
#nav li {
    float:left; 
    display:block; 
    position:relative;
    z-index:500; 
    margin:0 1px;
}
#nav li a {
    display:block; 
    padding:10px; 
    font-weight:700;  
    height:23px; 
    text-decoration:none; 
    color:#333333; 
    text-align:center; 
    color:#333;
}
#nav li a:hover {
    color:#FF9921;
}
     
#nav a.selected {
    color:#FF9921;
}
#nav ul {
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none;
}
         
#nav ul li {
    float:left; 
    border-top:1px solid #fff;
	background:#d7d7d7;
	width:150px;
}		
#nav ul a {
    display:block;  
    height:15px;
    padding:10px; 
    color:#666;
}
#nav ul a:hover {
    text-decoration:underline;  
 }
*html #nav ul {
    margin:0 0 0 -2px;
}
#nav ul ul{
	top:auto;
	}
#nav li ul ul {
	top:0px;
    left:140px;
    margin:0px 0 0 10px;
	visibility:hidden;
    }
#nav li ul ul li {
    width:150px;
    }
#nav li ul ul li a {
    padding:10px;
    }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }