Help with menu submenu active state thing

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
acoustika
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Sun Sep 18, 2005 4:57 pm
Contact:

Help with menu submenu active state thing

Post by acoustika » Sat Aug 25, 2007 1:23 pm

Hello there.....
I wonder if anybody can help me with this....
look here at my main menu... i have this arrow for active state on menu items... But the arrow also shows on my submenu..
How can i make it only show on the main active menu... and how can i make is show onlu on the submenu when that is active..
Link

I use Joomla 1.5 rc1 nightly build a couple of days ago...
I have practically made the css myself...
My main_menu has menu class suffic _nav
I have messed so much arond with this but cant figure out how this is done....

This is my css so far for the menu items

Code: Select all

.menu_nav ul {
	margin: 0;
	}

ul.menu_nav li {
	list-style-type: none;
	margin: 0 0 0 -10px;
	}
	
ul.menu_nav li ul li {
	list-style-type: none;
	margin: 0 0 0 12px;
	}

ul.menu_nav a:link, .menu_nav a:visited { 
	list-style-type: none;
	font-size		: 11px;
	color			: #465950; 
	text-decoration	: none;
	line-height:17px;
	padding: 0px 0px 0px 18px;
}

ul.menu_nav li a:hover {
	list-style-type: none;
	font-size		: 11px;
	color			: #A49881; 
	text-decoration	: underline;
	padding: 0px 0px 0px 18px;
}

.menu_nav li.active a:link, .menu_nav li.active a:visited
	{
    background: url(../images/arrow3.png) no-repeat 4px 2px ;
	margin: 0;       
	}
Anyobe can point me in the right direction????
My Joomla - SMF sites
www.sjagget.dk - Kim Larsen & Gasolin kopi

User avatar
grafiknet.de
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu May 24, 2007 8:03 am
Contact:

Re: Help with menu submenu active state thing

Post by grafiknet.de » Sat Aug 25, 2007 9:36 pm

Hi there,
try this one and add it to your css
#current a:link,#current a:visited{ background-color:#3f281e; color: #eee3d0 ! important; } 
#current ul a:link,#current ul a:visited{ color: #eee3d0 ! important; } 
#current ul a:hover{ color:#eee3d0 ! important; } 
GrafikNet - Artworks @ .flash .html .php
www.grafiknet.de  |  www.dezent-templates.de | Joomla 1.5 RC1 Templates

acoustika
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Sun Sep 18, 2005 4:57 pm
Contact:

Re: Help with menu submenu active state thing

Post by acoustika » Sat Aug 25, 2007 9:40 pm

Nope...

It still sets both the mainlevel link and the sublevel to active.....
Ive been messing around with the current thing also but cant get it to distinguiss between the mainlevel and sublevel
My Joomla - SMF sites
www.sjagget.dk - Kim Larsen & Gasolin kopi

dvanassc
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Thu Jun 21, 2007 12:58 pm

Re: Help with menu submenu active state thing

Post by dvanassc » Thu Oct 11, 2007 9:19 pm

I have the exact same problem.  I have a menu that contains multiple submenus, and want to highlight the clicked menu.  However, when clicking a parent menu, the parent and all its children get highlighted.  I tried the above suggestion with no luck.

Here is the html that is generated:

Code: Select all

<div class="moduletable_menu">
	<ul class="menu">
		<li class="item1">
			<a href="index.php?option=com_content&view=frontpage&Itemid=1">
				<span>Home</span>
			</a>
		</li>
		<li id="current" class="parent active item3">
			<a href="index.php?option=com_content&view=frontpage&Itemid=3">
				<span>Menu 1</span>
			</a>
			<ul>
				<li class="item5">
					<a href="index.php?option=com_content&view=frontpage&Itemid=5">
						<span>Menu 1a</span>
					</a>
				</li>
				<li class="item6">
					<a href="index.php?option=com_content&view=frontpage&Itemid=6">
						<span>Menu 1b</span>
					</a>
				</li>
			</ul>
		</li>
		<li class="item4">
			<a href="index.php?option=com_content&view=frontpage&Itemid=4">
				<span>Menu 2</span>
			</a>
		</li>
	</ul>
</div>
Here is the pertinent section of my stylesheet:

Code: Select all

.moduletable_menu {width:193px; background:#ececec; margin:5px 0;}
.menu {padding-bottom:158px; background:url(../images/gradientShim8.gif) -1px 100% no-repeat;}
.menu a {margin-left:-40px; display:block; height:1%; text-decoration:none;padding:7px; color:#000; border-bottom:1px solid #ddd;  border-top:1px solid #fff; }
.menu a:hover {text-decoration:none; color:#fff; background-color:#B0232B;}
.menu #current a {border:1px solid #fff; border-bottom:1px solid #ddd; background:#fff url(../images/dot.gif) right center no-repeat; border-left:none; border-right:none;}
.menu #current a:hover { background-color:#fff;color:#000}
.menu li { padding:0; margin:0; list-style-type:none}
.menu ul {padding:0; margin:0}
.menu ul span {margin-left:10px}
I'm running Joomla Version "Joomla! 1.5.0 Production/Stable [ Endeleo ] 1-September-2007 15:00 GMT" on Apache 2.0.55 on Windows XP Pro.

Does anyone have any suggestions on preventing child menus from highlighting when a parent menu is selected?

User avatar
syahzul
Joomla! Guru
Joomla! Guru
Posts: 537
Joined: Wed May 31, 2006 12:45 pm
Location: Shah Alam
Contact:

Re: Help with menu submenu active state thing

Post by syahzul » Fri Oct 12, 2007 6:45 am

this is my code,

index.php

Code: Select all

            <div id="sz-left">
            	<jdoc:include type="modules" name="left" style="rounded" />
            </div>
template.css

Code: Select all

ul.menu li {
	line-height: 25px;
	list-style: none;
	margin-left: -30px;
	margin-right: 10px;
	margin-top: 0;
	padding: 0;
	width: auto;
	display: block;
}
ul.menu li a:link, ul.menu li a:visited {
	padding-left: 10px;
	color: #666666;
}
ul.menu li a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
ul.menu .parent a {
	color: #666666;
}
ul.menu #current a {
	color: #FFFF99;
}
ul.menu li#current ul li a {
	background: none;
	padding-left: 10px;
	color: #666666;
}
so far it work for me, with 3 level submenu. the only problem is the background image. i will try find the solution and post it here later.
Your problem is not your problem. Your attitude - how you handle your problems - is your problem.

http://www.joomla-my.org :: http://www.syahzul.com

User avatar
Kampp
Joomla! Guru
Joomla! Guru
Posts: 563
Joined: Tue Aug 30, 2005 9:18 am
Location: Denmark
Contact:

Re: Help with menu submenu active state thing

Post by Kampp » Fri Oct 12, 2007 8:21 am

Will this also work for Joomla 1.0.x?
http://www.toolmaster.dk - Danish Joomla Services!

User avatar
syahzul
Joomla! Guru
Joomla! Guru
Posts: 537
Joined: Wed May 31, 2006 12:45 pm
Location: Shah Alam
Contact:

Re: Help with menu submenu active state thing

Post by syahzul » Fri Oct 12, 2007 8:39 am

no it's for j 1.5 only.
Your problem is not your problem. Your attitude - how you handle your problems - is your problem.

http://www.joomla-my.org :: http://www.syahzul.com

dvanassc
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Thu Jun 21, 2007 12:58 pm

Re: Help with menu submenu active state thing

Post by dvanassc » Mon Oct 15, 2007 3:08 pm

Thanks syahzul, that was the perfect starting point to solve my specific problem.  My css now looks like:

Code: Select all

.moduletable_menu {width:193px; background:#ececec; margin:5px 0;}
.menu ul {padding:0; margin:0}
.menu ul span {margin-left:10px}
ul.menu li {padding:0; margin:0; list-style-type:none}
ul.menu li a:link, ul.menu li a:visited, ul.menu .parent a {
	margin-left:-40px;
	display:block;
	height:1%;
	text-decoration:none;
	padding:7px;
	color:#000;
	border-bottom:1px solid #ddd;
	border-top:1px solid #fff;
}
ul.menu li a:hover, ul.menu li#current ul li a:hover {
	text-decoration:none;
	color:#fff;
	background-color:#B0232B
}
ul.menu li#current ul li a {
	background: none;
	padding-left: 10px;
	color: #000;
}
ul.menu #current a {
	border:1px solid #fff;
	border-bottom:1px solid #ddd;
	background:#fff url(../images/dot.gif) right center no-repeat;
	border-left:none;
	border-right:none
}
ul.menu #current a:hover { background-color:#fff;color:#000}
and it works perfectly!  Thanks again.


Locked

Return to “Templates for Joomla! 1.5”