Drop-Down Menu Customisation

[tmhai]

Opps, my mistake... I have to go through the CSS and change the names of the menus.

1 thing, If I do picAbout Us it wont work

[Dr.CSS]

OH i forgot,, i've had problems with 2 word page names had to run them all together,, simpleton menu simpleton page names what's next 

[tmhai]

rather than using the name in the CSS why not use the id for that page...

[Dr.CSS]

Thats a good idea,, did you get it workin yet,

mark

[tmhai]

Yep, I got it working with the id's, and I got rid of the P's and N's in the theme manager, it wrecks up the accessibility view:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#imap - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}

<ul id="imap">
{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}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li id="pic{$node->id}"><a id="a{$node->id}" title="{$node->menutext}"{elseif $node->current == true}
<li id="pic{$node->id}"><a id="a{$node->id}" title="{$node->menutext}"{elseif $node->haschildren == true}
<li id="pic{$node->id}"><a id="a{$node->id}" title="{$node->menutext}" {else}
<li id="pic{$node->id}"><a id="a{$node->id}" title="{$node->menutext}"{/if} href="{$node->url}">{$node->menutext}</a>{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}
         </li>
	</ul>

{/if}

Also; how do I get the arrow for the sub-menus?

Apart from that, hows the IE fix going?

[tmhai]

(Haha, funny that the drop-down works in IE 7 - stupid mucrosoft...)

[Dr.CSS]

Yep, I got it working with the id's, and I got rid of the P's and N's in the theme manager, it wrecks up the accessibility view:

Also; how do I get the arrow for the sub-menus?

Apart from that, hows the IE fix going?

? P N ?
the arrow was showing up on every drop down, original menu had menuparent/menuactive classes to put the arrows on.

actually had to go to work so i haven't had time lately to do more with it.

  mark

[tmhai]

Nope, there were none when I got it.

This, i think, is the line about the arrow (found in CSS theme : imapmenu)

Code: Select all

#imap ul li.menuparent, #imap ul li.menuparent:hover, #primary-nav ul li.menuparenth { 
	background-image: url(uploads/theme/arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat;
	}

the url is pointing to the right place, its just not working.

[tmhai]

Theirs also nothing in the menu manager file which has manuparent or menuactive in it, so how is it going to work?

[Dr.CSS]

original code look like so,,

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{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}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
	<li class="amenuparent"><a class="amenuparent" {else}
	<li><a {/if}
href="{$node->url}">{$node->menutext}</a>{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
</div>
{/if}

mine like so,,

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#imap - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}

<ul id="imap">
{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}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li id="pic{$node->menutext}"><a id="a{$node->menutext}" title="{$node->menutext}"{elseif $node->current == true}
<li id="pic{$node->menutext}"><a id="a{$node->menutext}" title="{$node->menutext}"{elseif $node->haschildren == true}
<li id="pic{$node->menutext}"><a id="a{$node->menutext}" title="{$node->menutext}" {else}
<li id="pic{$node->menutext}"><a id="a{$node->menutext}" title="{$node->menutext}"{/if} href="{$node->url}">{$node->menutext}<span>N<br /><br />P</span></a>{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}
         </li>
	</ul>

{/if}

i learned this online it was a pic. of The Beatles and each span had a blurb about the Beatle that you rolled the mouse over, it would pop up and you could clik the pic. and go to his page,, the span is used here,,

  /* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;                                       
  }

in theImap CSS.

i see P's and N's  now.
N

P
both of tese can be taken out with no harm.
No luck on IE,    do you think anyone else is following this post, wonder if they have any ideas about that stupid browser?

  mark

[tmhai]

I dont quite follow, what span?...

[Dr.CSS]

in the original one i made it had this on the last line,,

menutext}">menutext}" title="{$node->menutext}"{/if} href="{$node->url}">{$node->menutext}N

P{/foreach}

{repeat string="" times=$node->depth-1}
       


{/if}
you have since taken it out so no problem

  mark

[Dr.CSS]

I DID IT!!!!!!!!!!!!!!    imap

  mark

[tmhai]

OMG!!!!!!!!  (Im soo happy,  )

How?

Ps. the arrows aint appearing for the submenus on ur site either.

[Dr.CSS]

in the menu template imaphoriz,,

Code: Select all

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent" id="pic{$node->menutext}"><a class="menuactive menuparent" id="a{$node->menutext}" title="{$node->menutext}"{elseif $node->current == true}
<li class="menuactive" id="pic{$node->menutext}"><a class="menuactive" id="a{$node->menutext}" title="{$node->menutext}"{elseif $node->haschildren == true}
<li class="menuactive menuparent" id="pic{$node->menutext}"><a class="menuactive menuparent" id="a{$node->menutext}" title="{$node->menutext}" {else}
<li id="pic{$node->menutext}"><a id="a{$node->menutext}" title="{$node->menutext}"{/if} href="{$node->url}">{$node->menutext}</a>{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}
         </li>
</ul>

{/if}

in the template,,





in the CSSMenu1.js which is a mod. copy of the CSSMenu.js which is in modules/MenuManager/ i changed,,
original code,,

Code: Select all

// Javascript for the CMS CSS Menu Module
// Copyright (c) 2005 Alexander Endresen
// Released under General Public Licence
// This script will emulate the css :hover effect on the menu elements in IE

// The variables
var cssid = "primary_nav"; // CSS ID for the menuwrapper
var menuadd = "h";  // Character to be added to the specific classes upon hovering. So for example, if this is set to "h", class "menuparent" will become "menuparenth" when hovered over.
var menuh = "menuh"; // Classname for hovering over all other menu items

new code,,

Code: Select all

// Javascript for the CMS CSS Menu Module
// Copyright (c) 2005 Alexander Endresen
// Released under General Public Licence
// This script will emulate the css :hover effect on the menu elements in IE

// The variables
var cssid = "imap"; // CSS ID for the menuwrapper
var menuadd = "h";  // Character to be added to the specific classes upon hovering. So for example, if this is set to "h", class "menuparent" will become "menuparenth" when hovered over.
var menuh = "menuh"; // Classname for hovering over all other menu items

in the imapmenu CSS,,

Code: Select all

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#imap ul, #imap li:hover ul, #imap li:hover ul ul, 
#imap li.menuparenth ul, #imap li.menuparenth ul ul { 
	display: none; 
	}
#imap li:hover ul, #imap ul li:hover ul, #imap ul ul li:hover ul, 
#imap li.menuparenth ul, #imap ul li.menuparenth ul, #imap ul ul li.menuparenth ul { 
	display: block; 
	}

as far as the arrows??? no luck yet,, have fun let me know if it works for you

  mark