Page 1 of 2

CSS Based Menu drop down

Posted: Mon Mar 26, 2012 1:36 pm
by eddyndm
Hey guys just wandering if i can get some help.

I styled a menu using CSS and added some javascript animation to the menu for sub menus, i have replaced the <ul> section under the div id of navigation with {menu} and now the drop downs do not work.

Any ideas?

Many thanks :)

Re: CSS Based Menu drop down

Posted: Mon Mar 26, 2012 4:04 pm
by Dr.CSS
Need more info, and a link to a working and non working one would be great...

Re: CSS Based Menu drop down

Posted: Mon Mar 26, 2012 4:15 pm
by eddyndm
Thankyou for the reply. My mistake! lol

Working Menu - http://r3ality.co.uk/test/index.html

None Working - http://artemis-pmo-solutions.com/index.php

The none working is using CMSMS and the Working version isnt...

Many thanks :)

Re: CSS Based Menu drop down

Posted: Mon Mar 26, 2012 4:44 pm
by Dr.CSS
When you use {menu} it uses the menu template that is set as default, if you haven't changed anything in menu manager it will be the simple_navigation.tpl...

Looks like you need to make a custom menu template, go to menu manager and click import and then open it to do your customization...

http://multiintech.com/default/index.php?page=jquery

Re: CSS Based Menu drop down

Posted: Mon Mar 26, 2012 4:51 pm
by Wishbone
You can either change the menu template so that the second level has the class "sub-menu", or even easier, you can change your CSS and jquery code to use:

#sidebar_content ul ul { }

.. instead of referencing it directly. You might want to wrap your menu in another div (<div id="nav">) so you can better reference it.... #nav ul ul { }

Re: CSS Based Menu drop down

Posted: Mon Mar 26, 2012 5:07 pm
by eddyndm
LOL guys really appreciate your help, but i have no idea what either of you just said.

LOL ive imported simple_navigation.tpl and im looking at it, what im meant to edit though, i have no idea :(

Sorry guys, any further help would be great! :)

Re: CSS Based Menu drop down

Posted: Mon Mar 26, 2012 8:28 pm
by Dr.CSS
I look at the view page source of both of them and see the main differences...

The links that make it open are just href='#' so that makes me see sectionheaders, the UL under it has <ul class="sub-menu"> in the menu template look for the <ul> in the depth part near the top to see where you can change it...

I find it easiest to add numbers, 1, 2, 3, etc., in the menu template to tell where it is getting the different code/output so I can tewll where to change it...

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 8:34 am
by eddyndm
Ok ive had a go at what you suggested (many thanks btw!)

I done this with no avail :(

Code: Select all

{if $count > 0}
<ul class="sub-menu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 2:29 pm
by Wishbone
Editing the menu template shouldn't be necessary.. I was looking at your CSS on the one that works, and there is no mention of class "sub-menu", so there should be no need to insert it into the menu template.

One thing I did notice is that Services has no sub items, which could be a reason that it's not working.. Do you have any pages under 'Services' ??

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 2:33 pm
by eddyndm
Hi thanks for the reply, i do, i have 3 sub pages under services which i added in the CMS, i made the parent of sub pages "Services" and still no luck :(

Again thanks for the replies and suggestions :)

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 3:58 pm
by Wishbone
I see.. It wasn't like that the last time I looked.

Where is the jquery code that expands this menu?

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 4:00 pm
by Wishbone
When looking at the site in IE, it flags a javascript error in CSSmenu.js.

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 5:00 pm
by eddyndm
Ive just seen that to, i think its part of CMSMS though....

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 7:05 pm
by Wishbone
eddyndm wrote:Ive just seen that to, i think its part of CMSMS though....
Your browser only sees HTML, CSS, and JS... CMSMS doesn't put anything into it that you don't allow. Debug this issue, and that will be the start of it working, and might possibly fix it altogether.

Here's my test procedure. On the side (if you don't want to erase what you did), reset everything. Import your HTML into the template. Put {content assign="blah"} so it's a valid template. Keep the stock css, JS, menu, etc. Create a blank page and assign to the template. It should work.

Then start replacing the css with {cms_stylesheet} (assuming that you have the stylesheets set up correctly. Replace the menu with {menu} until you find what breaks it. That should be a clue to what the issue is.

Re: CSS Based Menu drop down

Posted: Tue Mar 27, 2012 8:18 pm
by Dr.CSS
The top <ul class="sub-menu"> is for the start of the menu, if you used it and then looked at the page source you will see it as first UL in menu...

This is for any subpage UL...

{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{repeat string="<ul class="sub-menu">" times=$node->depth-$node->prevdepth}