5

I have set up my site in ExpressionEngine and I am trying to create a sticky navigation menu which indicates the section of site the user is on. Click Here for example when the user click on about the site scrolls down to about and the about stays in its hover state. I have incorporated the following but it doesn't seen to be working.

<ul class="nav-bar">
<li {if segment_1 == "home"} class="active"{/if}><a id="nav_1" href="#home">home</a></li>
<li {if segment_1 == "about"} class="active"{/if}><a id="nav_2" href="#about">about</a></li>
<li {if segment_1 == "roster"} class="active"{/if}><a id="nav_3" href="#roster">roster</a></li>
<li {if segment_1 == "clients"} class="active"{/if}><a id="nav_4" href="#client">clients</a></li>
<li {if segment_1 == "contact"} class="active"{/if}><a id="nav_5" href="#contact">contact</a></li>

  • Did one of the answers provided help you solve your problem? If yes, please mark the correct answer by clicking on the checkmark to the left of the answer. – Anna_MediaGirl Dec 18 '12 at 0:30
16

As coded, your active states will not work.

{if segment_1 == "home"} class="active"{/if} will work only if the browser page is reloaded and segment_1 becomes "home" in the address bar. Your hrefs aren't reloading the page, instead you are navigating with a scroll to "#home".

If you want active states, you'll need to use jQuery to set the active class on click.

$(".nav-bar a").click(function(){
      $(".nav-bar li").removeClass("active");
      $(this).parent().addClass("active");
});
  • Hi MediaGirl. Thanks for your answer, excuse my ignorance but i am pretty pants at jquery. In my css i have the set my active class to color:red; however when i click on a particular section it doesn't stay in it's active state. – NewBoy Dec 3 '12 at 23:06
  • @NewBoy You used the CSS pseudo-class :active not the actual class which would be .active. The former is basically adding styles for when a user is clicking on the element. Whereas the latter is like any other class when its class attribute contains "active" (classes are separated by a space), e.g. class="blah blah active". – notacouch Dec 4 '12 at 0:56
  • @NewBoy To get MediaGirl's JavaScript code working visibly you'll want to change your selector from .nav-bar li a:active to .nav-bar li.active a. (Didn't edit above comment in time.) – notacouch Dec 4 '12 at 1:02
  • This won't be a complete solution if you also want the nav highlighting to change as you scroll. See the answers by LMBRJCK or Jules if you need that. – Alex Kendrick Dec 17 '12 at 22:37
5

You could have a look at this framework from "Zurb Foundation".

They have a plug-in (css & javascript) called "Magellan" that effectively "listens" to where a user is on the page and sets a class of active to the relevant menu item on a floating nav bar.

This means a user can either click on a menu item or scroll to the relevant part of the page and the nav item will be set to active.

It is not too hard to grab the bits of code and scripts you need out of the framework and add to your site.

http://foundation.zurb.com/docs/magellan.php

2

Best plugin I've used for this type of effect - no need to use EE conditionals.

http://pagescroller.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.