CODEWITHSUNDEEP
htmlcss
Fogolicious
Fogolicious

Reputation: 412

Tabbed Navigation Style with CSS

I want a simple Tabbed Style Navigation that has a simple difference in the active state. I have been having some difficulty achieving what I think should be a pretty easy task.

Image of tabbed navigation

In the Fiddle I show how I attempted it and though it could be done by adding 5px more of padding to .current and then a margin-top: -5px. This does not achieve the look though. I know this is probably something simple I am missing.

HTML:

<body>
<div class="page-wrap">
    <div class="main-nav">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#" class="current">Latest Projects</a>
            </li>
            <li>
                <a href="#">Blog</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>
</body>

CSS:

body {
  width: 1000px;
  margin: 0 auto;
  font-family: "Helvetica", Helvetica, Arial, sans-serif;
}
.main-nav a {
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main-nav li {
  float: left;
  display: block;
}
.main-nav ul {
  background-color: #333;
  line-height: 12px;
}
.main-nav a {
  padding: 15px 45px;
  font-weight: 700;
  text-transform: uppercase;
  color: #282b2e;
  text-shadow: 0 1px 0 #ffffff;
}
.main-nav a:hover {
  background: rgba(0, 0, 0, 0.1);
}
.main-nav .current {
  background: #ffffff;
}
.page-wrap {
  background: #ffffff;
  height: 500px;
}

FIDDLE: http://jsfiddle.net/j970s3mw/

Upvotes: 0

Views: 150

Answers (2)

Weafs.py
Weafs.py

Reputation: 22992

Demo on Fiddle

Add this to your CSS:

.main-nav a:focus {
    background: #ffffff;
    padding-top: 20px;
    margin-top: -5px;
}

And jQuery, if you want the .current to be active at the beginning:

$('a').click(function() {
    $('.current').removeClass('current');
});

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

You're facing this issue because you're using overflow: hidden on your <ul>. You will need to remove that and use display: inline-block instead of float: left to place your <li>'s next to each other.

Here's a jsFiddle Demo.

body {
  width: 1000px;
  margin: 0 auto;
  font-family: "Helvetica", Helvetica, Arial, sans-serif;
}
.top {
  height: 100px;
  background: #000;
}
.main-nav a {
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li {
  float: none;
  display: inline-block;
}
.main-nav ul {
  background-color: #999;
  line-height: 12px;
}
.main-nav a {
  padding: 15px 45px;
  font-weight: 700;
  text-transform: uppercase;
  color: #282b2e;
  text-shadow: 0 1px 0 #ffffff;
}
.main-nav a:hover {
  background: rgba(0, 0, 0, 0.1);
}
.main-nav .current {
  background: #ffffff;
  padding-top: 20px;
  margin-top: -5px;
}
.page-wrap {
  background: #ffffff;
  height: 500px;
}
a.current:hover {
  background: #fff;
}
<body>
    <div class="top"></div>
    <div class="page-wrap">
        <div class="main-nav">
            <ul>
                <li> 
                <a href="#">Home</a></li><li> 
                <a href="#">Portfolio</a></li><li> 
                <a href="#">About</a></li><li> 
                <a href="#" class="current">Latest Projects</a></li><li> 
                <a href="#">Blog</a></li><li> 
                <a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</body>

Moreover, since you wouldn't want the hover styles set for the non-active tabs to affect the active tab, you can overwrite the styles for the current tab using:

a.current:hover {
      background: #fff;
      //add more styles as per your needs 
}

Upvotes: 1

Related Questions