Get active menu link working

[tango +]

I seen a post wanting to get the active link working and have the menu button stay highlighted for the page its showing. With the help of this post i got the thing to work using version 4.2.3, If your using the default template or 2cols template, make a back up and do this:

Go to templates/default/layout.tpl

Replace This: (line 56)

<ul>
				<li><a href="{$smarty.const.URL}/index.php">{$smarty.const.LANG_TPL_HOME}</a></li>
				<li><a href="{$smarty.const.URL}/search.php">{$smarty.const.LANG_TPL_SEARCH}</a></li>
				<li><a href="{$smarty.const.URL}/category.php">{$smarty.const.LANG_TPL_BROWSE}</a></li>
				<li><a href="{$smarty.const.URL}/toplistings.php?pg=featured">{$smarty.const.LANG_TPL_FEATURED}</a></li>
				<li><a href="{$smarty.const.URLS}/usercheckout.php">{$smarty.const.LANG_TPL_PLACE_AD}</a></li>
				<li><a href="{$smarty.const.URL}/contactus.php">{$smarty.const.LANG_TPL_CONTACT}</a></li>
			</ul>

With This:

<div {if $body=='home.tpl'} class="current"{else}class="taby"{/if}><a href="{$smarty.const.URL}/">{$smarty.const.LANG_TPL_HOME}</a></div>
				<div {if $body=='search.tpl'} class="current"{else}class="taby"{/if}><a href="{$smarty.const.URL}/search.php" >{$smarty.const.LANG_TPL_SEARCH}</a></div>
				<div {if $body=='categories/browse.tpl'} class="current"{else}class="taby"{/if}><a href="{$smarty.const.URL}/category.php" >{$smarty.const.LANG_TPL_BROWSE}</a></div>
				<div class="taby"><a href="{$smarty.const.URL}/toplistings.php?pg=featured">{$smarty.const.LANG_TPL_FEATURED}</a></div>
				<div {if $body=='checkout/step1.tpl'} class="current"{else}class="taby"{/if}><a href="{$smarty.const.URLS}/usercheckout.php">{$smarty.const.LANG_TPL_PLACE_AD}</a></div>
				<div {if $body=='contact/contactus.tpl'} class="current"{else}class="taby"{/if}><a href="{$smarty.const.URL}/contactus.php">{$smarty.const.LANG_TPL_CONTACT}</a></div>

Open your css sheet at templates\default\css\style.css

Find this: (line 26 or 27)

#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url(../images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 122px; font-weight: bold; text-align: center;  text-decoration: none; }
#tabs li a:hover { background: #fff url(../images/barcurrent.gif) no-repeat; color: #000; }	
#tabs li a.current { background: #fff url(../images/barcurrent.gif) no-repeat; color: #2C71AE; }

Replace with this:

#tabs .taby { display: inline; height: 45px; }
#tabs .taby a { float: left; background: #fff url(../images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs .taby a:hover { background: #fff url(../images/barcurrent.gif) no-repeat; color: #000; }
#tabs .current { display: inline; height: 45px; }
#tabs .current a { float: left; background: #fff url(../images/barcurrent.gif) no-repeat; color: #000; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs .current a:hover { background: #fff url(../images/barcurrent.gif) no-repeat; color: #000; }

You may have to mess around with it if your using it on a custom or other template or if you have made changes to the default and 2cols template. Works on firefox and IE9 8 7.

As you can see i don't know the body page for the top featured listings, so i left that blank.

Good luck

[seymourjames +]

In principle it is a nice idea but ....

What happens if you are on the login page? It is effectively the same page as checkout so you should account for that too. I played around a lot with this to but found it looked strange when there was no tab being highlighted on the register page, login page, viewlisting or show listing pages. There are more types of pages than that of course. Personally I think (it is only my opinion) highlighting the active tab only looks good for small sites where it can be complete and consistent. You also correctly highlight the problem of browsers where some will support it and some may not. The question arises as to what happens in those cases (think about mobiles for example). Making changes with cross browser compatibility is actually a difficult thing to do although it is getting easier as newer versions of the main browsers converge.

[tango +]

Your right, I would only use the active menu when it adds to a design even for a few pages. If firefox was the only browser available, it would makes things a bit easier