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

<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

$(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

table {

text-align:center;

width:80%;

cursor:pointer;

}

tr {

width:50%;

background:red;

}

Do you have an example of the effect you want to achieve? I had a quick look at your fiddle, but i didn't understand where you were going with it!

Do you have an example of the effect you want to achieve? I had a quick look at your fiddle, but i didn't understand where you were going with it!

 

Hi Ash, the effect I am looking for should follow this logic.

 

 

like this click through...

Edited August 4, 201511 yr by 98sfsdf8