jQuery Multi Level CSS Menu #2

[ElenaT]

I would like to remove the down arrows in the top level menu items only and leave the right arrows in the submenu items. Can anyone advise me how to change the javascript to accomplish this. Thank you very much.

[jscheuer1]

Not javascript, rather css style. Using a text only editor like NotePad, in the jqueryslidemenu.css file, add the highlighted (around line #83):


.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
display: none;
}

[ElenaT]

Thanks so much for the incredibly quick response. I did try this initially, but the length of each top menu item remained the same, as if the down arrow was still there. Is there a way then to get the width of each top level menu item to adjust itself once the down arrow is set to display:none?

[djr33]

One quick idea: visibility:hidden is just like display:none, but it simply makes the element invisible rather than not considering it when displaying the page. In this way, it takes up space, but it is still invisible.

Would that solve the problem?

Note that using visibility:hidden is actually a little odd sometimes because it can still be interactive. I believe that anything that is "happening" in that element is still active, such as clicking on a link. It could also stop you from being able to access any (now visible) element underneath it.

[jscheuer1]

That won't help. In fact visibility hidden may create more problems, or not. But that extra space comes from the number 23 (red) here in the jqueryslidemenu.js file:


/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

Open that file up in a text only editor like NotePad and change that red 23 to a 0. Together with the display: none; in the css file, that should take care of it.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Sorry, I didn't know that extra space was a problem.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[ElenaT]

Hi John,

Sorry I didn't respond promptly--was distracted by stomach flu, but now I am working on this again. Here is a link with my test menu. I did as you said and the top level items that would have had down arrows are spaced properly, but the other top menu items are not. I also have two additional issues with this menu that I need to solve in order to use it, but I will start a separate thread since they are completely unrelated. Thank you again.

http://nasonhouse.com/test/test_nav.html

[jscheuer1]

If I understand you correctly, in the jqueryslidemenu.css file make the highlighted change as shown:



/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block; /*background of tabs (default state)*/;
color: black;
padding: 8px 0 8px 10px;
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 12px;
font-weight: bold;
}

[ElenaT]

That did it, thanks so much! Now, I hope someone will respond to my other questions, so I can finish tweaking the menu and actually use it!