mouse over link options...help

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

paulb100

Thread Starter
Joined
Mar 17, 2005
Messages
1,894
I use Dreamweaver 8 and Frontpage 03

How do I make my links display a sub-set of links/options when my mouse hovers over a link?

thanks
 
Joined
Oct 25, 2007
Messages
551
You could use Javascript to change the innerHTML property of a div on an onHover event, or you could create a dropdown menu in CSS (see here). You could do this with javascript, but it's always better to do it with CSS where possible.
 

paulb100

Thread Starter
Joined
Mar 17, 2005
Messages
1,894
i dont know how to apply it? im newbie - im not really using CSS just building basic pages and setting my own properties.... ive tried copying the code into a new page to test but it just shows the links down the page
 
Joined
Oct 25, 2007
Messages
551
Which type of effect do you want? Do you want the drop-down menu like in the example, or a bar below the menu that displays extra links?
 

paulb100

Thread Starter
Joined
Mar 17, 2005
Messages
1,894
thanks...


The title of the link is WHAT WE OFFER

1-2-1 Personal Training
Fitness Camps/Classes
Corporate Services
Nutrition / Weight Management
Sports Massage Therapy
Specialist Running Packages
Postural Assessments


Thanks again
 
Joined
Oct 25, 2007
Messages
551
Here's the HTML for the menu and the CSS. You'll have to edit the href attributes to change where the link points to and you can change the title attirbute so when a user hovers over the link it'll display a tool tip with your text. Add this CSS into the <head> section of the page (unless you want it on multiple pages, in which case you should put it in an external file):

HTML:
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:150px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
</style>
Then put the HTML between the <body> tags:

HTML:
<!-------------------------

********MENU STARTS********

--------------------------->
<div class="menu">

<ul>
<li><a class="hide" href="menu/index.html">WHAT WE OFFER</a>

<!--[if lte IE 6]>
<a href="menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="">1-2-1 Personal Training</a></li>
	<li><a href="#" title="">Fitness Camps/Classes</a></li>
	<li><a href="#" title="">Corporate Services</a></li>
	<li><a href="#" title="">Nutrition / Weight Management</a></li>
	<li><a href="#" title="">Sports Massage Therapy</a></li>
	<li><a href="#" title="">Specialist Running Packages</a></li>
	<li><a href="#" title="">Postural Assessments</a></li>
	
	</ul>
</div>

<!-------------------------

*********MENU ENDS*********

--------------------------->
HTH
 

paulb100

Thread Starter
Joined
Mar 17, 2005
Messages
1,894
thanks very much - thing is it only works in IE7..?? I use Firefox and it just displays links down side of page in FF3.... see screenshot
 

Attachments

Joined
Nov 7, 2007
Messages
1,352
Hi Paul. I have used quite a few of stu nichols' menus and other things. His stuff tends to work best when the page validates. Have a look here.
Although I am not saying that this is the only problem.
Where have you placed the css. On your style sheet or in your html page? I have found that cleaning up the html and css helps get things working.
Another thing I have found (although have no academic knowledge to base this on) a lot of Stu's techniques tend to work better on pages that have been set up using css as apposed to layout tables.
 
Joined
Nov 7, 2007
Messages
1,352
Another thought. Try getting the menu to work on a new page. Make sure your doc type is xhtm-strict
 

paulb100

Thread Starter
Joined
Mar 17, 2005
Messages
1,894
I just put it into pages where he said too - Ive been using tables but tested it on a new html page - when previewed in IE7 it works but in FF3 it doesnt...theres no other code on the page except what a new html page starts with and the code ive been told to add....

It doesnt matter cos it doesnt look like I can use it anyway - Ive already created the page using tables cos im not familiar with CSS, ive just downloaded a CSS Video Tutorial so I will have a look at that - is CSS relatively new? I done Dreamweaver courses in 2005 and whilst CSS was introduced there as a means to set styles of font and colors etc to be used in pages - it wasnt used instead of tables?? my links are in cells
 
Joined
Oct 25, 2007
Messages
551
This seems rather odd - I wrote the code while testing it in FF3. Here's the actual file that I wrote - it works fine in IE 7 and FF3 (you'll have to change the extension from .txt to .htm or .html). Are you putting the CSS in the head and the HTML in the body?

CSS has been around for a while, but a lot of people still use tables for layout (though slowly most are moving to CSS because of the many advantages). You can combine CSS with a tabular layout; just place the div inside the <td>. I suspect that problems may occur however if there are nested tables because browsers can get confused over things like that (though that's just speculation - I haven't tried it). Converting your site to CSS would be a good move, but I think it'll still work fine as it is with the CSS.
 

Attachments

paulb100

Thread Starter
Joined
Mar 17, 2005
Messages
1,894
Ive copied your code from text file into a BLANK new HTML doc in Dreamweaver CS3 and again it only works in IE7 - I have to say the code is laid out different to the 1st lot but wields exactly the same results - yes I was putting the code in the right places....

FF3 does have Adblock but with that disabled it still happens...??

Im sure its related to

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

because if you look at my screenshot FF3 displays the DEMOS as a link but IE7 doesnt display anything about DEMOS - when I remove this code nothing appears in FF3 but still works as normal in IE7


Ive gotten some CSS tutorials - gunna have a look at them
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top