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

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by chrisrac, Nov 22, 2013.

  1. chrisrac

    chrisrac New Member

    Messages:
    4
    Likes Received:
    0
    Trophy 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;
    }
    
     
  2. mattstut

    mattstut New Member

    Messages:
    9
    Likes Received:
    0
    Trophy 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: Nov 23, 2013

Share This Page