1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

mouse over link options...help

Discussion in 'Web Design & Development' started by paulb100, Oct 1, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. paulb100

    paulb100 Thread Starter

    Joined:
    Mar 17, 2005
    Messages:
    1,874
    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
     
  2. TheRobatron

    TheRobatron

    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.
     
  3. paulb100

    paulb100 Thread Starter

    Joined:
    Mar 17, 2005
    Messages:
    1,874
    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
     
  4. TheRobatron

    TheRobatron

    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?
     
  5. paulb100

    paulb100 Thread Starter

    Joined:
    Mar 17, 2005
    Messages:
    1,874
    drop-down menu
     
  6. TheRobatron

    TheRobatron

    Joined:
    Oct 25, 2007
    Messages:
    551
    OK if you post the menu items you want, I can give you some code.
     
  7. paulb100

    paulb100 Thread Starter

    Joined:
    Mar 17, 2005
    Messages:
    1,874
    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
     
  8. TheRobatron

    TheRobatron

    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
     
  9. paulb100

    paulb100 Thread Starter

    Joined:
    Mar 17, 2005
    Messages:
    1,874
    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
     

    Attached Files:

  10. caraewilton

    caraewilton

    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.
     
  11. caraewilton

    caraewilton

    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
     
  12. paulb100

    paulb100 Thread Starter

    Joined:
    Mar 17, 2005
    Messages:
    1,874
    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
     
  13. caraewilton

    caraewilton

    Joined:
    Nov 7, 2007
    Messages:
    1,352
    Oh well that rules that out then. What type of doctype are you using?
     
  14. TheRobatron

    TheRobatron

    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.
     

    Attached Files:

  15. paulb100

    paulb100 Thread Starter

    Joined:
    Mar 17, 2005
    Messages:
    1,874
    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
     
  16. Sponsor

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 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/755134

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice