Hi all, im fed up of trying to sort out my drop down navigation menu myself therefore i am willing to give $30 to the person that sorts out the two problems i have with it.

My website is < removed > , dont worry theres no adult images on there, its just the page template. Iv only designed it in firefox so some items may appear out of place in IE.

Firstly, i need my menu so that when a user opens it, it remains open on all pages on the site until either the user closes it or leaves the site. I beleive you have to use cookies to acomplish this.

Secondly, if you go to my site and expand the menu, pay close attention to what happens. Sometimes the text on the menu will expand slightly faster than the background, so for a split second you have the black text of the menu over the advertisement box. Also sometimes the menu expands faster than the 'categories_background.png' changes to 'categories_background_active.PNG'. I require the whole menu to expand in sync, and the button images change at the same time so it looks smooth and professional.


You are free to edit my code to acomplish this. If you have any questions please ask.

Many thanks.

Removed the URL as at some point in time it WILL. PM the OP for the URL

Secondly, if you go to my site and expand the menu, pay close attention to what happens. Sometimes the text on the menu will expand slightly faster than the background, so for a split second you have the black text of the menu over the advertisement box. Also sometimes the menu expands faster than the 'categories_background.png' changes to 'categories_background_active.PNG'. I require the whole menu to expand in sync, and the button images change at the same time so it looks smooth and professional.

Quite normal behaviour for this to happen when switching background images in CSS, swapping classnames is quicker and much less prone to this problem.

Firstly, i need my menu so that when a user opens it, it remains open on all pages on the site until either the user closes it or leaves the site. I beleive you have to use cookies to acomplish this.

Session variables (temporary cookies) are what you would be better using and for that we need to know the server side code you will be using.

What do you mean by swapping class names? I beleive im using a php script if thats what you mean by server side code?

Many thanks

What do you mean by swapping class names?

instead of using

a:hover {
background-image:url(path);
}

which is relatively slow and clunky. You use DHTML

onmouseover="document.getElementById(this.id).className = 'name_of_CSS_class_to_apply';"

and switch it back using onmouseout

It is several times quicker and more responsive (especially in IE) than using the :hover pseudoclass.

Yep, PHP is what I mean by server side code.

And what you do is to initialise and set a session variable to true when the menu is clicked open. (AJAX call to server) then at the top of every page check for the session value and set the menu state to open if it is true.

Im currently using javascript to swap the two images when the menu is clicked open.

Also in the javascript below you can see that when the image is clicked the 'show' command comes into action to open the menu, then when it is clicked again the 'hide' command comes into action and closes the menu.

How would i add a "set a session variable to true" to this code and then check it at the top of every page?

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
var image = document.getElementById('catclosed');
image.src = 'design_images/categories_background_active.PNG';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
var image = document.getElementById('catclosed');
image.src = 'design_images/categories_background.PNG';
}
}
}

Many thanks

Oh sorry i didnt realise the website addy had been fromoved from my original post.

< removed from this one as well > theres no adult content on there is just a template.

The point of having no "adult" content on currently is a moot one.
There will be some there at sometime in the future.

We have a lot of members now (and will have in the future) who are under the legal age for viewing adult material and the forum policy is NO adult URIs . clickable or NOT.


You have everything you need already set up in;

switch_id.className = 'show';

in the "show" and "hide" classes set the background image to the relevant image you want to use and get rid of the image swapping code.

When you dynamically load an image src with javascript the image has to be rendered and loaded into memory. Which is why you see a delay as it is being cached. Pre-caching the images won't help much either. The same issue occurs with images declared in a :hover pseudo class, they aren't rendered until needed and get unloaded when the hover goes off.
But when background images are specified in CSS the image is already being loaded in the browser memory space as the page is being rendered.

Unless someone beats me to it, I'll see what I can code up for a AJAX/PHP session setting script a bit later on.

Originally Posted by chrishirst

the forum policy is NO adult URIs . clickable or NOT.

Sorry i didnt realise, i was going to say is there a way i can delete it but its already been done .

Do you mean place the images in the .show class in the css? As i already have the background that appeard behind the links showin in the css.

If you cold come up with something for the cookies that would be great. Many thanks.

Do you mean place the images in the .show class in the css?

or in a class linked to the menu

.show #menuhead {
      background-image:url(showimage);
}

.hide #menuhead {
      background-image:url(hiddenimage);
}

have a container at the top of the menu with an ID of "menuhead" and it will follow the classname you give to the menu container

Thanks for that il give it a try. Any ideas on the sessions cookies? Thanks

I cant seem to get the .class #contains thingy to work. Below it the html im using for the menu:

<a class="menu1" onclick="showHide('menu')"><img id="catclosed" src="design_images/categories_background.PNG"/></a>
<div id="menu" class="hide">
<ul class="nobullet">
<li><span class="title" >A</span></li>
<li><a href="#" class="submenu" >category1</a></li>
<li><a href="#" class="submenu">category2</a></li>
<li><a href="#" class="submenu">category3</a></li>
<li><a href="#" class="submenu">category4</a></li>
<li><a href="#" class="submenu">category5</a></li>
<li class="top"><span class="title" >B</span></li>
<li><a href="#" class="submenu">category6</a></li>
<li><a href="#" class="submenu">category7</a></li>
<li><a href="#" class="submenu">category8</a></li>
<li><a href="#" class="submenu">category9</a></li>
<li><a href="#" class="submenu">category10</a></li>
</ul>
</div><!--menu end-->

IV tried allsorts, chanching the class="menu1" to id="menu1" and putting the image into the css as a background image.
Iv tried putting the <a></a> into a <div> container.
Iv tried placing a <div> container inside the <a> tags.
I keep getting different results but it seems the .show #container dosent work.