SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Attaching a Dropdown Menu to an Img

    Hi all,

    I posted this is another thread but am not sure I put my point across properly.

    Anyway, what I want is to attach a drop downmenu to an image, and was just wondering how i'd go about doing it.

    Cheers

    Tryst

  2. #2
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first post doesn't really indicate what I want, does it? :s

    Ok, from the following piece of HTML code (a sliced navigation image). I want the highlighted (bold) image/link to have a drop-down menu attached to it.

    <
    HTML Code:
    TABLE WIDTH="800" BORDER="0" CELLPADDING="0" CELLSPACING="0">
    	<TR><TD bgcolor="#FFFFFF" width="60" height="63"></TD>
    	       <TD><IMG SRC="templates/images/home_nav_12.gif" WIDTH="139" HEIGHT="64" ALT=""></TD>
    	       <TD[B]><a href="products.php"><IMG SRC="templates/images/home_nav_13.gif" WIDTH="118" HEIGHT="64" ALT="Products"></a>[/B]</TD>
    	       <TD><a href="news.php"><IMG SRC="templates/images/home_nav_14.gif" WIDTH="120" HEIGHT="64" ALT="Latest News"></a></TD>
    	       <TD><a href="faq.php"><IMG SRC="templates/images/home_nav_15.gif" WIDTH="120" HEIGHT="64" ALT="F.A.Q."></a></TD>
                        <TD><a href="contact.php"><IMG SRC="templates/images/home_nav_16.gif" WIDTH="139" HEIGHT="64" ALT="Contact"></a></TD>
    	       <TD bgcolor="#FFFFFF" width="104" height="64"></TD>
    	</TR>
    </TABLE>
    Ok, now the dropdown menu I want attached to this image/link is..

    HTML Code:
    <ul id="nav">
    	<li>Sunfishes	
          <ul>
            <li><a href="">Blackbanded sunfish</a></li>
            <li><a href="">Shadow bass</a></li>
            <li><a href="">Ozark bass</a></li>
            <li><a href="">White crappie</a></li>
          </ul>
    	</li>
    </ul>
    The CSS i have drawn up so far is to try and tackle this is...

    ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    }

    li { /* all list items */
    float: left;
    position: relative;
    width: 10em;
    }

    li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    }

    li a {
    text-decoration: none;
    color: #FFFFFF;
    }

    li a:hover {
    background-color: #880000;
    color: #000000;
    display: block;
    }


    I also have some JavaScript to...

    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;


    Now this code was taken from the suckerfish tutorial, and has been modfied (reduced even) to try and reflect my needs. The suckerfish tutorial made use of a 2nd level of lists which I had to take out (will need a 2nd level of lists later, though) to try and simply get the dropdown menu to work from a rollover from an image. Since adjusting the CSS to remove the 2nd level of lists I am kinda lost.

    Hope someone can help me here.

    Cheers guys

    Tryst

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think I've gone blind (yellow text on a light grey background - ugh).

    Anyway, I thinkthe problem is that you have left the second level list out of the code which is the bit that gets displayed on and off.

    Very roughly your existing code should be like this.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {background:#000FFF}
    ul { /* all lists */
     padding: 0;
     margin: 0;
     list-style: none;
    }
    li { /* all list items */
     float: left;
     position: relative;
     width: 118px;
    }
    li ul { /* second-level lists */
     display: none;
     position: absolute;
     top: 4em;
     left: 0;
    }
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
     top: auto;
     left: auto;
    }
    li:hover ul, li.over ul { /* lists nested under hovered list items */
     display: block;
    }
    li a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    }
    li a:hover {
    background-color: #880000;
    color: #000000;
    }
    table.dropdown {width:800px}
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
     if (document.all&&document.getElementById) {
      navRoot = document.getElementById("nav");
      for (i=0; i<navRoot.childNodes.length; i++) {
       node = navRoot.childNodes[i];
       if (node.nodeName=="LI") {
    	node.onmouseover=function() {
    	 this.className+=" over";
    	}
    	node.onmouseout=function() {
    	 this.className=this.className.replace(" over", "");
    	}
       }
      }
     }
    }
    window.onload=startList;
    //--><!]]></script>
    </head>
    <body>
    <table class="dropdown" cellpadding="0" cellspacing="0">
      <tr>
    	<td bgcolor="#FFFFFF" width="60" height="63"></td>
    	<td><img src="templates/images/home_nav_12.gif" width="139" height="64" alt="" /></td>
    	<td> <ul id="nav">
    		<li><a href="products.php"><img src="templates/images/home_nav_13.gif" width="118" height="64" alt="Products" /></a> 
    		  <ul>
    			<li><a href="">Blackbanded sunfish</a></li>
    			<li><a href="">Shadow bass</a></li>
    			<li><a href="">Ozark bass</a></li>
    			<li><a href="">White crappie</a></li>
    		  </ul>
    		</li>
    	  </ul>
     </td>
    	<td><a href="news.php"><img src="templates/images/home_nav_14.gif" width="120" height="64" alt="Latest News" /></a></td>
    	<td><a href="faq.php"><img src="templates/images/home_nav_15.gif" width="120" height="64" alt="F.A.Q." /></a></td>
    	<td><a href="contact.php"><img src="templates/images/home_nav_16.gif" width="139" height="64" alt="Contact" /></a></td>
    	<td bgcolor="#FFFFFF" width="104" height="64"></td>
      </tr>
    </table>
    </body>
    </html>
    That should get something working so that you can now play around with it.

    (If I were you I'd get rid of the table and just use css.)

    Paul

  4. #4
    SitePoint Zealot matiefert's Avatar
    Join Date
    Nov 2001
    Location
    Bay area, California
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a simpler code, which might meet your needs also. The JavaScript is essentially:
    Code:
    <script type="text/javascript" language="JavaScript">
      var allmenus=[ 'List1', 'List2', 'List3', 'List4', 'List5' ]
    	function showmenu(menuid) { 
      for (i=0;i<allmenus.length;i++) {
      if (allmenus[i].match(menuid)) {
        document.getElementById(menuid).style.visibility='visible'; 
      } else {
        if (document.getElementById(allmenus[i]).style.visibility='visible') 
        {document.getElementById(allmenus[i]).style.visibility='hidden'; } } } }
    </script>
    And the code associated with each list is in the form (I've replaced the unimportant stuff with three dots):

    Code:
    <div id="Item2" style="..."><a href="Subject2/index.html" onMouseOver="showmenu('List2')"><img src="images/subject2.jpg" ...></a>
    <div id="List2" style="... visibility: hidden"> 
    <table ...>
    <tr><td>Name of subject 2<br>
    <a href="...">Link to first menu item</a><br>
    <a href="...">Second menu item</a><br>
    </td></tr></table></div></div>
    I can't remember why I have the table in there, instead of just putting pretty borders on the internal div. You can see it in action at http://www.tiefert.org/

    hope that helps!

    cheers,

    Marj

  5. #5
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, Paul. I've fiddled with the code and have customised it to suit my website.

    Also, cheers matiefert for the code.

    Now, just to complicate things further Say I wanted to add other dropdown menus that were related to each of the entries in the initial dropdown menu, how would I implement that?

    Would I need another piece of JavaScript (like the one that is used for the 1st dropdown menu) for each other dropdown menu?

    Cheers

    Tryst

  6. #6
    SitePoint Zealot matiefert's Avatar
    Join Date
    Nov 2001
    Location
    Bay area, California
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You ought to be able to use variables so as to have only one script that works for all menues and all submenues.

    cheers,

    Marj

  7. #7
    SitePoint Zealot bo diddly's Avatar
    Join Date
    Nov 2002
    Location
    uk - worcester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't this a suckfish menu?
    You're not drunk if you can lie on the floor without holding on

    www.idezign.me.uk
    www.theonlinediary.com

  8. #8
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah

    Why? Does he also show how to do multi-level dropdown menus?

    Cheers

    Tryst

  9. #9
    SitePoint Zealot bo diddly's Avatar
    Join Date
    Nov 2002
    Location
    uk - worcester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no idea. I couldn't get his menu to display properly in Opera7 anyway, the menu sat off to the right.
    You're not drunk if you can lie on the floor without holding on

    www.idezign.me.uk
    www.theonlinediary.com

  10. #10
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange. I have it working to my liking now after some modifications. Just need to implement a 2nd level of dropdown boxes now :s

    Tryst


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •