CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Drop-Down Menu Customisation

https://forum.cmsmadesimple.org/viewtopic.php?t=3849

Page 3 of 6

Re: Drop-Down Menu Customisation

Posted: Sun Apr 02, 2006 10:34 am
by 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

Re: Drop-Down Menu Customisation

Posted: Mon Apr 03, 2006 1:14 am
by 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  :D

Re: Drop-Down Menu Customisation

Posted: Mon Apr 03, 2006 8:29 am
by tmhai
rather than using the name in the CSS why not use the id for that page...

Re: Drop-Down Menu Customisation

Posted: Tue Apr 04, 2006 4:04 am
by Dr.CSS
Thats a good idea,, did you get it workin yet,

mark

Re: Drop-Down Menu Customisation

Posted: Tue Apr 04, 2006 8:18 am
by 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?

Re: Drop-Down Menu Customisation

Posted: Tue Apr 04, 2006 9:04 am
by tmhai
(Haha, funny that the drop-down works in IE 7 - stupid mucrosoft...)

Re: Drop-Down Menu Customisation

Posted: Tue Apr 04, 2006 4:42 pm
by Dr.CSS
tmhai wrote: 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

Re: Drop-Down Menu Customisation

Posted: Tue Apr 04, 2006 10:12 pm
by 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.

Re: Drop-Down Menu Customisation

Posted: Tue Apr 04, 2006 10:33 pm
by tmhai
Theirs also nothing in the menu manager file which has manuparent or menuactive in it, so how is it going to work?

Re: Drop-Down Menu Customisation

Posted: Wed Apr 05, 2006 5:46 am
by 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

Re: Drop-Down Menu Customisation

Posted: Wed Apr 05, 2006 8:20 am
by tmhai
I dont quite follow, what span?...

Re: Drop-Down Menu Customisation

Posted: Thu Apr 06, 2006 12:02 am
by 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

Re: Drop-Down Menu Customisation I DID IT!!!

Posted: Thu Apr 06, 2006 6:10 am
by Dr.CSS
;D ;D ;D ;D ;D ;D ;D ;D ;D ;D ;D ;D ;D ;D ;D ;D ;D I DID IT!!!!!!!!!!!!!!  :D :D :D :D  imap

  mark

Re: Drop-Down Menu Customisation

Posted: Thu Apr 06, 2006 11:20 am
by tmhai
OMG!!!!!!!!  :o :o :o :o :o :o :o :o :o :o :o :o :o :o :o :o :o :D ;) :) ;D (Im soo happy,  :'()

How?

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

Re: Drop-Down Menu Customisation

Posted: Thu Apr 06, 2006 2:28 pm
by 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  ;)
All times are UTC
Page 3 of 6

Powered by phpBB® Forum Software © phpBB Limited