#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0

    Need Help with Simple Toggle Dropdown jQuery Script


    Hi, I know very little jquery and am trying to write/edit a script that will allow a drop down section, such as on this site, when you click a nav link:

    http://www.navigationarts.com/user-experience/information-architecture

    However, I just need the drop down to occur on the Salon page at http://www.debbierking.com/ks. For now, its just a gray box that drops down...eventually it will contain photos.

    I want it to have a nice ease the way the dropdown in the Navigation Arts site works. Here's my code:

    HTML for the menu:

    Code:
    <nav>
             <p class="access"><a href="#content">Skip navigation</a></p>
        
          <ul>
                   <li id="ks_home"><a href="index.php">home</a></li>
                   <li id="ks_about"><a href="about.php">about</a></li>
                   <li id="ks_svcs"><a href="services.php">services</a></li>	
                   <li id="ks_prod"><a href="products.php">products</a></li>
                   <li id="ks_spec"><a href="specials.php">specials</a></li>
                   <li id="ks_salon"><a href="salon.php">salon</a></li>     		 		
                   <li id="ks_cont"><a href="contact.php">contact</a></li>
          </ul>
    </nav>

    HTML for the Salon page (where the dropdown section will occur):

    Code:
    <div id="dropdown"></div>
    CSS for the Salon page:

    Code:
    #dropdown {
    	background-color: #666;
    	clear: both;
    	height: 200px;
    	position: relative;
    	top: -37px;
    }

    And finally, the jQuery:

    Code:
    <script src="js/jquery-1.8.1.min.js"></script>
      <script> 
     $(document).ready(function() {
       $('#dropdown').hide();
         
         
         $('li#ks_salon a').click(function(){
         $('div#dropdown').ease(2000);
       });
         
          $('li#ks_salon a').click(function(){
        $('div#dropdown').hide();
       });
    </script>
    I know this is pretty simple...am just not getting it. Thanks!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Hi again...I'm looking to get this nailed down...is there any jQuery guru out there that can help me with this? Just need a simple ease drop down section for photos when the menu button is clicked. Am not sure why the script I have isn't working...Can someone please help?
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    192
    Rep Power
    31
    Hi. Turns out to be not as simple as it seems.

    Each dropdown boxes in Navigation Arts have different content, so where you should put them?
    You could copy HTML structure used by Nav.Arts but if I were you I would use the following:
    Code:
    <nav>
      <p class="access"><a href="#content">Skip navigation</a></p>
        <ul>
          <li id="ks_home">
            <a href="index.php">home</a>
            <div>dropdown content for home</div>
          </li>
            <li id="ks_about">
              <a href="about.php">about</a>
              <div>dropdown content for about</div>
            </li>
            <li id="ks_svcs">
              <a href="services.php">services</a>
              <div>dropdown content for services</div>
            </li>
            <!-- and so on... -->
          </ul>
    </nav>
    Those additional <div>s would never be shown, they're there just to store the content of the actual dropdown. So define their CSS as follows:
    Code:
    #container > header > nav > ul > li > div{
      display: none;
    }
    And since you've already define the HTML and CSS for #dropdown, we could define jQuery for each menus, like the following:
    Code:
    <script src="js/jquery-1.8.1.min.js"></script>
    <script>
      var currMenu = null;
      $(document).ready(function(){
        $('#container > header > nav > ul > li > a').click(function(e){
          e.preventDefault();
          if (currMenu == $(this)[0]){
            $('#dropdown').slideToggle();
          }
          else{
            if ($('#dropdown').is(':visible')) $('#dropdown').slideUp();
            $('#dropdown')
              .html($('this').parent().children('div').html())
              .slideDown();
            currMenu == $(this)[0];
          }
        });
      });
    </script>
    NB: no tests have been performed for codes above .
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Originally Posted by hdewantara
    Hi. Turns out to be not as simple as it seems.

    Each dropdown boxes in Navigation Arts have different content, so where you should put them?
    You could copy HTML structure used by Nav.Arts but if I were you I would use the following:
    Code:
    <nav>
      <p class="access"><a href="#content">Skip navigation</a></p>
        <ul>
          <li id="ks_home">
            <a href="index.php">home</a>
            <div>dropdown content for home</div>
          </li>
            <li id="ks_about">
              <a href="about.php">about</a>
              <div>dropdown content for about</div>
            </li>
            <li id="ks_svcs">
              <a href="services.php">services</a>
              <div>dropdown content for services</div>
            </li>
            <!-- and so on... -->
          </ul>
    </nav>
    Those additional <div>s would never be shown, they're there just to store the content of the actual dropdown. So define their CSS as follows:
    Code:
    #container > header > nav > ul > li > div{
      display: none;
    }
    And since you've already define the HTML and CSS for #dropdown, we could define jQuery for each menus, like the following:
    Code:
    <script src="js/jquery-1.8.1.min.js"></script>
    <script>
      var currMenu = null;
      $(document).ready(function(){
        $('#container > header > nav > ul > li > a').click(function(e){
          e.preventDefault();
          if (currMenu == $(this)[0]){
            $('#dropdown').slideToggle();
          }
          else{
            if ($('#dropdown').is(':visible')) $('#dropdown').slideUp();
            $('#dropdown')
              .html($('this').parent().children('div').html())
              .slideDown();
            currMenu == $(this)[0];
          }
        });
      });
    </script>
    NB: no tests have been performed for codes above .
    Hmmm....trying to figure this out. I am only using this on *one* page..the Salon page...no drop downs needed for the other pages, so I only want it to work for the one page.

    I thought this would just need a simple toggle script like this...this works just fine in a simple class lesson I took in jQuery a couple of years ago but is not working for this site.

    <script>
    $(document).ready(function() {

    $("#nav li#ks_salon a").click(function() {
    $("#dropdown").slideToggle();
    });

    });
    </script>
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    192
    Rep Power
    31
    Oh sorry.
    I forgot to add comments. I hope this time it's clearer.
    PHP Code:
    <script>

      
    // this holds the last menu clicked by a user
      
    var currMenu null

      $(
    document).ready(function(){
        
        
    // for each menu links, install click event handler which...
        
    $('#container > header > nav > ul > li > a').click(function(e){

          
    // won't jump to linked page. Then...
          
    e.preventDefault();

          
    // if user click the same menu as the last time, hide or show the dropdown.
          
    if (currMenu == $(this)[0]){
            $(
    '#dropdown').slideToggle();
          }

          
    //But if user click different menu,
          
    else{

            
    // hide the dropdown first,
            
    if ($('#dropdown').is(':visible')) $('#dropdown').slideUp();

            
    // then copy the content of the div to the dropdown (which is a sibling to the link), then show the dropdown.
            
    $('#dropdown')
              .
    html($('this').parent().children('div').html())
              .
    slideDown();

            
    // Don't forget to save the currently clicked menu.
            
    currMenu == $(this)[0];
          }
        });
      });
    </script> 
    Last edited by hdewantara; October 10th, 2012 at 01:09 AM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Thanks for all the explanations

    How would I do the CSS for just the Salon page?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    It's still not working, but don't worry anymore about it ...thanks for your help. I'm just not going to do this. Thanks!!

IMN logo majestic logo threadwatch logo seochat tools logo