Menu

JavaScript and client side scripting.

Moderator: General Moderators

Menu

Postby YoussefSiblini » Thu Mar 08, 2012 5:11 pm

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
Syntax: [ Download ] [ Hide ]
<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
Syntax: [ Download ] [ Hide ]
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
Syntax: [ Download ] [ Hide ]
<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.
YoussefSiblini
Forum Contributor
 
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Menu

Postby Gopesh » Tue Mar 13, 2012 2:38 am

Anyone can write code that a computer can understand. Good programmers write code that humans can understand.
Gopesh
Forum Contributor
 
Posts: 143
Joined: Fri Dec 24, 2010 1:48 am
Location: India

Re: Menu

Postby YoussefSiblini » Tue Mar 13, 2012 5:33 am

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
YoussefSiblini
Forum Contributor
 
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Menu

Postby Gopesh » Tue Mar 13, 2012 7:43 am

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
Anyone can write code that a computer can understand. Good programmers write code that humans can understand.
Gopesh
Forum Contributor
 
Posts: 143
Joined: Fri Dec 24, 2010 1:48 am
Location: India

Re: Menu

Postby YoussefSiblini » Sun Mar 18, 2012 12:53 pm

Yes, sure here is what I used, hope that every thing is OK as I am still learning lol

HTML
Syntax: [ Download ] [ Hide ]
              <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

Syntax: [ Download ] [ Hide ]
    $(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

Syntax: [ Download ] [ Hide ]
#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;
    }
 
YoussefSiblini
Forum Contributor
 
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm


Return to Javascript

Who is online

Users browsing this forum: No registered users and 3 guests