PDA

View Full Version : Noobie with vertical chromemenu question



Nzyme
08-15-2007, 09:49 PM
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: progid:DXImageTransform.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!

ddadmin
08-16-2007, 06:44 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Your best bet is probably just to start with Anylink CSS Vertical Menu (http://www.dynamicdrive.com/dynamicindex1/anylinkcss2.htm)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 (http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/).

Nzyme
08-16-2007, 07:08 PM
Sorry about leaving out the link:
http://www.dynamicdrive.com/dynamicindex1/chrome/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

ddadmin
08-17-2007, 02:12 AM
Are you now using the Anylink CSS Vertical Menu (http://www.dynamicdrive.com/dynamicindex1/anylinkcss2.htm), 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.

Nzyme
08-17-2007, 03:18 PM
I'm using Chromemenu. My question is: what part of the javascript or css is telling the menu where to drop down?