drop down menu question

**claytonbrown** · 06-18-2013, 01:05 PM

okay, so we are re-designing again and this time around we are going to utilize the dynamic drive scripts for our menus.

Issue/Question:
We are going to have 2 drop downs in the header (vertical) and I say 'two' because they will have different styling. I can see by the example page that this is doable. However, what I am concerned about is the third menu which will be a fly-out menu from the sidebar (horizontal). Can we use the DD Mega Menu script to achieve all (3) menus, or do I need an additional script for the sidebar?

**Beverleyh** · 06-18-2013, 02:18 PM

It looks like the Mega Menu (don't forget the link when you ask about a DD script: http://www.dynamicdrive.com/dynamici...ddmegamenu.htm ) only supports drop-down levels so how about using a script that supports both vertical and horizontal? This should make things easier and eliminate the need for 2 scripts: http://www.dynamicdrive.com/dynamici...menu/index.htm

**claytonbrown** · 06-18-2013, 02:45 PM

Originally Posted by Beverleyh

It looks like the Mega Menu (don't forget the link when you ask about a DD script: http://www.dynamicdrive.com/dynamici...ddmegamenu.htm ) only supports drop-down levels so how about using a script that supports both vertical and horizontal? This should make things easier and eliminate the need for 2 scripts: http://www.dynamicdrive.com/dynamici...menu/index.htm

Thanks!

Although this is not the mega menu script, I imagine it will allow me to put anything inside the drop down/slide outs? Such as multiple columns, images & buttons.. And allow me to tell it which direction I want the overlap to go?

**Beverleyh** · 06-18-2013, 03:09 PM

The format for the All Levels Menu is a series of unordered-lists so presumably you could add custom styles to individual list items and style them up with images, different heights, wrapped text, colours, etc. I haven't tried personally - I use the menu for auto-generated menus in a CMS, so the buttons work best when they're uniform and predictable - but if you're willing to play around with the CSS, I guess anything is possible.

**claytonbrown** · 06-18-2013, 03:26 PM

okay, although I do know a good bit about CSS, I am thinking this would be easier if I just used the Mega menu for the top nav, and this script for my side column, this is, unless there is another 'mega-menu' like script that has a horizontal flyout? Or if the two scripts will conflict..?

Thank you soooo much for your help!

**claytonbrown** · 06-19-2013, 02:15 AM

New Issue:

I now have the two scripts functioning on the same page (http://www.dynamicdrive.com/dynamici...menu/index.htm & http://www.dynamicdrive.com/dynamici...ddmegamenu.htm) and am almost home free into the world of CSS. however, I may have been naive in original design, which called for a sidebar that would be sticky upon scrolling down the site, which would also have a functioning slide out menu. The slide out menu works, until you scroll down and the div sticks to the top. At that point the menu fails to slide. I suppose I did not foresee this issue coming as I really need 3 scripts to function on the same page, the two menu sliders and the sticky script...

View the issue live at http://www.shawntrautman.com/?theme=124 (remember, it is only in script testing phase of design now)
Any thoughts here would greatly appreciated.

**Beverleyh** · 06-19-2013, 08:53 AM

This might be the reason - from the All Level Menu demo/instructions page;

Important Note: The HTML for the drop down menus themselves which are hidden by default via CSS, should be added to the <BODY> of your page outside any other element. A good spot would be the bottom of the page, right above the </BODY> tag.

Yours are currently contained within your template. Move them out of your template to just above the </body> tag and see if that helps.

**claytonbrown** · 06-19-2013, 10:04 PM

back again... we aborted the sticky nav but now have new issue:

When I take the JS out of the page and into the head section of the site the drop down stops functioning... not sure what to do here- We cannot have JS inside the body tags as it causes a warning for some browsers once a customer enters the secure side of the site (cart) -

JS in question: (FYI, I cannot take the either piece out (nor both) to put into the head section as it will cause the drop down to not function)

Code:

<script src="ddmegamenu.js">

/***********************************************
* DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

ddmegamenu.docinit({
	menuid:'solidmenu',
	dur:200 //<--no comma after last setting
})

	
ddmegamenu.docinit({
	menuid:'megaanchorlink',
	dur:500,
	easing:'easeInOutCirc' //<--no comma after last setting
})

</script>

**Beverleyh** · 06-19-2013, 10:45 PM

I'm on iPhone at the moment but a contributing factor to your problems might be that you're linking to a few jQuery libraries (1.6.1, 1.3.2 and 1.5.2). You only need one, so try taking out 1.3.2 and 1.5.2 and see how that goes.

This could also be the reason why some scripts stop functioning when you move them to the head section - for example, if you're moving script calls up but placing them between the multiple jQuery library links, they'll stop working. You need one jQuery library at the top and all jQuery plugins and/or jQuery script calls below.

Also, you might need to put jQuery into noConflict() mode: http://api.jquery.com/jQuery.noConflict/

**claytonbrown** · 06-19-2013, 11:04 PM

Originally Posted by Beverleyh

I'm on iPhone at the moment but a contributing factor to your problems might be that you're linking to a few jQuery libraries (1.6.1, 1.3.2 and 1.5.2). You only need one, so try taking out 1.3.2 and 1.5.2 and see how that goes.

This could also be the reason why some scripts stop functioning when you move them to the head section - for example, if you're moving script calls up but placing them between the multiple jQuery library links, they'll stop working. You need one jQuery library at the top and all jQuery plugins and/or jQuery script calls below.

Also, you might need to put jQuery into noConflict() mode: http://api.jquery.com/jQuery.noConflict/

You nailed it! I took out the two older jQuery links and moved the code to the head & all is working flawlessly-

I know we have 3 scripts running in the 'shell' of the site, and a few others on certain pages, so I will certainly look into implementing the no-conflict script soon. Thank you sooooo much!