mouse over link options...help

paulb100 · Oct 1, 2008

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

TheRobatron · Oct 3, 2008

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 · Oct 3, 2008

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

TheRobatron · Oct 4, 2008

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 · Oct 4, 2008

drop-down menu

TheRobatron · Oct 4, 2008

OK if you post the menu items you want, I can give you some code.

paulb100 · Oct 4, 2008

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

TheRobatron · Oct 5, 2008

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 · Oct 5, 2008

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

caraewilton · Oct 5, 2008

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.

caraewilton · Oct 5, 2008

Another thought. Try getting the menu to work on a new page. Make sure your doc type is xhtm-strict

paulb100 · Oct 5, 2008

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

caraewilton · Oct 5, 2008

Oh well that rules that out then. What type of doctype are you using?

TheRobatron · Oct 5, 2008

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.

paulb100 · Oct 5, 2008

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



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

mouse over link options...help

paulb100

TheRobatron

paulb100

TheRobatron

paulb100

TheRobatron

paulb100

TheRobatron

paulb100

Attachments

caraewilton

caraewilton

paulb100

caraewilton

TheRobatron

Attachments

paulb100

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

Welcome to Tech Support Guy!

Latest posts

Staff online

Members online