SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Converting menu into CSS pop-up menu

    Hi,

    I have a page that is popping up a list (static info using CSS) when you mouseover links on the left. I need to change this "popped-up" info into individual links. So, for example, when I mouseover "Services", I am able to move my cursor onto the list appearing in the center of the page and select "Computer Rental".

    I have placed the code below so it will be easier to see what I'm talking about. I appreciate any help you can give me. Thanks!

    -----------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>Resource Guide</title>
    <style type="text/css">
    <!--
    body {position: relative; background: #cab188; margin: 0; padding: 0;}

    div#links {
    top: 80px;
    left: 0;
    width: 200px;
    height: 400px;
    font: bold 1em Georgia, Times, "Times New Roman", serif;
    z-index: 100;
    }

    div#links a {
    display: block;
    text-align: center;
    font: bold 1em Georgia, Times, "Times New Roman", serif;
    padding: 6px 10px;
    margin: 0 0 0px;
    border: 3px double #600;
    /* border-width: 0; */
    text-decoration: none;
    color: #FFC;
    background: #600;
    }

    div#links a:hover {
    color: #e4d8c2;
    background: #930;
    border: 3px double #cab188;
    }

    div#links a span {display: none;}

    div.backdrop {
    background-image: url("http://www.mysite.com/chrischo.jpg");
    background-position: top center;
    filter:alpha(opacity=50);
    opacity:.50;
    z-index: -1;
    display: block;
    position: absolute;
    top: 90px;
    left: 240px;
    width: 450px;
    height: 280px;
    padding: 5px;
    margin: 10px;
    z-index: 100;
    text-align: left;
    border: 2px groove #e4d8c2;
    }

    div#links a:hover span {
    display: block;
    position: absolute;
    top: 90px;
    left: 240px;
    width: 450px;
    padding: 5px;
    margin: 10px;
    z-index: 100;
    color: #300;
    /* background: #cab188;*/
    font: 10px Verdana, sans-serif;
    text-align: left;
    border-left: 2px groove #e4d8c2;
    border-right: 2px groove #e4d8c2;
    border-top: 2px groove #e4d8c2;
    }

    div#content {
    position: absolute;
    top: 26px;
    left: 25px;
    right: 25px;
    color: #300;
    background: #e4d8c2;
    font: 13px Verdana, sans-serif;
    padding: 10px;
    border: solid 5px #600;
    }

    div#content p {margin: 0 1em 1em;}
    div#content h3 {margin-bottom: 0.25em;}

    h1 {
    margin: -5px -5px 0.5em;
    padding: 15px 0 5px;
    text-align: right;
    background: #300;
    color: #930;
    letter-spacing: 0.5em; /*text-transform: lowercase;*/
    font: bold 22px "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;
    height: 28px;
    vertical-align: middle;
    white-space: nowrap;
    }

    -->
    </style>
    </head>
    <body>
    <div>
    <div id="content">
    <h1>Resource Guide</h1>
    <div>Welcome to the Online Resource Guide! Please hover your mouse over each link for further information.</div>

    <br />

    <div class="backdrop">&nbsp;</div>

    <div id="links">

    <a href="services.php">Services <span>Information on services provided, includingul>
    <li>Emergency Contacts </li>
    <li>Computer Rental</li>
    <li>Dry-Cleaning/Laundry</li>
    <li>Grocery Delivery</li>
    <li>Hours of Operation</li>
    <li>Photocopying </li>
    <li>Planning/Publicizing an Event</li>
    <li>Police/Security</li>
    </ul></span></a>

    <a href="life.php">Life <span>There are other things to do then study! <ul>
    <li>Box Office</li>
    <li>Events Calendar</li>
    <li>ID Office</li>
    <li>Hours of Operation</li>
    </ul></span></a>

    <a href="hw.php">Health and Wellness <span>Wellness - physical, mental, emotional and spiritual: <ul>

    <li>Alcohol and Drug Use and Abuse</li>
    <li>Athletics, Exercise, and Recreation</li>
    <li>Counseling Services</li>
    <li>Health Services </li>
    <li>Nutrition Services</li>
    <li>Planning Healthy Events</li>
    <li>Religious Life </li>
    </ul></span></a>

    </div>


    </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I just tested your code. So as you said when you mouseover the "Services", you can see informations. One of these infos is "computer Rental". Now if i understood your Question properly, Try maybe to change the mouseover effect on "Services" to onClick effect. and if you want people choose "computer Rental" make "coputer Rental" a link to open the page you wanted.

    Hope it helps

    Mickael

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not sure what you mean.

    In what way should I use the OnClick effect to complete the menu?


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
  •