PDA

Click to See Complete Forum and Search --> : Drop down list help please.

Lizzie
04-22-2007, 05:16 PM
I am trying to add a drop down list, from a button when hovering over it.
During the last week, I have Googled and found, tons of tutorials and tried probably 20 different ways. None seem to work for me. I end up with a list outside the button or a list with an ugly scroll. I even tried a generator, but the text always ended up either side of the button.
Could someone please help me with this.
Thanks so much.
Lizzie
br3nt
04-22-2007, 10:53 PM
A slight bit more detail, maybe a picture of your problem, or a code would be very beneficial to me, I am willing to help if I can understand the problem a bit more.
Lizzie
04-22-2007, 11:01 PM
Thank you so very much. I'll make a test page and show you what I'm doing in a bit. I tried a minute ago, but the server is apparently down or having problems, but I'll do it asap.
Sadly, I have now deleted all my various and dreadful attempts at doing this.
But when you see the page, you'll get the idea.
Lizzie
Lizzie
04-22-2007, 11:52 PM
OK Br3nt. Here we go...
Open my test page..
http://www.europeancookingvacations.com/test.html
3/4 of the way down, you'll see some buttons. I'm concentrating only on the France button at this point.
I want to be able to hover over it with the mouse and have it drop down to a list of other pages.
At the moment I only have the first of those pages made and it's at..
http://www.europeancookingvacations.com/StJeandeLuz.html
I wanted the text for that drop-down page, to read, St. Jean de Luz
I'll be adding more pages to that drop down list later, but if I could only get the hang of it, I could then be able to do drop-downs from the rest of the buttons as needed.
I always try my best to work things out for myself, before coming here for help, but although I "think" I came close a couple of time, I just never quite got it right.
Your help in this is most appreciated.
Lizzie
Lizzie
04-24-2007, 04:44 PM
I have tried again to get this correctly done. Is there anyone here who could take a look please?
This is my latest attempt.
http://www.europeancookingvacations.com/test3.html
However, I know the entire page code must be a mess, since I combined my own with some which I found on a French site, for help with drop down lists.
At the moment, the links are vertical and I really need them to be horizontal across the page.
Also, I see the last links don't disappear, when the cursor is removed.
Could anyone help me please?
I really would appreciate it.
Thanks
Lizzie
sticks464
04-24-2007, 05:57 PM
Give this a try. It's the same with a different name.
<head>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
color:#800;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
margin:0 auto;/*align menu to horizontal center of page*/
}

#menu {
width: 15em;
}

#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
}

#menu dd {
border: none;
}

#menu li {
text-align: center;
background: #fff;
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
color:#800;/*color of link*/
font-weight:bold;/*weight of link, delete if not bold*/
}

#menu li a:hover, #menu dt a:hover {
background: none;
color:#F09;/*color of rollover*/
}
-->

</style>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>

<body>
<div id="nav">
<dl id="menu">

<dt onclick="javascript:montre('smenu1');">France</dt>
<dd id="smenu1">
<ul>
<li><a href="http://www.europeancookingvacations.com/StJeandeLuz.html">St. Jean de Luz</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu2');">Spain</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Menu 1 Spain</a></li>
<li><a href="#">Menu 2 Spain</a></li>
</ul>
</dd>

<dt onclick="javascript:montre('smenu3');">Italy</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Menu 1 Italy</a></li>
<li><a href="#">Menu 2 Italy</a></li>
</ul>
</dd>

<dt onclick="javascript:montre('smenu4');">Booking</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Menu 1 Booking</a></li>
<li><a href="#">Menu 2 Booking</a></li>
</ul>
</dd>


</dl>
</div>
Lizzie
04-25-2007, 01:06 AM
Thank you so much sticks.
I played around with it all evening again and added your code.
Although you have it set to horizontal, it still drops in a vertical unfortunately.
Here's the new page with it set as you suggested.
http://www.europeancookingvacations.com/test.html
Any idea how I could fix this please?
Lizzie
sticks464
04-25-2007, 07:14 AM
I take it you want it to pop out horizontal and not vertical. Give me a few and I'll have one for you. brb
Lizzie
04-25-2007, 12:59 PM
Thank you so much.
Yes. I need the list in a line with obviously some spaces between them, horizontally across the page and centered if possible.
I really appreciate your help. This has made me crazy for a week now, trying to get it correct.
Lizzie
sticks464
04-25-2007, 07:23 PM
Ok, got it. Sorry had some important work to get done.
This is based on the chromemenu (http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm)
<script type="text/javascript" src="chrome.js"></script>
<style type="text/css">
.chromestyle{
width: 50%;
font-weight: bold;
margin:0 auto;
}

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

.chromestyle ul{
width: 100%;
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #800; /*color of links */
padding: 4px 7px;
margin: 0;
text-decoration: none;
}


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

.dropmenudiv{
position:absolute;
top: 0;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #800;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
color: #F09;
}
</style>
</head>

<body>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1">France</a></li>
<li><a href="#" rel="dropmenu2">Spain</a></li>
<li><a href="#" rel="dropmenu3">Italy</a></li>
<li><a href="#" rel="dropmenu4">Booking</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv" style="width: 115px;"><!--change width to prevent word wrap-->
<a href="http://www.europeancookingvacations.com/StJeandeLuz.html">St. Jean de Luz</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 100px;"><!--change width to prevent word wrap-->
<a href="#">Menu 1 Spain</a>
<a href="#">Menu 2 Spain</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 100px;"><!--change width to prevent word wrap-->
<a href="#">Menu 1 Italy</a>
<a href="#">Menu 2 Italy</a>
</div>

<!--4th drop down menu -->
<div id="dropmenu4" class="dropmenudiv" style="width: 125px;"><!--change width to prevent word wrap-->
<a href="#">Menu 1 Booking</a>
<a href="#">Menu 2 Booking</a>
</div>
<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

You can download the javascript needed from the above link.
Lizzie
04-25-2007, 11:44 PM
Thanks so much. I'll give it a go.
Lizzie