CSS Based Menu drop down

[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

[Dr.CSS]

Need more info, and a link to a working and non working one would be great...

[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

[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

[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 { }

[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!

[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...

[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}

[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' ??

[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

[Wishbone]

I see.. It wasn't like that the last time I looked.

Where is the jquery code that expands this menu?

[Wishbone]

When looking at the site in IE, it flags a javascript error in CSSmenu.js.

[eddyndm]

Ive just seen that to, i think its part of CMSMS though....

[Wishbone]

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.

[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}