[jQuery, CSS, HTML] On click dropdown menu help ?

chrisrac

New Member
Messages
4
Reaction score
0
Points
1
Hey there,

I am currently on working on a content management system and am wanting to create a dropdown menu on click for the front end of the website however I can't appear to get it working I believe that the problem lies somewhere in the jQuery as I'm choosing the wrong CSS elements (don't have a great understanding as to how it works). Any help would be appreciated :)
The HTML/PHP
Code:
<nav>
           <ul>
             <li>Navigation
               <ul>
                 <?php foreach ($navitems as $nav) { ?>
                   <li><a href="<?php echo $nav['navigation_link']; ?>"><?php echo $nav['navigation_title']; ?></a></li>
                 <?php } ?>
               </ul>
             </li>
           </ul> 
</nav>
The jQuery:
Code:
        $('nav ul > li').click(function() {
     $('nav ul > ul').css('display','none');
     $(this).find('ul').css('display','block');
     return false;
     });
The CSS:
Code:
nav ul ul {
display: none;
}
nav ul {
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
list-style: none;
position: absolute;
text-align: left;
right: 20px;
cursor: pointer;
width: 150px;
font-size: 20px;
line-height: 30px;
font-family: 'Keania One',cursive;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 5px;
}
nav ul:after {
content: ""; 
clear: both; 
display: block;
}

nav ul li {
    float: left;
}
nav ul li:hover {
}
nav ul li:hover a {
color: #fff;
}
   
nav ul li a {
display: block; 
padding: 25px 40px;
color: #757575; 
text-decoration: none;
}
nav ul ul {
background: #5f6975; 
border-radius: 0px; 
padding: 0;
position: absolute; 
top: 100%;
}
nav ul ul li {
float: none; 
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}   
nav ul ul li a:hover {
background: #4b545f;
}
 

mattstut

New Member
Messages
9
Reaction score
0
Points
1
maybe try something like this
Code:
<nav>
          <ul>
            <li id="button">Navigation</li>
              <ul id="list" class="hide">
                <?php foreach ($navitems as $nav) { ?>
                  <li><a href="<?php echo $nav['navigation_link']; ?>"><?php echo $nav['navigation_title']; ?></a></li>
                <?php } ?>
              </ul>
            </li>
          </ul>
</nav>
Code:
  $('#button').click(function() {
    $('#list').toggle();


    });
add this to the css and just the styling
Code:
.hide{
display:none;
}
 
Last edited:
Top