CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
kylie2675647
kylie2675647

Reputation: 153

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

<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;
}

Upvotes: 0

Views: 108

Answers (1)

benjarwar
benjarwar

Reputation: 1804

Firstly, this type of question is better suited for https://codereview.stackexchange.com/

That said, some suggestions:

  1. Don't use a <table> for layout purposes, unless you're actually rendering data/content that belongs in a table.
  2. Try using semantic class names. Naming your classes after their order in the DOM has no substantive meaning.
  3. Group your classes so that they're reusable. What properties and functionality do the buttons share? It seems like you have "primary" and "secondary" levels that are repeated...
  4. Rather than having to add a separate click handling function to each button, is there a way you can write one one or two functions that are reusable by the different elements?

Upvotes: 2

Related Questions