Mouseover Tabs Menu

[jhogle]

1) Script Title: Mouseover Tabs Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...seovertabs.htm

3) Describe problem: I would like some of my tabs(text) when I mouseover to not be a link, just its submenu's. Everything else is working great!

<div id="mytabsmenu" class="tabsmenuclass"><span class="style1">
<a href="http://www.ekcsk12.org/faculty/hogle/assignments.htm"[selected]>Assignments/Notes</a>
<a href="http://www.ekcsk12.org/faculty/hogle/grades.htm"> - Grades </a>
<a href="http://www.javascriptkit.com" rel="gotsubmenu"> - Algebra </a>
<a href="http://www.cssdrive.com" rel="gotsubmenu"> - Geometry </a> (( I don't want this to be a link))
<a href="http://www.cssdrive.com" rel="gotsubmenu"> - Algebra 1b </a>
<a href="http://www.cssdrive.com" rel="gotsubmenu"> - Math 7/8 </a>
<a href="http://www.cssdrive.com" rel="gotsubmenu"> - Links </a>
<a href="http://www.ekcsk12.org/departments/math.htm"> - Math Department</a>
</span></div>


I am using a page property that changes the link color and underlines it on mouseover. My page is being developed @ http://www.ekcsk12.org/faculty/hogle/newsite/default2.

Thanks

[ddadmin]

Are you saying you wish a particular top tab to not be a link, but just regular text? Why not just disable the link instead, something like:

<div id="mytabsmenu" class="tabsmenuclass"><span class="style1">
<a href="http://www.ekcsk12.org/faculty/hogle/assignments.htm"[selected]>Assignments/Notes</a>
<a href="http://www.ekcsk12.org/faculty/hogle/grades.htm"> - Grades </a>
<a href="http://www.javascriptkit.com" rel="gotsubmenu"> - Algebra </a>
<a href="http://www.cssdrive.com" rel="gotsubmenu"> - Geometry </a> (( I don't want this to be a link))
<a href="#" rel="gotsubmenu" onClick="return false"> - Algebra 1b </a>
<a href="http://www.cssdrive.com" rel="gotsubmenu"> - Math 7/8 </a>
<a href="http://www.cssdrive.com" rel="gotsubmenu"> - Links </a>
<a href="http://www.ekcsk12.org/departments/math.htm"> - Math Department</a>
</span></div>

This is a lot easier than actually removing the link, since the look of the tabs is styled via CSS that assumes each tab to be a link.

[jhogle]

Thank You,
I did try to disable the links and it does work. The new issue is that when I hover over the disabled links they still appear to be links because they change color and underline when hovering over them according to the page properties.

I was hoping for the text to do nothing when hovering over it as it does after trying to visit the link.

<div id="mytabsmenu" class="tabsmenuclass"><span class="style1">
<a href="http://www.ekcsk12.org/faculty/hogle/assignments.htm"[selected]>Assignments/Notes</a>
<a href="http://www.ekcsk12.org/faculty/hogle/grades.htm"> - Grades </a>
<a href="http://www.javascriptkit.com" rel="gotsubmenu"> - Algebra </a>
<a href="#" rel="gotsubmenu" onClick="return false"> - Geometry </a>
<a href="#" rel="gotsubmenu" onClick="return false"> - Algebra 1b </a>
<a href="#" rel="gotsubmenu" onClick="return false"> -Math 7/8 </a>
<a href="#" rel="gotsubmenu" onClick="return false"> - Links </a>
<a href="http://www.ekcsk12.org/departments/math.htm"> - Math Department</a>
</span></div>

http://www.ekcsk12.org/faculty/hogle...e/default2.htm

Much appreciated

[ddadmin]

You can use CSS to disable the hover effects over those "disabled" links. Something like:

<style type="text/css">

a.disabled:link, a.disabled:visited, a.disabled:hover, a.disabled:active{
color: black;
}

</style>

Then inside those disabled links, give them a CSS class of disabled:

<a href="#" rel="gotsubmenu" class="disabled" onClick="return false"> - Geometry </a>

[jhogle]

Issue resolved. Thank you!