472,103 Members | 1,703 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,103 software developers and data experts.

background colours gone in dropmenu items

Below dropmenu and javascript modifies ul properties depending on if a link
within matches the current url.

If a match is found the .high style applies to the relevant section, or .low
if no match is found.

This works only for static list, or in the case of a dropmenu, with the
first visible link of each UL only, as tested on Konqueror and Mozilla.

When "position: absolute" is used in conjuction with removing the items from
the page the background-color is gone as they are brought back with the
"left: auto" for some reason, although not other values such as font-size.

Does anyone know why and how to keep the background-color value?

<style type="text/css">
..high {background-color: #99FFCC; font-size: 80%;}
..low {background-color: #33CC00; font-size: 80%;}

..head, .head ul, .low ul {
padding: 0;
margin: 0;
list-style: none;

#menu a {
display: block;
width: 10em;

..head, .low {
float: left;
width: 10em;

..head li ul, .low li ul {
position: absolute;
width: 10em;
left: -999em;

..head li:hover ul, low li:hover {
left: auto;

<script type="text/javascript">

function doClass(){
var As, ff, x;
var a = RegExp('.*/'); // Needed many times, compile for speed
var f = document.URL.replace(a,''); // filename of current page
var d = document.getElementById('menu');
var uls = d.getElementsByTagName('ul');

for (var i=0, j=uls.length; i<j; i++){
x = uls[i];

// If the UL className string includes word 'head'
if ( /\bhead\b/.test(x.className) ){
/* note: add forward slashes around "\bhead\b" if removed by newsreader */

// Get its A elements
As = x.getElementsByTagName('a');

// Search for matching file names
for (var k=0, m=As.length; k<m; k++) {
ff = As[k].href.replace(a,'');

// If match, modify the className string of the parent UL
if ( ff == f ){
x.className = x.className.replace(/\blow\b/,'high');

// No need to continue once we've found one

<body onload="doClass();">

<div id="menu">

<ul class="head low">
<li><a href="z0.html">Flora&nbsp;&amp;&nbsp;funa</a>

<ul class="sub">
<li><a href="z1.html">Pretty&nbsp;flowers</a></li>
<li><a href="z2.html">Deadly&nbsp;vines</a></li>


<ul class="head low">
<li><a href="z3.html">Aquatic&nbsp;creatures</a>
<ul class="sub">
<li><a href="z4.html">Pretty&nbsp;fish</a></li>
<li><a href="z5.html">Don&#39t&nbsp;eat</a></li>


<div style="clear:left">

"To vacillate or not to vacillate, that is the question ... or is it?"


Jul 21 '05 #1
1 1586
michael wrote:

Below dropmenu and javascript modifies ul properties depending on if a link
within matches the current url.

This isn't a CSS issue, but one of the DOM or JavaScript in general. Try
asking in ng comp.lang.javascript.

Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Alistair Birch | last post: by
7 posts views Thread by Thomas Wieser | last post: by
5 posts views Thread by navavil | last post: by
4 posts views Thread by david.graham18 | last post: by
6 posts views Thread by Nancy Carter | last post: by
4 posts views Thread by Lachlan Hunt | last post: by
11 posts views Thread by shapper | last post: by
2 posts views Thread by patrick.waldo | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.