[dropdown] Automatic Dropdown Menu System

This is the forum page for [dropdown].
http://www.contao.org/en/extension-l...000009.en.html

This extension uses MenuMatic.js to create javascript based Horizontal and Vertical Dropdown menus - that fall back to css-only if javascript is disabled in the clients browser.

Use this extension to generate a Standard navigation menu as per Contaos navigation module, or a custom Selectable navigation menu across multiple site roots as per the Selectnav module.

Then configure the orientation, postioning, spacing, sizes, alignments, physics, duration, delay, direction, rounded corners, submenu buttons etc of your menu.

The nececessary javascript and positioning styles necessary for Menumatic are added to document head (view page source to see).

Style additional appearance (colors, fonts, borders, background images) etc with appropriate stylesheet added to Page Layout if necessary.

You can choose to display your menu unstyled and without automatic dropdown by switching templates to "drop_down_none".

Install. Create new Module - displays as Dropdown in the navigation section. Configure Module. Add Module to Page Layout.

There are proportionate 30 x larger tif and gif button images to use as templates in the html/orig_img folder, if you wish to design your own submenu buttons. "Use Module Buttons" draws from the html/img folder. "Use Own Buttons" draws from the folder you select.

See also http://en.forum.contao.org/viewtopic...p=17937#p17937 re styling

Cheers, murray.

Hey,

i use your Dropdown, very Cool. BUT :)

U can see here: http://www.bauernhof-zillertal.at/

I scroll the page vertical, the Dropdown is not on the exact position :(
How can i fix this??

Hope u can help...
Dani

Hello Dani,

as this is an Austrian domain you might also want to ask in the German speaking forum if you don't get an answer here...

Jan

Hi Dani, I can't see a problem (IE 7 /FF), perhaps you've already solved it with CSS??? Not sure what I'm looking for but it seemsfine to me.

The [dropdown] extension is indeed very nice! I also like that some default CSS is already inserted into the page to get started with.

Unfortunately, I cannot set a background color and keep the button images that are inserted by default. Setting the background-color property interferes with the background property which already sets the image. Wouldn't it be a good idea to make [dropdown] set the background images via the background-image property instead, so one can change the background color from transparent to something else? Or am I missing something?

Regards,
Anguel

Hey Anguel,

The button images are set to the li a elements.
Try setting the background color to the li elements in the "Extra CSS" textarea.

eg:

Quote:

---

#nav_106 li {background-color:red;}
#subMenusContainer_106 li {background-color:red;}

---

(note: nav_106 will not be your correct id)

Thank you very much for the hint! Unfortunately, I also see some display problems with the Opera browser (probably caused by MooTools (?) in Contao 2.11.4) :-(

Do you have a url I can look at?

Yes, this is the test link:
http://contaotest.stankov.de/

I see what you mean with Opera, it seems to choke applying your added css into the submenus.
Since you're recreating all the buttons in your "Extra CSS", does turning off buttons in the extension make a difference?

I have never had a problem adding a background-color (it shouldn't interfere at all with the button images set in background at all). But be aware that the dropdown menu is picking up on css set in stylesheets, produced by the module, and added in "Extra CSS", so your various styles could be conflicting somewhere.
"Extra CSS" is supposed to be for overriding if absolutely necessary.


For example:
#nav_74 li, #nav_74 li a, #nav_74 .submenu.sibling {background-color:yellow; color:green;} set in a stylesheet applied to the page gives me all yellow menu items with green fonts in the top level (the buttons are still there).

Adding #subMenusContainer_74 li a, #subMenusContainer_74 li a.subMenuParentBtn, #subMenusContainer_74 li a.subMenuParentBtnFocused {background-color:red;} to the style sheet only makes the NON-button submenu items red - but the same if added into "Extra CSS" makes all submenu items red (and the buttons are still there).

I'm no CSS expert, but heres what I think....
1. Remove all your "Extra CSS" - Opera should be ok now (yes?).
2. Don't try to reproduce the buttons.
3. Use a stylesheet to target everything.
4. Use "Extra CSS" to target what doesn't respond to the stylesheet.

I have just discovered a problem regarding rounded corners, I'm going to adjust the module so that rounded corners are applied to both the li and the a elements (so they are the same shape) - then simply putting li {background-color:red;} in a style sheet will work to base color all items.

The module has been updated, so that rounded corners are now applied to all the li elements also (as well as the a elements). This is if "Rounded Corners" are on, and effectively makes them (li and a) the same shape.
If this causes a problem for any existing styled menus please let me know .... it should make styling easier from now on.

eg: li {background-color:red;} in a stylesheet will now color all menu items red.

ramjet, thank you very much for your help. Unfortunately, in the meantime the creation of a dropdown has heavily delayed my project. I never thought that this task can be still so complicated in 2012 :-( I also see that the MenuMatic script has been abandoned by the developer and in the German Contao forum people had reported about incompatibilites with newer Mootools: https://www.contao-community.de/showthr ... e-L%F6sung

Because we want to use this for our main navigation, we have now decided to use a pure CSS approach. This means no nice slide in/out effects but I am simply afraid to rely on MenuMatic which could break the navigation with future MooTools/Contao updates :-(

Thank you once again for your hints. The MenuMatic definitely looks amazing! If I have more time I will come back and experiment with the CSS. I am not an expert in CSS and it takes a lot of time for me to get things right.

No worries - I see your point.

Quote:

---

I also see that the MenuMatic script has been abandoned by the developer

---

I didn't know that ... and as you say, future Mootools versions may not like it.
I guess only time will tell. :?
I got the gist of the German thread (Google Translate version - not that easy to understand) - but as of Contao 2.11.4 I haven't experienced the incompatabilities myself except for one minor 2.10 or 2.11 version (i forget which one - it also affected accordions, but was quickly fixed by Leo)

At the end of that German thread is a file (menumatic-fuer-2.11.4.zip).
If you are a German forum member, could you post it here (as I can't download it) so I can take a look?
I must admit it perplexes me - as I say, I have had no problems with the menumatic js script and Mootools 1.4.5.

Hi there,

actualy i am trying to use your extension to create a dropdown menu wich works on the ipad and iphone too. great out of the box. but in changing the css parameters i failed.

have a look here please
http://senium-gmbh.de/baustelle/

i still dont get the clou how to style the extra css for example to shrink the width of the second row.
and i have to try and error to see if i make changes here and there to see how it results in the final webpage.

could you please give a short brief how to use extra external css style to modify the look.

and i lost the touch funcionality by making my changes.

may you can help a little bit.

menumatic-fuer-2.11.4.zip

http://www.share-online.biz/dl/23IERQ6M8G

VERY BASIC STYLING TUTORIAL TO SHOW FONTS/BACKGROUND COLORS AND IMAGES ON HOVER...

Make a stylesheet in Contao, and attach it to your page layout - [dropdown] will pick up on ALL page stylesheets.

Quote:

---

#nav_74 li a {font-family:"Henny Penny";color:#ffb700}
#nav_74 li {background-color:#a715eb}
#nav_74 li:hover {background-color:#25f1f5}

---

Above gives font family and color, background color and background color on hover to all Top Level menu items.

Quote:

---

#subMenusContainer_74 li a{font:12px Ewert;color:#f70505}
#subMenusContainer_74 li{width:200px;background-image:url("../../tl_files/bungalow_border.gif")}
#subMenusContainer_74 li:hover{background-image:url("../../tl_files/buttontest.gif")}

---

Above gives font family size and color, width, and background image and background image on hover to all Sub Level menu items.

Use own font-family choices and images - also your ids will not be _74 (see Container ID and Submenus Container ID in the module).

All browsers including Opera are fine with this, buttons are fine with this.

When javascript is turned off in the users browser, the menu reverts to pure css-only.
Because the subcontainer id (#subMenusContainer_74) is generated by the menumatic.js - it will not exist in the CSS ONLY menu, so for instance

Quote:

---

#subMenusContainer_74 li a{font:12px Ewert;color:#f70505}

---

will have no effect on the submenus UNLESS JAVASCRIPT IS ON.
However, CSS ONLY submenus can be targeted by adding an extra li to #nav_74 like so....

Quote:

---

#subMenusContainer_74 li a, #nav_74 li li a {font:12px Ewert;color:#f70505}

---

Do not rely on your CSS ONLY to look exactly like your Menumatic dropdown (unless you're a CSS expert)- CSS ONLY is a usability fallback. Turn javascipt off in your browser to test what you get.

Its a starting point, target other classes (.active .trail .sibling .subMenuParentBtn .subMenuParentBtnFocused etc) to elaborate on it ....

"View Source" will show you all the generated head css, but remember - css is also comes from the pages stylesheets.
Only use the "Extra CSS" field in the module to overwrite module-generated styles in the page head if you have to.

The buttons exist in the a elements - target the li elements for background images and colors so as not to interfere with the (auto-generated) buttons css.

Hope it helps.

Hi Ramjet,

i'm from the german contao community, so i found your dropdpown extension. I've a problem with the extension.

i use it as sub navigation, main is a normal navigatinmenu. dropdown as subnavigation has a problem, if there no site.
The dropdown menu isn't show but the javascripte is waitung for an ID, and the dosen't work the accordion effekt on.

how can i fix it?

thanks for helping.

greats ainschy

P.S. sry for my bad english, i hope you understand the problem.

Sorry guys I've been without internet access for a bit.
Ainschy, i don't understand the problem. What do you mean "...if there no site"? A link to a page to view would help.

Derpuma, thanks for the zip, i haven't got time now but i'll look at it when i have a chance.
Your link http://senium-gmbh.de/baustelle/ doesn't work for me (not surprising as it was three weeks ago).
Hopefully the tutorial helped?
murray.

Hey Ramjet,

I'm using your dropdown-menu, which works fine on different Desktop-Browsers and also on iPhone with Safari and Chrome, but the dropdown doesn't work on OperaMini for the iPhone (on Opera for Desktop there's no problem).
If you wish to have a link, here it is: http://www.paulgallister.com/ - The dropdown/submenu - which can be identified by the down-arrows - doesn't open.

Would be great, if anybody could help!

Hi,
how can I set the dropdown menu to automatically fly-out?
standard (or my standard) is set to "fly out" after klicking it, which is not how I would like it to be set up.
Thanks for your help :)

Hi,

I installed Dropdown manually, my server does not support SOAP. I can configure everything in the back end OK, but then nothing appears in the front end.

I added the module to the layout that I use. What else could be causing this?

Hi everybody

After a long period out, I working back on Contao, migrating a 2.11 version to a 3.2

Do you have any update of the module [dropdown] for the 3.2 version of Contao ?

Thanks in advance