Problem with `selected` class on DDsmoothmenu

[venom6pak]

http://www.dynamicdrive.com/dynamici...smoothmenu.htm

hi people i have implimented the dynamic drive smooth drop down menu on one of my sites and i like it a lot, however now that i have began to explore it i have noticed a bug that i am unsure of how to fix.

The bug i believe resides in this section of css

.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	color: black;
	background: #2EFF03;
	border-bottom: 5px solid #000000;
}
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
	position: absolute;
	left: 0;
	margin-top: 10px;
	display: none; /*collapse all sub menus to begin with*/
	visibility: hidden;
	background: #333;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
	font-weight: 500;
	width: 120px; /*width of sub menus*/
	padding: 0 10px;
	margin: 0;
	line-height: 24px;
	height: 24px;
	font-size: 12px;
	border-top-width: 0;
	text-align: left;
	background: none;
}

.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a:hover {
	color: #000000;
	background: #2EFF03;
	border-bottom: 2px solid #d2f476;
}

the problem is that on the home page where no submenus are listed the selected class works as should by highlighting the selected home tab with green to show the user is on that page, however any of the tabs that contain a submenu link do not highlight as green when selected.

the tab wont highlight unless i press refresh and if i then goto hover over the tab it removes the highlight (selected class)

here is the example if you do not understand

www.signoriwebsolutions.com

notice how the menu highlights the homepage or contact page when selected because they contain no submenu, but notice that the other tabs that contain submenus do not highlight when clicked unless refresh the page

i presume the bug is something to do with the selected class for the ul, li and a tags but i cannot figure out how to resolve the issue which i get on google chrome

any ideas people?

[jscheuer1]

In the future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.

That's not a bug, it's how the script works. It highlights (selects) the trigger that you are over and deselects it when the mouse leaves it. The Home one works the way you want it to because the Home link is not itself a trigger (the script ignores its mouse events). I see what you want it to do though -remain highlighted for the current page.

You can do that by adding another class, say - pageselected, in the css (addition highlighted):

.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a.pageselected, .ddsmoothmenu ul li ul li a:hover {
	color: #000000;
	background: #2EFF03;
	border-bottom: 2px solid #d2f476;
}

Now on each page where you want that page's trigger to remain highlighted, instead of selected (which the script controls) add that class (pageselected) to its trigger. For example, on the About page:

        <div id="mainmenu" class="ddsmoothmenu">
            <ul>
              	<li><a href="index.html">Home</a></li>
          		<li><a href="about.html" class="pageselected">About</a>
                    <ul>
                        <li><a href="#">Background</a></li>
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Man . . .

[venom6pak]

thank you for your timely reply jscheuer1, im sorry for posting in the wrong area im guilty of not reading the posting rules as many do

and sorry for assuming it was a bug

and thank you for your reply i have not had time to implement it yet but i am sure it works and I will repost to confirm this to clarify for any future readers who come across same issue

regards Dean

[venom6pak]

I see what you want it to do though -remain highlighted for the current page.

You can do that by adding another class, say - pageselected, in the css (addition highlighted):

.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a.pageselected, .ddsmoothmenu ul li ul li a:hover {
	color: #000000;
	background: #2EFF03;
	border-bottom: 2px solid #d2f476;
}

Now on each page where you want that page's trigger to remain highlighted, instead of selected (which the script controls) add that class (pageselected) to its trigger. For example, on the About page:

        <div id="mainmenu" class="ddsmoothmenu">
            <ul>
              	<li><a href="index.html">Home</a></li>
          		<li><a href="about.html" class="pageselected">About</a>
                    <ul>
                        <li><a href="#">Background</a></li>
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Man . . .

Hi John or anyone else reading , I have only just got round to trying out this solution but I cannot get it to stay selected, the css and scripts untouched offer a selected view if i refresh the screen but with the addition of the suggested pageselected class instead of the selected class still will not display the background to show the current page, in fact this new addition now stops the link from displaying a background even if i refresh unless i have missed something out somewhere? here is the code i have changed as per the demonstration


code below i added one line highlighted red:

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
	font-weight: 500;
	width: 120px; /*width of sub menus*/
	padding: 0 10px;
	margin: 0;
	line-height: 24px;
	height: 24px;
	font-size: 12px;
	border-top-width: 0;
	text-align: left;
	background: none;
}

.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a.pageselected, .ddsmoothmenu ul li ul li a:hover {
	color: #000000;
	background: #2EFF03;
	border-bottom: 2px solid #d2f476;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

Code below i added pageselected class to the link highlighted red and removed the selected class:

<li><a href="web-design.html" class="pageselected">Web Design</a>
                	<ul>
 <li><a href="company-aims-web-design.html">Company Aims</a></li>
 <li><a href="bespoke-web-design.html">Bespoke Design</a></li>
 <li><a href="economic-web-design.html">Economic Design</a></li>
 <li><a href="modern-web-technologies.html">Modern Technologies</a></li>
 <li><a href="responsive-web-design.html">Responsive Design</a></li>
                  	</ul>
                </li>

any suggestions guys? the contact page and the home page that both have no drop down extra links work exactly how i would like them all to work ie staying highlighted when on page to keep it consistent really appreciate your time

[jscheuer1]

Please include a link to the page on your site that contains the problematic code so we can check it out.

[venom6pak]

Please include a link to the page on your site that contains the problematic code so we can check it out.

Hi John Thanks for your reply, the website in question is the following

www.signoriwebsolutions.com

it appears as if the hover feature removes the selected class and the new pageselected class which displays (the lime green), if i click on a tab and very quickly move away sometimes the page tab is highlighted green as if quickly moving away avoids the hover as the new page is loaded.

regards
Dean

[jscheuer1]

I'm not sure how this happened, I may have misread the css, misunderstood what level of the menu we were targeting, or - who knows. But where you have (highlighted to be removed):

.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li ul li a.pageselected,.ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	color: black;
	background: #2EFF03;
	border-bottom: 5px solid #000000;
}

Make that:

.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a.pageselected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	color: black;
	background: #2EFF03;
	border-bottom: 5px solid #000000;
}

[venom6pak]

Thankyou very much John that last suggestion worked first time, very much appreciated

Thanks for your time and expertise