WordPress模板的整蛊菜单（HTML + CSS）

enter image description here WordPress模板的整蛊菜单（HTML + CSS）

所以我们有上面的菜单。我需要构建一个WordPress模板。我不知道如何使悬停和活跃的状态。现在，直到我有这样的：

HTML（其次WordPress会如何生成代码）：

<nav id="nav-main" role="navigation"> 
    <div class="menu-primary-navigation-container"> 
     <ul id="menu-primary-navigation" class="menu"> 
      <li> 
       <a href="#" title=""> 
        Home 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
      <li> 
       <a href="#" title=""> 
        Menu Link 
       </a> 
      </li> 
     </ul><!-- #menu-primary-navigation --> 
    </div><!-- .menu-primary-navigation-container --> 
</nav><!-- #access -->

然后我有CSS：

#nav-main { 
    width: 956px; 
    height: 44px; 
    border: 1px solid #a5a5a5; 
    background: url(images/bg-nav-main.jpg) repeat-x; 
} 
    .menu-primary-navigation-container {} 
     #menu-primary-navigation { 
      margin: 0; 
      padding: 0; 
      list-style-type: none; 
     } 
      #menu-primary-navigation li { 
       height: 44px; 
       display: inline-block; 
      } 
       #menu-primary-navigation li a { 
        color: #ffffff; 
        font-family: Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        font-size: 16px; 
        text-decoration: none; 
        line-height: 44px; 
        padding: 0 46px; 
       } 
        #menu-primary-navigation li a:hover {}

而这一切。在这里我被困住了。这些斜线是这个菜单的坏点。

任何想法？

来源

2012-02-16 Grávuj Miklós Henrich

让显卡那样：

yellow represents transparent color

黄色代表透明色。然后为<li>添加负边距，以便它们彼此相邻而没有空格。

来源

2012-02-16 15:26:47 ogur

谢谢你，怎么样梯度slashlines？ – 2012-02-16 15:34:43

这不就是好切的问题吗？为该菜单元素设置曲面不透明度的光滑边缘，因此两个相邻的元素将为您提供该渐变斜线。 – ogur 2012-02-16 18:51:06

我想向你展示准备好的例子，但恐怕我的“艺术”技能很差。 – ogur 2012-02-16 18:59:03

为了使活性状态，你有一些PHP添加到菜单来检查当前网站：

<nav id="nav-main" role="navigation"> 
<div class="menu-primary-navigation-container"> 
    <ul id="menu-primary-navigation" class="menu"> 
     <li <?php if (is_page('home')) { echo "class='active'"; }?> > 
      <a href="#" title=""> 
       Home 
      </a> 
     </li> 
     <li <?php if (is_page('menulink')) { echo "class='active'"; }?> > 
      <a href="#" title=""> 
       Menu Link 
      </a> 
     </li>

欲了解更多信息，请阅读本教程在这里：Tutorial

然后你必须做出矩形每个menubutton的图像并将其定义为<li>元素作为背景。您也可以为所有菜单元素制作一个。使用由wordpress设置的“主动”类，您可以为活动菜单元素定义不同的背景。

对于菜单元素的悬停，你只需要在CSS中添加背景定义 #menu-primary-navigation li a:hover {}

来源

2012-02-16 15:38:23 colosso

WordPress模板的整蛊菜单（HTML + CSS）

回答

相关问题