Databases
StackOverflow2013
Postsdbo
POSass multi-state navigation bar issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSass multi-state navigation bar issue
    text
    copied!<p>I have a navigation bar, where the buttons have a hover state but also need to be "active" on their respective page. Since this navigation bar is part of an include, I decided to do the active state via a class on the body tag, as in <code>.dashboard .dashboard-button</code>. So I have the hover and this. </p> <p>I was trying to figure out the most streamlined way to do this with Sass/Compass. I created a couple of mixins:</p> <pre><code>@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%)); } </code></pre> <p>And then in the LI where the buttons are defined, I have</p> <pre><code> li { &amp;.dashboard { @include nav-button('dashboard'); } .dashboard &amp;.dashboard { @include nav-button-on('dashboard'); &amp;:hover { @include nav-button-on('dashboard'); } } } </code></pre> <p>HTML:</p> <pre><code>&lt;body class="dashboard"&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li class="first dashboard"&gt;&lt;a href="/index.php"&gt;Dashboard&lt;/a&gt;&lt;/li&gt; &lt;li class="challenges"&gt;&lt;a href="/challenges.php"&gt;Challenges &amp;amp; Teams&lt;/a&gt;&lt;/li&gt; &lt;li class="goals"&gt;&lt;a href="/goals.php"&gt;Goals&lt;/a&gt;&lt;/li&gt; &lt;li class="activity"&gt;&lt;a href="/my-activity.php"&gt;My Activity&lt;/a&gt;&lt;/li&gt; &lt;li class="destinations"&gt;&lt;a href="/destinations.php"&gt;Destinations&lt;/a&gt;&lt;/li&gt; &lt;li class="fitness last"&gt;&lt;a href="/fitness-resources.php"&gt;Fitness Resources&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This seems a bit convoluted, I was wondering if anyone had any advice to streamline this at all.</p> <p>NOTE: I had to add the white-to-white gradient, since when hovering over a solid-color background with the gradient hover state caused a flash.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload