menu
Ad goes here

Sunday, 9 September 2012

CSS Tab

The quality web presence is essential to a successful online Business. Just as having a quality, polished resume is essential for a job seeker. So plan for the design for each block, navigation, content area etc.

If you have many links in the website then you can think about the drodpwn menu or tab base menu. Here is the CSS tab menu, which can help you to design your main or sub navigation.






CSS Code:

<style type="text/css">
#csstab {
    position:relative;
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style:none;
    line-height:1em;
}

#csstab li {
    float:left;
    margin:0;
    padding:0;
}

#csstab a {
    display:block;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    background:#ff0000;
    margin:0;
    padding:0.25em 1em;
    border-top:1px solid #ff7373;
    border-radius:5px 5px 0 0;
    margin:0 2px 0 0;

}

#csstab a:hover,
#csstab a:active,
#csstab a.selected:link,
#csstab a.selected:visited {
    background:#bbb;
}

#csstab a.selected:link,
#csstab a.selected:visited {
    position:relative;
    z-index:102;
}

/*subnav*/

#csstab ul {
    position:absolute;
    left:0;
    top:1.5em;
    background:#bbb;
    width:100%;
    margin:0;
    padding:0;
    border-top:1px solid #ccc;
}

#csstab ul li {
    float:left;
    display:block;
    margin-top:1px;
    padding:0.25em;
}

#csstab ul a {
    background:#bbb;
    color:#fff;
    display:inline;
    margin:0;
    padding:0 1em;
    border:0
}

#csstab ul a:hover,
#csstab ul a:active,
#csstab ul a.selected:link,
#csstab ul a.selected:visited {
    color:#fff;
    background:#ff0000;
    border-radius:10px;
    -moz-border-radius:10px;   
}
</style>


HTML Code:

<ul id="csstab">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="selected">HTML</a>
        <ul>
            <li><a href="#">XHTML</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">PSD 2 HTML</a></li>
            <li><a href="#" class="selected">CONTACT</a></li>
        </ul>
    </li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Joomla</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

No comments:

Post a Comment

Books for you (Crafted with )