19

在为我的网站创建导航栏时，出于可用性目的，我决定将活动页面选项卡显示为粗体，但是当我更改font-weight元素上的问题，我从来不知道解决它的方法..

http://jsfiddle.net/amx7E/

HTML

<ul id="mainNav">
    <li class="navItem">
        <a class="navLink" id="activeLink">Link 1</a>
    </li>

    <li class="navItem">
        <a class="navLink">Link 2</a>
    </li>

    <li class="navItem">
        <a class="navLink">Link 3</a>
    </li>
</ul>

CSS

* {
    font-family: Arial;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

#mainNav {
    background: RGB(200, 230, 240);
    border-bottom: 1px solid RGB(0, 0, 0);
    height: 30px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.navItem {
    display: block;
    float: left;
    position: relative;
}

.navItem:last-child .navLink {
    border-right: 1px solid RGB(0, 0, 0);
}

.navLink {
    border-bottom: 1px solid RGB(0, 0, 0);
    border-left: 1px solid RGB(0, 0, 0);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    white-space: nowrap;
}

.navItem:hover .navLink {
    background: RGB(120, 200, 250);
    color: RGB(255, 255, 255);
    cursor: pointer;
    font-weight: bold;
}

#activeLink {
    background: RGB(90, 170, 220);
    color: RGB(255, 255, 255);
    font-weight: bold;
}

#activeLink:hover {
    background: RGB(110, 190, 240);
}

.navItem:hover .subNav {
    display: block;
}
4

9 回答 9

18

除了width这里的路线还有另外两种可能，看你觉得合适不合适就看个人喜好了。这两个想法都基于相同的原则，即您使用单独的元素来显示粗体状态，并且该元素不会（想法一）或确实（想法二）影响 UI 的尺寸。

http://jsfiddle.net/3Jyge/2/

想法一

使用伪选择器。这种方法依赖于支持最新进展的浏览器:before，content: attr()因此可能还不可靠。

CSS：

ul {
  list-style: none;
}
ul li {
  float: left;
}
ul li:hover a {
  visibility: hidden;
}
ul li:hover:before {
  position: absolute;
  font-weight: bold;
  content: attr('data-text');
}

标记：

<ul>
  <li data-text="one"><a href="#">one</a></li>
  <li data-text="two"><a href="#">two</a></li>
  <li data-text="three"><a href="#">three</a></li>
</ul>


想法二

另一个更直截了当，尽管它依赖于首先准备你的标记——那些使用屏幕阅读器的人可能不喜欢你的网站，这是可以理解的；除非你能找到一个很好的方法来隐藏他们的重复文本。

标记：

<ul>
  <li><a href="#">
    <span class="a">one</span>
    <span class="b">one</span>
  </a></li>
  <li><a href="#">
    <span class="a">two</span>
    <span class="b">two</span>
  </a></li>
  <li><a href="#">
    <span class="a">three</span>
    <span class="b">three</span>
  </a></li>
</ul>

CSS：

ul {
  margin: 0; padding: 0;
  list-style: none;
}
ul li {
  float: left;
}
ul li a span.b {
  visibility: hidden;
  font-weight: bold;
}
ul li a span.a {
  position: absolute;
}
ul li:hover a span.b {
  visibility: visible;
}
ul li:hover a span.a {
  visibility: hidden;
}

归根结底，更好的解决方案是：

  1. 设置一个宽度，虽然我可以理解不想这样做。
  2. 使用 JavaScript 计算尺寸。
  3. 选择一个不同的突出显示，一个不会改变文本尺寸的突出显示。
于 2013-07-15T10:05:34.190 回答
8

我处理这个问题的方法是使用 JQuery 来“修复”宽度，这样即使粗体确实发生了变化，它也不会在悬停时发生变化。这基本上采用了此处的 css 宽度答案并自动化了该过程。

  (function($) {
    $(function() {
      $('#menu > li').each(function(){
        wid = $(this).width();
        $(this).css('width', wid+'px');
      });
    });
  })(jQuery);
于 2014-03-31T17:59:01.757 回答
7

font-weight粗体文本的替代方法是用于text-shadow设置与文本颜色相同的水平阴影。此代码在左侧和右侧设置相等的阴影。只有一个阴影，文本似乎会向阴影的方向移动。

CSS：

    a:hover {
      text-shadow: .25px 0px .1px,
                  -.25px 0px .1px;
    }

请注意，Web 浏览器不会以相同的方式呈现文本，更不用说text-shadow效果了。在决定值之前，您需要检查它们在多个浏览器中的外观。

于 2015-04-23T03:58:50.313 回答
3

由于您没有为元素指定任何宽度，因此它们根据其内容调整大小。因此，当font-weightis时normal，元素占用的空间比当 is 时少bold。随着内容大小的改变，盒子的大小也会改变。

您可以指定元素的宽度，使其略大于其内容，或者使用不同的方法来识别当前活动的选项卡。

于 2013-07-15T09:07:42.877 回答
3

有趣的是没有人提到letter-spacing。

可以将字母间距添加到普通字体并删除它以用于粗体版本。

做到正确并不总是可能的，很大程度上取决于字体和font-size. 但是随着更多的浏览器开始接受字母间距的亚像素值，它开始变得更加实用。

例子：

.nav-link.active {
    font-weight: bold;

    /* Adjust for font-weight bold so that the text will still align */
    letter-spacing: -1px;
}
于 2015-01-08T22:11:39.303 回答
0

我认为没有基于 CSS 的解决方案，除非您可以为每个 li 项目添加宽度，也许是不同的宽度。您已经在悬停和选定状态下更改了 bg 颜色，我建议您放弃字体粗细更改。从视觉上看，这不是一个大的变化，而且就可用性而言，你已经有了我认为足够的 bg 颜色变化。

于 2013-07-15T09:21:08.410 回答
0

不，它会改变父 div 的大小。

我想引用昆汀的回答。

该字体是一种比例字体，因此当它变粗时它会变得更粗（并占用更多的水平空间）。

在这里找到更多信息。

于 2013-07-15T09:29:50.643 回答
0

我是如何做到的：

<ul id="header_menu">
  <?php
  $menu_items = array(array("Home", "/"),
                      array("About", "/about.html"),
                      array("Consumer Info", "consumer-info.html"),
                      array("News & Events", "news-events.html"),
                      array("Contact", "contact.html")
                      );
  foreach($menu_items as $value)
  {
    // Find box width of text and add padding
    $padding = 10;
    $font-size = 12; // pt
    list($left,, $right) = imageftbbox($font-size, 0, "fonts/OpenSans-Bold.ttf", $value[0]);
    $width = ($right - $left) + ($padding * 2);

    echo "<li><a style=\"width:" . ($width) . "px;\" href=\"" . $value[1] . "\">" . $value[0] . "</a></li>";
  }

  ?>
</ul>
于 2015-04-07T08:20:15.337 回答
-1

如果将 width 属性放在 .navItem 类中，则悬停时不会更改宽度。

.navItem {
    display: block;
    float: left;
    position: relative;
    **width:70px;**  // this
}

我已经更新了小提琴。请检查。

于 2013-07-15T09:06:14.680 回答