ModxHost template

Hello

I have a few questions:
1) I would like make the menu-font to change color when the mouse hovers. Eventhough the color in the modxmenu.css is set to FFFFFF on hover, the font does not actually change color. How can this be fixed ?
2) I would like to prevent the menu from sliding down on hover and click, I just want it to drop instantanously. Is this possible ?
3) I would like to change the opacity of the sub-menues when they are dropped down. How can I achieve this ?

In short I would very much like for the menu to behave like at thes site: http://www.modxhost.com/

Plase help

It’s all doable via CSS.

Can you please be more specific ?
It does not seem to work for me. But I am also kinda newbie to javascript and CSS

Rozh-

You should have a look in some of the css/javascript sites or forums -- you’ll get better responses and information over there. The problem you are having would still exist regardless of whether or not MODx was involved.

Here’s a link to the menu CSS file at the modxHost site. You can see how it’s done there:

http://www.modxhost.com/assets/templates/modxhost/modxmenu.css?version=3

Dear Friends

I have for the last 4 days read a ton of xhtml, css and java tutorials. I am too newbie to make it work. If you have the time, please help me
Eventhough the problem is probably solved by some smart JavaScript or CSS trick, I find it hard to integrate that into the ModXHost template that is installed by default as part of ModX 0.9.6.3

1- To my best ability I se that in the CSS file (modxmenu.css): the color of the font of the main menu should be white (FFFFFF) when the mouse hovers. However this does not happen. Is this a problem with the template itself ? the chunks ? the CSS file ? the javascript ? something else ?
I just dont know where to start looking for the error, so please help if you can

2- The mainmenu slides down on hover, but it is too slow. I would just like a menu that drops down (not sliding). I can se the folks at www.ModXHost.com have achieved this. How is it done ? If I turn of javascript in Mozilla, then the menus in the default template of Modx (ModXHost) stop sliding. But if you do that at www.ModXHost.com, the menus continue as usual. This means that the dropping down can be done WITHOUT JavaScript. But How ?

If i remove the line: <script src="assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></script>
from the template inside ModX, then the menu stops working. This means that the "sliding down" in the template is done by the JavaScript (drop_down_menu.js). But how do I turn this of, so the menu resembles that of www.modxhost.com ?

I appreciate any kind of input that points me in the right direction

Kind Regards

There are tons of sites with tutorials and examples of using CSS to make simple drop-down menus.
http://www.cssplay.co.uk/menu/index.html
http://www.alistapart.com/articles/hybrid/ (the MODx manager menu was derived from this one)
http://www.alistapart.com/articles/dropdowns/

And there are a number of tutorials and samples for doing this with MODx and Wayfinder menus.
http://www.muddydogpaws.com/development/wayfinder/examples/

The first thing to do, if you haven’t already, is to get a copy of Firefox and install Firebug. It will take a little getting used to but it will save you from the endless confusion trying to figure out which line in your CSS file is doing what. Once Firebug is installed, do the following:

Go to your site in FF.
Click on the little bug at the lower right.
Click on Inspect
Hover over a menu item (or whatever) to see the relevant CSS.
Click on the item to lock the CSS display.
Edit the CSS in the lower right pane to get the effect you want. You can edit existing attributes or add new ones.

The editing is all temporary and only shows in your browser session. It won’t affect your site at all so you can play all you want. When you find what you want, you can edit your real CSS file to match.

Alright guys. Very cool stuf, thanks. I will go about experimenting now, hope something falls from this here