Menu Drop Downs for Web Site

  Ricky 18:43 01 Dec 2003
Locked

I manage a local cricket club web site using Frontpage 2002 (click here). On visiting other web sites I notice designers let the surfer either click or hover the mouse over a menu link and another list of hyperlinks appear. I would really love to be able to incorporate this idea into my site but can't find out a way of doing this. i.e click on Match Reports and with this a menu drops down with all the names of the varying match reports of the season. I know of a program called AllWeb Menus but you have to pay to download it and I don't want to pay $39 for something that I might not be able to get to work or is supported by my server.
Can anyone assist me? I would be really grateful

  phil 21:12 01 Dec 2003

Dynamic Drive click here Menus & Navigation. Take your pick.

  phil 21:23 01 Dec 2003

As for the website. I presume that this will be getting a facelift?

First off get yourself a colour scheme; your club badge or the Harpenden Coat of Arms colours is a good starting point.

One dolphin's nice, two is OK but 3,681 are a few too many. Get rid of the background or make it so transparent to be un-noticeable.

Standardise your font/fontsize throughout the site.

Your site is about your Cricket Club, not your sponsors. Make that bit a less obtrusive.

I'll think of some more later.

  Ricky 21:54 02 Dec 2003

Phil
Thanks for the link and the web site advise

  tbh72 02:11 03 Dec 2003

click here

Here's another link incase your interested, the company have a promotion at the moment which means the software will cost you 12.50 Dollars. That is an excellent price, how do they afford to do it!!!

  Ricky 15:32 03 Dec 2003

Thanks

This link looks very interesting and I shall give it a go

Warm regards

  Taran 16:32 03 Dec 2003

You can code your own for free using a combination of CSS and JavaScript.

You need a bit of patience, a bit of common sense, and these links:

click here

click here

click here

If you find any all CSS solutions stay clear of them; there are bugs with displaying pure CSS drop down menus in some browsers which is why a combination of CSS and JavaScript was used in the above pages.

  Taran 16:40 03 Dec 2003

I clean forgot about the CSS Menu Creator click here

It's a free olnine menau generator.

Superb article on combined CSS/JavaScript menus click here

Here's some sample code I rattled up based on the above link. Copy and paste it into Notepad and save it as menu.html the open it up in your browser:

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

<html>
<head>
<title>Drop Down Menu</title>
</head>

<style type="text/css">

body {
font-family: verdana, arial, helvetica, serif;
}

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li { /* all list items */
float: left;
position: relative;
width: 10em;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the

top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#content {
clear: left;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]>
</script>

</head>

<body>

<ul id="nav">

<li>Programming
<ul>
<li><a href="">Visual Basic</a></li>
<li><a href="">Java</a></li>
<li><a href="">PHP</a></li>
<li><a href="">.NET</a></li>
</ul>
</li>

<li>Software
<ul>
<li><a href="">Windows</a></li>
<li><a href="">Linux</a></li>
<li><a href="">Mac OS</a></li>
</ul>
</li>

<li>Storage
<ul>
<li><a href="">Hard Disk</a></li>
<li><a href="">CDRW</a></li>
<li><a href="">DVD RAM</a></li>
<li><a href="">Floppy Disk</a></li>
<li><a href="">Zip Drive</a></li>
</ul>
</li>

</ul>
</body>
</html>

  Taran 16:48 03 Dec 2003

Ignore that code.

I forgot about the formatting problem in this site and it mangled things beyond working.

Here's a link to the sample I made: click here

It took a couple of minutes adapting the sample code on the A List Apart site click here

  Ricky 20:20 03 Dec 2003

Taran

Thank you for your advice. I am completley self taught but I will try and get my head round some of these

Many thanks

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Moto G6 Play Review: First Look

iPad 9.7in (2018) review

TV & streaming : comment regarder le Festival de Cannes 2018 ?