Menu Drop Downs for Web Site

  Ricky 18:43 01 Dec 03
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 03

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

  phil 21:23 01 Dec 03

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 03

Phil
Thanks for the link and the web site advise

  tbh72 02:11 03 Dec 03

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 03

Thanks

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

Warm regards

  Taran 16:32 03 Dec 03

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 03

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 03

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 03

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.

Amazon Fire HD 8 review: A brilliant combination of function and value – with one massive caveat

1995-2015: How technology has changed the world in 20 years

How to create an introvert-friendly workplace

iPhone 7 review: Enhanced cameras, a refreshed design and water resistance make the iPhone 7 an…