Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Jun 2014
    Posts
    37
    Member #
    39433
    Liked
    1 times

    Drilldown navigation menu by Replacing Divs (Clumsy)

    I made an attempt at a menu, that comprises of just replacing divs by showing and hiding. Kind of like a drilldown technique. I have the feeling that it is extremely long-winded, because i am a noob. Can anyone offer a cleaner or more beautiful technique. Am I missing the point?

    Thanks
    See fiddle

    HTML
    Code:
    <div class="first">Choose a Department</div>
    <div class="second">
    <table class="Menu">
    <tr>
    <td>
    <div class="third">Technology</div>
    </td>
    <td>
    <div class="forth">Vehicles</div>
    </td>
    </tr>
    </table>
    </div>
    <div class="seventh">
    <table class="Menu">
    <tr>
    <td>
    <div class="all"><a>Headphones</a>
    
    </div>
    </td>
    <td>
    <div class="all"><a>Watches</a>
    
    </div>
    </td>
    <td>
    <div class="nineth">Back</div>
    </td>
    </tr>
    </table>
    </div>
    <div class="sixth">
    <table class="Menu">
    <tr>
    <td><a>Engine-Powered</a>
    
    </td>
    <td><a>Human-Powered</a>
    
    </td>
    <td>
    <div class="fifth">Back</div>
    </td>
    <td>
    <div class="eighth">Top</div>
    </td>
    </tr>
    </table>
    </div>
    JS
    Code:
    $(document).ready(function () { $('.first').show(); $('.second, .all, .seventh, .sixth').hide();
    $('.first').click(function () {
    $('.first, .second').hide();
    $('.second').show();
    return false;
    });
    });
    
    
    $('.third').click(function () {
    $('.second').hide();
    $('.all, .seventh').show();
    return false;
    });
    
    
    $('.forth').click(function () {
    $('.second').hide();
    $('.sixth,.eighth').show();
    return false;
    });
    
    
    $('.fifth').click(function () {
    $('.fifth, .sixth').hide();
    $('.second').show();
    return false;
    });
    
    
    $('.nineth').click(function () {
    $('.seventh, .nineth').hide();
    $('.second').show();
    return false;
    });
    
    $('.eighth').click(function () {
    $('.sixth, .fifth').hide();
    $('.second').show();
    return false;
    });
    CSS
    HTML Code:
    table {
    text-align:center;
    width:80%;
    cursor:pointer;
    }
    tr {
    width:50%;
    background:red;
    }

  2.  

  3. #2
    Member
    Join Date
    Jun 2014
    Posts
    37
    Member #
    39433
    Liked
    1 times
    The effect I am looking for should follow this logic.

    u6kLTLS.jpg

    like this click through...

    MCS64V3.gif


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com