PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Mon Nov 24, 2014 1:19 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Menu
PostPosted: Thu Mar 08, 2012 5:11 pm 
Offline
Forum Contributor

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


Top
 Profile  
 
 Post subject: Re: Menu
PostPosted: Tue Mar 13, 2012 2:38 am 
Offline
Forum Contributor

Joined: Fri Dec 24, 2010 1:48 am
Posts: 143
Location: India
HI check this link
1.http://stackoverflow.com/questions/8706488/multilevel-dropdown-menu-issues-with-jquery
2.http://jsfiddle.net/MkR7W/3/
Hope it will give u an idea for solve this pblm.


Top
 Profile  
 
 Post subject: Re: Menu
PostPosted: Tue Mar 13, 2012 5:33 am 
Offline
Forum Contributor

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


Top
 Profile  
 
 Post subject: Re: Menu
PostPosted: Tue Mar 13, 2012 7:43 am 
Offline
Forum Contributor

Joined: Fri Dec 24, 2010 1:48 am
Posts: 143
Location: India
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


Top
 Profile  
 
 Post subject: Re: Menu
PostPosted: Sun Mar 18, 2012 12:53 pm 
Offline
Forum Contributor

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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group