PDA

View Full Version : Resolved Mouseover Tabs Menu



jhogle
11-24-2008, 04:45 PM
1) Script Title: Mouseover Tabs Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.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
11-25-2008, 07:51 AM
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
11-25-2008, 12:56 PM
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/newsite/default2.htm

Much appreciated

ddadmin
11-26-2008, 07:49 AM
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
12-11-2008, 04:00 PM
Issue resolved. Thank you!