Need help with creating navigation active state in Revolution

102 Posts

viltnieks Reply #1, 15 years, 6 months ago

Hello.

I couldn’t find any iformation on how to create active state in modx revolution.

I knew how to create this in evolution, but it seems that it doesn’t work in revolution.

I have a simple drop down menu.

<div id="menu" class="menu">
    <ul>
    <li><a href="#">Top level 1</a></li>
    <li><a href="#">Top level 2</a></li>
    <li><a href="#">Top level 3</a>
      <ul>
          <li><a href="#">Top level's 3 sublevel</a></li>
          <li><a href="#">Top level's 3 sublevel</a></li>
          <li><a href="#">Top level's 3 sublevel</a></li>
      </ul>
    </li>
    <li><a href="#">Top level 4</a></li>
    </ul>
</div>

When in sublevel I would like it’s parent to be in active state.

5,888 Posts

Bruno17 Reply #2, 15 years, 6 months ago

I knew how to create this in evolution, but it seems that it doesn’t work in revolution.

how did you do it in evo? wayfinder works the same way in revo as it was in evo.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

863 Posts

Lucas Reply #3, 15 years, 6 months ago

Wayfinder will by default output an ’active’ class for the current displayed resource and all of it’s parent containers as well.

Are you using any custom chunks for your Wayfinder call?

102 Posts

viltnieks Reply #4, 15 years, 6 months ago

I’m actually not using wayfinder, I created navigation chunk containing navigation code.

Ther isn’t a way without wayfinder ?

102 Posts

viltnieks Reply #5, 15 years, 6 months ago

Ok, I installed wayfinder, thanks for pointing out.

In evolution I would use this line in css in order to get active state

.menu li.active a{
	background: #111111; 
	color: #bf34be;
	}

I have this exact code but but the active state isn’t displayed right. It should be black bacground and purplish text, but I’m getting black bacground and white text .

863 Posts

Lucas Reply #6, 15 years, 6 months ago

Hmm... that should work. Maybe some other line in your css is overriding your menu styles. Changing your div class to an id might help you.

Have a look with Firebug - you’ll be able to see where the browser is getting the style from for each element in your menu.
Or post a link here if you can and I’ll check it for you.

1,572 Posts

Paulp Reply #7, 15 years, 6 months ago

As above, it’s defo getting over ridden, try using :

.menu li.active a{
	background: #111111; 
	color: #bf34be !important;
	}

102 Posts

viltnieks Reply #8, 15 years, 6 months ago

Thanks for pointing me in right direction!
I had to add "ul" before "li.active a" and it worked.

Active state now works but there is a small problem now.

For example, if I navigate to Top level 3 it gets displayed as active, which is ok, but all of its sub items also are displayed as active (screenshot included)

5,888 Posts

Bruno17 Reply #9, 15 years, 6 months ago

you will need another rule for
.menu ul li ul li

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

863 Posts

Lucas Reply #10, 15 years, 6 months ago

That’s because the of the way CSS works with nested elements. ’li.active a’ will apply that style to all links that are children of that element.

Try the direct child selector instead:

ul li.active > a { 
    	background: #111111; 
	color: #bf34be;
        }