Question

5

Best way to code an HTML/CSS/JS tab navigation system (no images)

rated 0 times [ 7] [ 2] / answers: 1 / hits: 21987 / 14 Years ago, wed, july 14, 2010, 12:00:00

I'm coding a tab system for my website that must be entirely CSS/HTML/JS (without using any images). Problem is, I keep hacking the code until when I'm finished its just a mess. I don't know whether to use positioning, or float the tabs or what. Basically one of the big problems is that after I take away the bottom-border CSS of the selected tab, I need to move it down 1px so it seamlessly blends with the sorting headers - I don't know whether to use margin: -1px or position: relative/absolute etc. I'd love some advice on a good way to code a tab system like this, so that it can be reused across the website!

alt

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 14 Years ago yosefleod · Accepted Answer

Here's an example with CSS that makes it work:

HTML:

<body>

    <div class=tabs>

        <ul>

            <li><a href=#item1>Item 1</a></li>

            <li class=active><a href=#item2>Item 2</a></li>

            <li><a href=#item3>Item 3</a></li>

        </ul>

        <div class=tabInner>

            <div id=item1>

                bla1

            </div>

            <div id=item2>

                bla2

            </div>

            <div id=item3>

                bla3

            </div>

        </div>

    </div>

</body>

CSS:

.tabs ul {

    list-style: none;

}



.tabs ul li {

    float: left;

    background: #eee;

    border: 1px #aaa solid;

    border-bottom: none;

    margin-right: 10px;

    padding: 5px;

}



.tabs ul li.active {

    margin-bottom: -1px;

    padding-bottom: 6px;

}



.tabInner {

    clear: both;

    border: 1px solid #aaa;

    height: 200px;

    overflow: hidden;

    background: #eee;

}



.tabInner div {

    height: 200px;

    padding: 10px;



}

It even works without JS (to some degree). You'll still need some JS to move the 'active' class arround and also if you want fancy transitions.

See it in action here: http://jsfiddle.net/V8CK4/