Hello to all of you web designers out there! If you’re like me, you prefer designing your sites using some form of css, especially when it comes to designing menus. We love the hover over effects, and the customizable-ness of styling both hover and non-hover states of the menu items.
Some weeks ago while finagling with an Expression Engine template, it occurred to me that it would be pretty neat if EE could add a “_selected” next to my menu item’s class name if a visitor was on that particular page. This would effectively give me the power to do things like: make the menu item that corresponds to the current page highlighted while the other menu items stay normal. So, I set off to research the documentation of EE for plugin programming. This is what I’ve created for you to use as well:
Download the Plugin: atilusmenuclass.zip
Here’s how you use it:
Once uploaded, you will be able to add this snippet inside any of your template files:
<a href="/about/" class="{exp:menuclass:item class="aboutlink" selected="_selected" uri="about"}" title="About Page">about</a>
Any parameter you pass for selected will be added trailing your class name you pass for class. The parameter uri is used to specify the page URI for which the plugin will trigger this class name change.
For example, if a visitor is at the address http://yoursite.com/contactpage/ and you have set one of your links assigned with uri=”contactpage” as well as selected=”_selected” and finally class=”contactpagelink”, the plugin will change your link’s class name to contactpagelink_selected. And of course, when the visitor is on a page other than http://yoursite.com/contactpage/ the class name will be displayed as “contactpagelink”.
Output:
If visitor is NOT on http://yoursite.com/contactpage/ :
<a href="http://yoursite.com/contactpage/" class="contactpagelink"/>
If visitor is on http://yoursite.com/contactpage/ :
<a href="http://yoursite.com/contactpage/" class="contactpagelink_selected"/>
