css dropdown menu

[5474N]

I have found an example of a horizontal css dropdown menu.
It almost suits my needs as is.. but there are a couple things I would like to change.

As it is now ... the nav bar is at the top. I would like to change this so that it floats on the bottom ... even while scrolling up and down.

I would also like to center the nav bar ... as it is right now , it stays to the left of the screen .. while the background image is centered.

As usual .. this page needs to be cross browser friendly

*this css menu also requires a work-around for IE... it is refered to as csshover.htc I will include it.

here is what i have so far.

___csshover.htc___

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
* Whatever:hover - V2.01.050927 - hover, active & focus
* ------------------------------------------------------------
* (c) 2005 - Peter Nederlof
* Peterned -

http://www.xs4all.nl/~peterned/

* License -

http://creativecommons.org/licenses/LGPL/2.1/

*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ------------------------------------------------------------
*/

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+))hover|active))|((a|input|textarea):unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'},
onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports);
} catch(securityException){}
}

try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}

function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;

var pseudo = select.replace(/[^:]+[a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
var affected = select.replace(/hover|active|unknown).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;

currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements, className, activators[pseudo]);
}

function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}

function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents;
e.node.detachEvent(e.type, e.handler);
}
}

function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts, nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) return [doc.getElementById(identify[1])];

var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements.all.tags(tagName):elements.all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>

=========================================

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>

<title>Highland View Farm</title>


<!-- here is a little tag to show the favicon ...

<link rel="shortcut icon" href="

http://www.tanfa.co.uk/favicon.ico"

/>

-->


<style type="text/css" media="screen">/**************** menu coding *****************/
#menu {
width: 100%;
background-image:url(

http://192.168.2.50/hvf/images/rider.jpg);

background-repeat: no-repeat;
background-position: center;
float: left;
height: 170px;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 5.2em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #fff;
text-transform: none;
}

#menu a {
color: #000;
background: #fff;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 100;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(includes/csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.8em/1em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body id="

http://www-tanfa-co-uk">

<div style="align:center;"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<!-- start menu HTML -->
<div id="menu">
<ul>
<li><h2><a href="index.html" title="Highland View Farm Homepage">home</a></h2>
</li>
</ul>

<ul>

<li><h2><a href="#" title="Highland View Farm">about us</a></h2>
<ul>
<li><h2><a href="#" title="Judd and Chrissy">people</a></h2></li>
<li><h2><a href="#" title="Animals">animals</a></h2></li>
<li><h2><a href="#" title="Highland View Farm">farm</a></h2></li>
</ul>
</li>
</ul>

<ul>
<li><h2><a href="#" title="Directions to Highland View Farm">get here</a></h2></li>
</ul>
<ul>
<li><h2><a href="#" title="news">news</a></h2></li>
</ul>
<ul>
<li><h2><a href="#" title="events">events</a></h2>
<ul>
<li><h2><a href="#" title="">book your own ...</a></h2></li>
<li><h2><a href="#" title="">event 1</a></h2></li>
<li><h2><a href="#" title="">event 2</a></h2></li>
<li><h2><a href="#" title="">registration</a></h2></li>
<li><h2><a href="#" title="">waiver</a></h2></li>
<li><h2><a href="#" title="">skill level guide</a></h2></li>
</ul>
</li>
</ul>

<ul>

<li><h2><a href="#" title="">gallery</a></h2></li>
</ul>
<ul>
<li><h2><a href="#" title="">products</a></h2>
<ul>
<li><h2><a href="#" title="">lamb, fruit, flowers in season</a></h2></li>
<li><h2><a href="#" title="">t-shirts, stickers</a></h2></li>
</ul>
</li>
</ul>
<ul>
<li><h2><a href="#" title="">dig for rent</a></h2></li>
</ul>
<ul>
<li><h2><a href="#" title="">contact</a></h2></li>
</ul>
</div>
</div>

</body>
</html>

 

[ca8msm]

If you are having trouble with a 3rd party menu, I'd suggest you contact it's author for support. Alternatively, you could look at creating your own without all that javascript (as what do you think the menu would do if someone went to your site without javascript?) e.g.

http://www.meyerweb.com/eric/css/edge/menus/demo.html

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.