Results 1 to 5 of 5

Thread: Noobie with vertical chromemenu question

  1. #1
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Noobie with vertical chromemenu question

    Hi,

    I am using the drop down chromemenu - it's great. I have it horizontal on most of my pages, but I want a vertical version for my start page. I actually figured out how to position each menu. I just add a 1 row, 1 column table and place a single menu in it with a defined width:
    <div class="chromestyle" id="chromemenu" style="width=140">
    <ul><li><a href="#" rel="dropmenu1"><font size="3">About CLIMB</font></a>
    </ul>
    </div>
    <div id="dropmenu1" class="dropmenudiv" style="width: 140" align="center">
    <a href="mission.html">Our Mission</a> <a href="admin.html">Who We Are</a> <a href="logo.html">Our Logo</a><a href="contact.html">Contact CLIMB</a></div>

    Then I just add another small table where I want it and copy and paste this and redifine each consecutive menu as "chromemenu2" etc.

    Now, i can't figure out how to make the dropdown menus come out from the side instead of from directly below it. Any suggestions?

    I can't publish the site, so here's my html and css:

    *****************
    html

    ***************
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="generator" content="Adobe GoLive 6">
    <title>Welcome to CLIMB!</title>
    <link href="CLIMB.css" rel="stylesheet" media="screen">
    <style type="text/css" media="screen"><!--
    #wrapper { text-align: center; position: relative; top: 0px; left: 0px; visibility: visible }
    --></style>
    <link rel="stylesheet" type="text/css" href="chromestylev.css">
    <script type="text/javascript" src="GeneratedItems/chrome.js"></script>
    </head>

    <body bgcolor="#ffffff" text="black" link="#69a0c3" vlink="#328c2d" alink="#006496" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
    <div id="wrapper">
    <div align="center">
    <csscriptdict import>
    <script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
    </csscriptdict>
    <csactiondict>
    <script type="text/javascript"><!--

    // --></script>
    </csactiondict>
    </div>
    </div>
    <table width="756" border="0" cellspacing="0" cellpadding="0" background="images/images/background.gif" cool gridx="5" gridy="5" height="672" showgridx showgridy usegridx usegridy>
    <tr height="5">
    <td width="5" height="671" rowspan="6"></td>
    <td width="7" height="190" rowspan="3"></td>
    <td width="743" height="5" colspan="2"></td>
    <td width="1" height="5"><spacer type="block" width="1" height="5"></td>
    </tr>
    <tr height="55">
    <td width="743" height="55" colspan="2" valign="top" align="left" xpos="12"><img src="header.gif" alt="" height="55" width="730" border="0" livesrc="images/images/header.gif"></td>
    <td width="1" height="55"><spacer type="block" width="1" height="55"></td>
    </tr>
    <tr height="130">
    <td width="138" height="130"></td>
    <td width="605" height="611" rowspan="4" valign="top" align="left" xpos="150"><csobj csref="images/1CLIMBanim_min.html" h="525" occur="93" t="Component" w="455"><!-- ImageReady Slices (1CLIMBanim_min.psd) --><img src="images/images/1CLIMBanim_min.gif" width="452" height="522" alt=""> <!-- End ImageReady Slices --></csobj></td>
    <td width="1" height="130"><spacer type="block" width="1" height="130"></td>
    </tr>
    <tr height="145">
    <td width="145" height="145" colspan="2" valign="top" align="left" xpos="5">
    <table width="135" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100">
    <div class="chromestyle" id="chromemenu" style="width=140">
    <ul>
    <li><a href="#" rel="dropmenu1"><font size="3">About CLIMB</font></a>
    </ul>
    </div>
    <div id="dropmenu1" class="dropmenudiv" style=" background-color: #fff; position: absolute; z-index: 100; top: 0px; left: 100px; width: 140px; visibility: hidden" align="center">
    <a href="mission.html">Our Mission</a> <a href="admin.html">Who We Are</a> <a href="logo.html">Our Logo</a><a href="contact.html">Contact CLIMB</a></div>
    </td>
    </tr>
    </table>
    </td>
    <td width="1" height="145"><spacer type="block" width="1" height="145"></td>
    </tr>
    <tr height="160">
    <td width="145" height="160" colspan="2" valign="top" align="left" xpos="5">
    <table width="135" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100">
    <div class="chromestyle" id="chromemenu2" style="width=140">
    <ul>
    <li><a href="#" rel="dropmenu2"><font size="3">CLIMB Scholars</font></a>
    </ul>
    </div>
    <div id="dropmenu2" class="dropmenudiv" style=" background-color: #fff; position: absolute; z-index: 100; top: 0px; left: 100px; width: 140px; visibility: hidden" align="center">
    <a href="current.html">Current Scholars</a><a href="pics.html">Event Photos</a></div>
    </td>
    </tr>
    </table>
    </td>
    <td width="1" height="160"><spacer type="block" width="1" height="160"></td>
    </tr>
    <tr height="176">
    <td width="145" height="176" colspan="2" valign="top" align="left" xpos="5">
    <table width="135" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100">
    <div class="chromestyle" id="chromemenu3" style="width=140">
    <ul>
    <li><a href="#" rel="dropmenu3"><font size="3">CLIMB Mentors</font></a>
    </ul>
    </div>
    <div id="dropmenu3" class="dropmenudiv" style=" background-color: #fff; position: absolute; z-index: 100; top: 0px; left: 100px; width: 140px; visibility: hidden" align="center">
    <a href="fmentors.html">Faculty Mentors</a> <a href="pmentors.html">Peer Mentors</a> <a href="rmentors.html">Research Mentors</a></div>
    </td>
    </tr>
    </table>
    </td>
    <td width="1" height="176"><spacer type="block" width="1" height="176"></td>
    </tr>
    <tr height="1" cntrlrow>
    <td width="5" height="1"><spacer type="block" width="5" height="1"></td>
    <td width="7" height="1"><spacer type="block" width="7" height="1"></td>
    <td width="138" height="1"><spacer type="block" width="138" height="1"></td>
    <td width="605" height="1"><spacer type="block" width="605" height="1"></td>
    <td width="1" height="1"></td>
    </tr>
    <csnopos>
    <cspos xpos="0" ypos="0">

    </cspos>
    </csnopos>
    </table>
    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu", "chromemenu2", "chromemenu3")
    </script>

    </body>

    </html>

    *********************

    css

    *********************

    .chromestyle { font-weight: bold; text-align: center; border: 0px #bbb }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul { background: url(images/2chromebg.gif) repeat-x center; text-align: center; margin: 0; padding: 4px 0; border: 0px #bbb; width: 100&#37;; height: 100% }
    .chromestyle ul li { display: inline }
    .chromestyle ul li a { color: #494949; font-family: "Times New Roman", Georgia, Times; text-decoration: none; margin: 0; padding: 0; border-top: 0px none; border-right: 0px solid #dadada; border-bottom: 0px none; border-left: 0px none; width: 100% }

    .chromestyle ul li a:hover { color: #494949; background: url(images/greenchrome.jpg) repeat-x center }

    .chromestyle ul li a[rel]:after { }


    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv { color: #aaa; font: 13px/18px "Times New Roman", Times, Georgia; background-color: white; border-style: solid; border-width: 1px 1px 0 1px; border-color: #bbb; position: relative; z-index: 100; top: 0px; left: 100%; width: 100%; visibility: hidden; filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4) }


    .dropmenudiv a { font-weight: bold; text-decoration: none; text-indent: 3px; padding: 2px 0; border-bottom: 1px solid #bbb; top: 0px; left: 100%; width: 100%; display: block }

    * html .dropmenudiv a { left: 100%; width: 100% }

    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }


    Thanks!
    Last edited by Nzyme; 08-15-2007 at 09:59 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

    Your best bet is probably just to start with Anylink CSS Vertical Menu instead, and style the main vertical menu to look the way you want it to, such as similar to Chrome Menu. A few vertical menu interfaces here.

  3. #3
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can I center the drop under the menu?

    Sorry about leaving out the link:
    http://www.dynamicdrive.com/dynamici...rome/index.htm

    I have the menus working in a vertical layout, but I'm still not sure how to change the position of the dropdown. If I wanted to center it directly under each menu item, how would i do that? I have the text centered within each dropped box, but the box itself is directly underneath the first word of the menu title.

    I still can't upload it - waiting for approval for server space.

    Thanks,
    Nzyme

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Are you now using the Anylink CSS Vertical Menu, or still the Chrome menu? The former as you can see is intended from the start to drop down to the right of the activating link.

  5. #5
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Chromemenu

    I'm using Chromemenu. My question is: what part of the javascript or css is telling the menu where to drop down?

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
  •