Sass多状态导航栏问题

我有一个导航栏，其中按钮具有悬停状态，但也需要在其各自的页面上处于“活动”状态。由于此导航栏是包含的一部分，因此我决定通过body标签上的类来执行活动状态，如.dashboard .dashboard-button。所以我有这个悬停。Sass多状态导航栏问题

我试图找出最简单的方法来做到这一点与Sass/Compass。我创建了几个混入的：

@mixin nav-button-on($icon) { 
    background-color: #2f3684; // Old browsers 
    @include filter-gradient($offwhite, #E5E5E5, vertical); // IE6-9 
    @include background-image(url('../images/'+$icon+'-on.png'),linear-gradient(top, $offwhite 0%, #E5E5E5 100%)); 
    border-bottom: $borderbottom solid #F31A35; 
    a { color: $red;} 
} 
@mixin nav-button($icon){ 
    background-color: #fff; // Old browsers 
    @include filter-gradient(#fff, #fff, vertical); // IE6-9 
    @include background-image(url('../images/'+$icon+'.png'),linear-gradient(top, #fff 0%, #fff 100%)); 
}

当按钮被定义

然后在李，我有

li { 
&.dashboard { 
      @include nav-button('dashboard'); 
     } 
     .dashboard &.dashboard { 
      @include nav-button-on('dashboard'); 
      &:hover { 
       @include nav-button-on('dashboard'); 
      } 
     } 
}

HTML：

<body class="dashboard"> 
<div id="nav"> 
    <ul> 
    <li class="first dashboard"><a href="/index.php">Dashboard</a></li> 
    <li class="challenges"><a href="/challenges.php">Challenges &amp; Teams</a></li> 
    <li class="goals"><a href="/goals.php">Goals</a></li> 
    <li class="activity"><a href="/my-activity.php">My Activity</a></li> 
    <li class="destinations"><a href="/destinations.php">Destinations</a></li> 
    <li class="fitness last"><a href="/fitness-resources.php">Fitness Resources</a></li> 
</ul> 
</div>

这似乎有点令人费解，我想知道是否有人有任何建议来简化这一切。

注：我不得不添加白色到白色的渐变，因为当将鼠标悬停在具有渐变悬停状态的纯色背景上时会导致闪光。

来源

2012-11-03 Steve

我们可以看到你的html标记吗？ – bookcasey

加入问题 – Steve

如何在评论中获得格式化的缩进代码？ – Steve

有许多的事情，以改善这里：

你真的处理的该层次结构dashboard类？例如，您目前正在编译为：
```
li.dashboard { 
    ... 
} 
li .dashboard li.dashboard { 
    ... 
} 
```
这看起来不对，或者至少结构不良。也许你可以在这里简化事情。

假设你需要这个为每个导航<li>元素，与迭代混入擦干了起来：

li { 
    @each $item in dashboard, challenges, goals, activity, destinations, fitness { 
     &.#{$item} { 
      @include nav-button($item); 
     } 
     .#{$item} &.#{$item} { 
      @include nav-button-on($item); 
      &:hover { 
       @include nav-button-on($item); 
      } 
     } 
    } 
}

但是＃2实际上不是最好的办法。使用占位符而不是混合这种东西，或将两者结合起来。我会做这样的事情：

%nav-button { 
     background-color: #fff; // Old browsers 
     @include filter-gradient(#fff, #fff, vertical); // IE6-9 
    } 

    %nav-button-on { 
     background-color: #2f3684; // Old browsers 
     @include filter-gradient($offwhite, #E5E5E5, vertical); // IE6-9 
     border-bottom: $borderbottom solid #F31A35; 
     a { color: $red;} 
    } 

    @mixin li-image($icon) { 
     @include background-image(url('../images/'+$icon+'.png'),linear-gradient(top, #fff 0%, #fff 100%)); 
    } 

    @mixin li-image-on($icon) { 
     @include background-image(url('../images/'+$icon+'-on.png'),linear-gradient(top, $offwhite 0%, #E5E5E5 100%)); 
    } 

    @each $item in dashboard, challenges, goals, activity, destinations, fitness { 
     body.#{$item} li, li.#{$item}:hover { 
      @extend %nav-button-on; 
      @include li-image-on($item); 
     } 
     li.#{$item} { 
      @extend %nav-button; 
      @include li-image($item); 
     } 
    }

比较输出和这些可维护性，我想你会觉得这很有点更精简！

来源

2012-11-04 20:53:21 glortho

谢谢。我最终想要得到的是'.dashboard li.dashboard'，因为当在页面上显示'body class =“dashboard”'时，具有相同类的li应该是“on”，以及“开启“时悬停在任何其他页面上。伟大的建议，我会尝试。 – Steve

这个设置是天才。正如我上面所说的，我还需要将悬停状态作为正常状态，当给定的LI位于具有相同类的BODY中时，所以我编辑了循环，如下所示：http://pastebin.com/uWcr6gGy是否这样做对你有意义吗？ – Steve

您需要将body.dashboard放在li选择器之外。请参阅我编辑的＃3以获取简化版本。 – glortho

-1

你有一个错误的}后@include nav-button('dashboard');

尝试：

li { 
    &.dashboard { 
     @include nav-button('dashboard'); 
     .dashboard &.dashboard { 
      @include nav-button-on('dashboard');  
      &:hover { 
       @include nav-button-on('dashboard'); 
      } 
     } 
    } 
}

来源

2012-11-03 17:26:42 Duke

谢谢，可能是复制并粘贴到这个论坛做到了。我的代码工作正常，我问是否有人对简化它的意见。 – Steve

Sass多状态导航栏问题

回答

相关问题