Question

我想要一个简单的标签式导航，它在活动状态下有一个简单的区别。我在实现我认为应该是一项非常简单的任务时遇到了一些困难。

Image of tabbed navigation

在小提琴中，我展示了我是如何尝试的，虽然可以通过向.current添加5px的填充然后再添加margin-top: -5px来完成。虽然这没有实现。我知道这可能是我想念的简单。

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/

Answer 1

您因为overflow: hidden使用<ul>而面临此问题。您需要将其删除，然后使用display: inline-block代替float: left将<li>放在一起。

这是 jsFiddle Demo 。

＆＃13;

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

＆＃13;

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

＆＃13;

此外，由于您不希望为非活动标签设置的悬停样式影响活动标签，您可以使用以下方式覆盖当前标签的样式：

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

Answer 2

Fiddle

上的演示

将此添加到您的CSS：

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

jQuery，如果你希望.current在开始时处于活动状态：

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

带有CSS的选项卡式导航样式

2 个答案:

Fiddle