1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Drilldown navigation menu by Replacing Divs (Clumsy)

Discussion in 'HTML & Website Design' started by 7643sfsag6, Aug 2, 2015.

  1. #1
    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

    <divclass="first">Choose a Department</div><divclass="second"><tableclass="Menu"><tr><td><divclass="third">Technology</div></td><td><divclass="forth">Vehicles</div></td></tr></table></div><divclass="seventh"><tableclass="Menu"><tr><td><divclass="all"><a>Headphones</a>

    </div></td><td><divclass="all"><a>Watches</a>

    </div></td><td><divclass="nineth">Back</div></td></tr></table></div><divclass="sixth"><tableclass="Menu"><tr><td><a>Engine-Powered</a>

    </td><td><a>Human-Powered</a>

    </td><td><divclass="fifth">Back</div></td><td><divclass="eighth">Top</div></td></tr></table></div>
    JS

    $(document).ready(function(){ $('.first').show(); $('.second, .all, .seventh, .sixth').hide();
    $('.first').click(function(){
    $('.first, .second').hide();
    $('.second').show();returnfalse;});});


    $('.third').click(function(){
    $('.second').hide();
    $('.all, .seventh').show();returnfalse;});


    $('.forth').click(function(){
    $('.second').hide();
    $('.sixth,.eighth').show();returnfalse;});


    $('.fifth').click(function(){
    $('.fifth, .sixth').hide();
    $('.second').show();returnfalse;});


    $('.nineth').click(function(){
    $('.seventh, .nineth').hide();
    $('.second').show();returnfalse;});

    $('.eighth').click(function(){
    $('.sixth, .fifth').hide();
    $('.second').show();returnfalse;});
    CSS

    table {
    text-align:center;
    width:80%;
    cursor:pointer;}
    tr {
    width:50%;
    background:red;}
     
    7643sfsag6, Aug 2, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Okay, first of all, if you're gonna paste code, use the damn [ code ] -tags (there's even a little button in the editor, right next to the diskette).
    That being said, that menu seems to be all sorts of wrong. First of, a menu won't EVER be a table. Redo it, take a look at the posts in this forum, and I'm sure you'll find plenty of working examples (with code, or at least links) so that you can get this to work properly. Also, if you're gonna be showing something, having a picture, or a link to a jsfiddle or something so we can understand how it's supposed to look is good.
     
    PoPSiCLe, Aug 3, 2015 IP
  3. 7643sfsag6

    7643sfsag6 Member

    Messages:
    58
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #3
    Hi I apologise. I thought i was done correctly. I have had a look around, in fact what I wrote was an assemblage of other examples.


    The effect I am looking for should follow this logic.
    [​IMG]



    like this click through...


    [​IMG]
     
    7643sfsag6, Aug 4, 2015 IP