How to make your Joomla template keep the menus highlighted.
Note: Since the writing of this tutorial I have found myself often using another module called Extended Menu. This is a very useful extension but people seem to find it hard to use. I will release a tutorial for it with a link from here soon because it is also capable of making your menus stay highlighted and much more.
Have you ever wanted to have a menu in your Joomla template which stays highlighted when submenu items are selected?
Well now you can!
For example, let's say you have a top menu in Joomla with a link to News. When you click this menu item Joomla will take you to a new page with News on it. Then on the left side you may have another menu which displays the submenus for news such as Updates, Top Stories, News Feeds, etc.
Now the way it works is that when you click News on the top menu it will highlight that menu item. Then when you select News Feeds on the left, for example, it will take you to the News Feeds page and the News Feeds menu item on the left will be highlighted as well as News on the top menu. When you select Top Stories it will highlight and News on the top will stay highlighted and so on.
I have come across this again and since it took me a long time to find the post I thought I would post it here as well because I know I will be running into this again and I am sure you may someday too so I may as well put it here.
How to make your Joomla template keep the menus highlighted.
Step 1 - Put the mysplitcssmenu.php which you can download here (slightly modified to work properly) into your templates directory inside of the template you want to use it on.
Step 2 - In your current Joomla templates index.php just below the line that says:
Add this new line to your template:
Step 3 - In your index.php change the call for the left and top menus as follows:
Change the code for your top menu... it might look something like:
to:
And the left menu just above where it says:
Add this:
Step 4 - The left menu is now the menu items you enter into the Joomla backend as children of the current active top menu. You simply create a new menu item in the main menu and then assign the Parent Item to whichever menu item you want it to appear on.
Step 5 - Edit your template_css.css to your liking.
This is what I did and you can use it as a template for yours if you like:
float:left;
position:absolute;
top:34px;
list-style:none;
width:426px;
text-align:left;
padding:0px;
margin:0px;
}
#navlist #active a:link, #navlist #active a:visited{
float:left;
width:auto;
line-height:20px;
list-style:none;
text-decoration:none;
color:#3e4c77;
background:url(../images/subhead_bgl.gif) repeat-x;
display:block;
padding-left:5px;
padding-right:5px;
}
#navlist #active a:hover {
color: #3e4c77;
background:url(../images/subhead_bgl.gif) repeat-x;
}
#navlist a:link, #navlist a:visited{
float:left;
width:auto;
line-height:20px;
list-style:none;
text-decoration:none;
color: #FFFFFF;
background:url(../images/subhead_bg.gif) repeat-x;
display:block;
padding-left:5px;
padding-right:5px;
border-left:1px solid #769bd5;
}
#navlist a:hover{
color:#3e4c77;
background:url(../images/subhead_bgl.gif) repeat-x;
}
#navlist li {
list-style:none;
float:left;
}
#subnavcontainer ul{
padding:0px;
margin:0px;
list-style:none;
width:100px;
text-align:left;
}
#subnavlist #active a:link, #subnavlist #active a:visited{
float:left;
margin:0px;
padding:0px;
color:#222b4e;
background-color:#e4eeff;
display:block;
width:96px;
text-indent:15px;
line-height:20px;
background-image:url(../images/arrow.png);
background-repeat:no-repeat;
background-position:right;
padding-left:2px;
padding-right:2px;
}
#subnavlist #active a:hover {
color:#222b4e;
background-color:#bacae4;
}
#subnavlist a:link, #subnavlist a:visited{
float:left;
margin:0px;
padding:0px;
color:#222b4e;
background-color:#b1caeb;
display:block;
width:96px;
text-indent:15px;
line-height:20px;
background-image:url(../images/arrow.png);
background-repeat:no-repeat;
background-position:0px 3px;
padding-left:2px;
padding-right:2px;
}
#subnavlist a:hover{
color:#222b4e;
background-color:#bacae4;
}
#subnavlist li {
list-style:none;
float:left;
width:96px;
margin:0px;
padding:0px;
}
For those of you who want to do cross domain linking like me... or maybe there are other uses, to keep the tabs at the top, place this in your Joomla! root index.php file.
Note the sef url here and if you don't use sef, change it to your frontpage component url like this /index.php?option=com_frontpage&Itemid=1.
$parsed_url=parse_url($url);
$sub_folder = explode('/',$parsed_url['path']);
$domain=$parsed_url['scheme'].$parsed_url['host'];
if ( $url == $domain.'/' || $url == $domain.'' || $url == $domain.'/index.php') {
header("Location: ".$domain."/component/option,com_frontpage/Itemid,1/");
exit;
}