Skip navigation
CS3jim
CS3jim Calculating status...
Currently Being Moderated

Drop down menu from image / link to multiple sites

Apr 22, 2011 4:42 AM

I have 7 images in my html page that need to link out of the site to more than 1 website (each).. so I need to have a drop down menu so that the visitor can choose what site they want to go to.  There are seven images side by side and all will go out to, multiple, different sites.  Example: a baseball is one of the images.  The basebal has to go to mlb.com and to baseball canada. 

 

How do I make a drop down menu when a mouse is hovered over it.  It is ok if you suggest a menu maker software (third party)- but most of those are text driven. My page is already built. (made it in my cs3 photoshop/sliced) The dynamic drive ones are too confusing for me.

 

If you think I should do it a different way, please feel free to suggest - thanks. (If this ball only had to link to one site I would be fine..)

 

Baseball_Ball.png

719 Views   4 Replies   Latest reply: CS3jim, Apr 22, 2011 8:39 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Apr 22, 2011 6:08 AM   in reply to CS3jim
    Report

    If you are using DW, try the Spry menu as follows

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style>
    ul.MenuBarHorizontal a span {
        visibility: hidden;   
    }
    ul.MenuBarHorizontal a#basball {
        background: url(images/Baseball_Ball.png) no-repeat;
        height: 100px;
    }

    </style>
    </head>

    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a id="basball" class="MenuBarItemSubmenu" href="#"><span>Baseball</span></a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    Gramps

     

    PS To see it in action go to http://pleysier.com.au/jim

     

    Message was edited by: altruistic gramps

     
    |
    Mark as:
  • CS3jim
    Currently Being Moderated
    2. CS3jim,
    Apr 22, 2011 11:11 AM   in reply to Ben Pleysier
    Report

    Interesting.  I have used a spry before but not in a while.  I love how the menu shows up with the cursor over it and it drops down. I don't need the menu to the right of it however (and that shows on the page you have given me.) http://pleysier.com.au/jim

    It would get in the way of the other balls actually.

     

    balls_row.jpg

     

    I am going to have a look at the code and see if I can remove that menu to the right (might need your help on that). I really, really appreciate the help on this as I am growing in my skills.

     

    Here is the page:

    http://www.jimwww.com/rh/sports/index2.html (right now the baseball only goes to mlb.com)

     

     

    Update - I am much closer with this page but the menu is not hidden.

    http://www.jimwww.com/rh/sports/index2a.html# (not sure why there is a pound sign after the url now either. (sorry to be such trouble)

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Apr 22, 2011 8:24 PM   in reply to CS3jim
    Report

    I gave you an example of how to give each menu item a unique graphic. The menu is a normal SpryMenuBar exactly as Dreamweaver will place in your document. Using the example, you can change the other menu items into images.

     

    When you say that you are having a problem, I do not doubt that when I see that you have completely deviated from what Dreamweaver and I have given you. Have a look at your code

     

               <ul id="MenuBar1" class="MenuBarVertical">
              </ul>
                  </li>
                  <li><a href="http://www.mlb.com" target="_blank">Item 2</a></li>
                  <li><a href="http://www.baseball.ca" target="_blank">Item 4</a></li>
              </ul>

     

    and have a look at my equivalent

     

    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a id="basball" class="MenuBarItemSubmenu" href="http://mlb.mlb.com/index.jsp"><span>Baseball</span></a>
        <ul>
          <li><a href="http://www.mlb.com">Item 2</a></li>
          <li><a href="http://www.baseball.ca">Item 4</a></li>
        </ul>
      </li>
    <ul>

    or better still, have a look at the updated menubar here http://pleysier.com.au/jim/

     

    Gramps

     
    |
    Mark as:
  • CS3jim
    Currently Being Moderated
    4. CS3jim,
    Apr 22, 2011 8:39 PM   in reply to Ben Pleysier
    Report

    Yes I am looking at your code.. and learning.  Getting it into my head of what it is achieving.  I thought vertical was up down but clearly in this code it is horizontal.  I did not need all the sublevels and that is why I took them out.  I just needed drop down that leads out to a few links.

     

    Thank you for being so generous with your time.  I really need to know this and you are helping me learn.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points