SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi-level dropping reveal on click and not rollover

    I have googled and searched and the examples are not that good, so wondered if anyone had a link to a good tutorial.

    Basically I need a horizontal drop down that reveals the lower levels on click rather than rollover.

    There needs to be three levels off the main button, so Button 1 on click reveals 4 Buttons then on click more buttons are revealed, and they all need to stay open until they go by clicking outside of the buttons.

  2. #2
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive found something and tried it and it doesnt seem to work.

    The parent button is still revealing the child button on rollover rather than on click.

    Code:
    #Drop_down_wrapper {
        width:810px;
        background: #333333;
        height: 25px;
        }
    
    #Drop_down_wrapper ul > li {
        float: left;
        line-height: 25px;
        }    
    
    #Drop_down_wrapper ul > li a{
        padding: 9px 16px;
        color: #F09909;
        font-size: 15px;
        font-weight: bold;
        }    
        
    ul li a:hover {
        background: #222222;    
        }        
        
    ul li ul {
        display: none;
        position: absolute;
        border: 1px solid #000000;
        border-top: none;
        background: #333333;    
        }
        
    ul li ul li {
        float: none !important;
        margin: 0 !important;
        line-height: 30px;
        height: 38px;
        }
        
    ul li ul li a {
        color: green !important;
        }
    
    <script type="text/javascript">
    $(document).ready(function(){
    $('#Drop1').click(function () {
               $("#sub-menu1").toggle('wiggle');
               $('#sub-menu2').hide('wiggle');    
               $('#sub-menu3').hide('wiggle');               
            });
    $('#Drop2').click(function () {
               $("#sub-menu2").toggle('wiggle');
               $('#sub-menu1').hide('wiggle');
               $('#sub-menu3').hide('wiggle');               
            });
    $('#Drop3').click(function () {
               $("#sub-menu3").toggle('wiggle');
               $('#sub-menu2').hide('wiggle');
               $('#sub-menu1').hide('wiggle');                      
    
            });                
    });
    </script>
    <script src="js/jquery-1.10.1.min.js"></script>
    
    <div id="Drop_down_wrapper">
      <ul>
        <li><a href="#" id="Drop1" class="Current">Location</a>
          <ul id="sub-menu1">
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
            <li><a href="#">Parent 1 &raquo; Child 1</a></li>
          </ul>
        </li>
        <li><a href="#" id="Drop2">Information</a>
          <ul id="sub-menu2">
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
            <li><a href="#">Parent 2 &raquo; Child 2</a></li>
          </ul>
        </li>
        <li><div id="time"><?=date("d/m/Y H:i") ?></div></li>
      </ul>
    </div>
    Work in progress - http://www.accend4web.co.uk/whitehart/index.php#

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're going to use Jquery, you need to include it before it is called.
    Also use the error console and you won't need to have others point out this kind of error.
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah right thank you, wow what an oversight, but in honesty I did use the error box and I didnt pick it up that was the problem.

    Thank you

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a step on from the issue abovem but thought I would keep it in the same thread.

    I'm trying to put a active styling to buttons that have been selected, and trying to integrate this effect into my code, but its not quite working, I think because its not connecting up properly I htink through the CSS, but it could be the jscript.

    I have tried attaching it to the sub-menu1 id, but I would prefer it to be an action that is applied to any li in the nav.

    Code:
    <script type="text/javascript" charset="utf-8">
    //<![CDATA[
    jQuery(function() {
      jQuery('#sub-menu1 a').each(function() {
        if (jQuery(this).attr('href')  ===  window.location.pathname) {
          jQuery(this).addClass('current');
        }
      });
    });  
    //]]>
    </script>
    
    <div id="Drop_down_wrapper">
      <ul>
        <li><a href="#" id="Drop1" class="Current">LOCATION</a>
          <ul id="sub-menu1">
            <li><a href="#" id="Drop2">Ward Block</a>
            <ul id="sub-menu2">
            	<li><a href="#" id="Drop3">Level 2</a>
                <ul id="sub-menu3">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Haki Stairs">Haki Stairs</a></li>
          	  	</ul>
            	</li>
                <li><a href="#" id="Drop3">Level 3</a>
                <ul id="sub-menu4">
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 2&amp;bottom=Haki Stairs">Haki Stairs</a></li>
          	  	</ul>
            	</li>
                <li><a href="#">Level 4</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 5</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 6</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 7</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 8</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 9</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 10</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 11</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
              <li><a href="#">Level 12</a>
              <ul>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Room">Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Plant Room">Plant Room</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Corridor">Corridor</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Stair Core">Stair Core</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Riser">Riser</a></li>
                  <li><a href="page2.php?top=Ward Block&amp;middle=Level 4&amp;bottom=Haki Stairs">Haki Stairs</a></li>
               </ul>
              </li>
            </ul>
            </li>
            <li><a href="#" id="Drop2">Queen's Building/Welcome Centre</a>
           </ul>
        <li><a href="#" id="Drop2">INFORMATION</a></li>
        <li><div id="time"><?=date("d/m/Y H:i") ?></div></li>
      </ul>
    </div>
    CSS

    Code:
    a.current {border:1px #000 solid;}

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I have found another way of getting this working, but again (sorry) its making all links 'active' and putting the border around it, when basically I wanted to style the button when the button is selected, and not until then.

    This is what I got now.

    Code:
    <script type="text/javascript" charset="utf-8">
    function setActive() {
      aObj = document.getElementById('Drop_down_wrapper').getElementsByTagName('a');
      for(i=0;i<aObj.length;i++) {
        if(document.location.href.indexOf(aObj[i].href)>=0) {
          aObj[i].className='active';
        }
      }
    }
    </script>
    CSS
    Code:
    .active {border:1px #000 solid;}
    http://www.accend4web.co.uk/whitehart/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •