Page 1 of 1

Horizontal menu won't work

Posted: Wed Jun 28, 2006 8:04 pm
by TNTH
I'm having a major problem with the menumanager. I can't create the menu I want. I've tried different things (deleting some stuff in the tpl-files; attaching the cssmenu-accessible.tpl and the "Default CSSMenu Horizontal"; installing cssmenu manually and without the menumanager), but I can't get a menu like this:

menu-item | menu-item | menu-item | menu-item | menu-item

Can anyone help, or does anyone have an example of a template (and css-code)?

Thanks in advance!

Re: Horizontal menu won't work

Posted: Thu Jun 29, 2006 12:05 am
by Dr.CSS
you could look at my site and see many diff. horizontal menus...
http://www.multiintech.com/
do you have a link to the one that troubles you?
have you looked at the templates page?
http://themes.cmsmadesimple.org/Full_Themes.html

Re: Horizontal menu won't work

Posted: Mon Jul 17, 2006 5:14 pm
by TNTH
I found one there, thanks!

Re: Horizontal menu won't work

Posted: Wed Oct 18, 2006 9:37 am
by WebGirl
TNTH,

I wish I knew what you'd used :)

I've spent hours over days this past week trying to get the exact same type of menu, and nothing I've read makes enough sense :(  I've changed my page codes so much it's all looking Greek to me.

Mark - hi there, I've looked at the source of a few of your sample sites and the Menu stuff is all gobbledegook to me, plus some of the menus appear to be a couple of screen-fulls long in the source code. 

I just need this:

==>    menu-item | menu-item | menu-item | menu-item | menu-item

to look like this:

Image

- one level only
- clean and simple
- and whatever I need to get the '|' symbol as part of the automated Menu Style.

** I know I need to specify a {menu module name of some kind} in the page Template.

** and that I need to detail the formatting in the CSS in the stylesheet which I've attached to the page.

Heck, I even learnt all about 'inline' lists this week at List Tutorial

http://css.maxdesign.com.au/listutorial ... ntal06.htm

Can someone give me some simple step-by-steps please, as I'm now tearing my hair out and I need to deliver this to a client within 24 hrs. :o

Thanks in advance!
Webgirl

Re: Horizontal menu won't work

Posted: Thu Oct 19, 2006 4:11 am
by Dr.CSS
In the menu manager, in the menu template you are using, put some numbers, ie,. 1, 2, 3, 4,  before and after the till you find the number that shows up after your menu text then just put |  in it's place, it may have to be put in more than one place.

I wondered for a long time how people put this in web pages and other places, I was copy/pasting it, till one day I found it on my keyboard on the same key as \ ...  :D

Re: Horizontal menu won't work

Posted: Thu Oct 19, 2006 10:08 am
by WebGirl
Hi Mark,

Yes I've always used the '|' key [to the right of the square bracket ']' key].

I will try your suggestion if I ever get a menu to work.

The huge problem I still have is that I cannot even get the menu to be HORIZONTAL or to remove the numbers.  It's driving me crazy and I'm about to revert to HTML and hard code the menu on the templates,  as I can't get a cmsms menu to work :(

I am attaching a snapshot to show you what it looks like.  I give up.



[gelöscht durch Administrator]

Re: Horizontal menu won't work

Posted: Fri Oct 20, 2006 1:11 am
by Dr.CSS
Start with {menu template=cssmenu.tpl} and attach the default CSS Menu Horizontal this will give you a beginning
if you get that to go horiz. then go to Menu Manager and copy the template and call it in the tag
if it still works go back and start putting the numbers in to see where you need the | .

The number removal is in the default accessability and tools CSS it starts with dfn {

EDIT: found it...

dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}

Re: Horizontal menu won't work

Posted: Fri Oct 20, 2006 9:07 am
by WebGirl
Thanks Mark - I'll give that a shot.  Showed the client the new site today and didn't tell them about the hard-coded menu - with your suggestions I'm hoping to have the menu working before they get access to the Admin console.  Most of the CMSMS is great, just a bit of a learning curve with things i'm unfamiliar with, which caused a weeeeeee bit of stress :)

Much appreciated! :D

OK - re your suggestions:
mark wrote:Start with {menu template=cssmenu.tpl} and attach the default CSS Menu Horizontal this will give you a beginning
First of all I :
  • copied the template & renamed it
  • copied the 'Navigation: CSSMenu - Horizontal' Stylesheet, and renamed it
  • attached the Stylesheet to the Template
  • got the menu horizontal - yay!
Now - the next bit - changing font color, removing the 'mouseover' or 'hover' color:
mark wrote:go to Menu Manager and copy the template and call it in the tag - if it still works go back and start putting the numbers in to see where you need the | . 
I wasn't sure what you meant by 'call it in the tag' or why I'd go to Menu Manager, so I opened the stylesheet,  'Navigation - Horizontal' -  and made a color change, and Applied - yippee, it worked!

Re the NUMBERING of menu items [and REMOVAL]
The number removal is in the default accessability and tools CSS it starts with dfn {
I didn't know what you meant by 'the default accessability', so kept trying to change the stylesheet.

Now I have spent several more hours trying to get the NUMBERS to disappear, and to add in the '|' - no luck with either.  I am doing all of the is the Stylesheet - should I be looking at ANY other files where any of this might be linked somehow?

Here is the code as it is now:
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen  - Webgirl: made changes to this WITH success!!*/

#menu_vert {
  margin-left: 1px;
  margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */
  background-color: #FFFFFF;
  border-bottom: 0px solid #C0C0C0;
  width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav ul li { /* changed li li to ul li - did it remove NUMBERS?? no */
  width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style-type: none;  /* I added the word 'type' to see if this removes numbers. It didn't. */
  margin: 0px;
  padding: 0px;
}
#primary-nav ul {
  position: absolute;
  top: auto;
  display: none;
}
#primary-nav ul ul {
  margin-top: 1px;
  margin-left: -1px;
  left: 100%;
  top: 0px;
}

#primary-nav li {
  margin-left: -1px;
  float: left;
}
#primary-nav ul li {  /* changed li to ul - did it remove NUMBERS?? no */
  margin-left: 0px;
  margin-top: -1px;
  float: none;
  position: relative;
}

/* Styling the basic appeArance of the menu elements */
#primary-nav a {
  display: block;
  margin: 0px;
  padding: 1px 3px; /* changed from 5, 10 [height, width] - closes up ranks? */
  text-decoration: none;
  color: #333399;  /* client's choice, 20 Oct */
}
#primary-nav li a {
  border-left: 0px solid #C0C0C0; /* is this is the | between menu items? YES! */
  border-right: 0px solid #9933ff; /* this is the | at the RIGHT END of screen only! */
}
#primary-nav li li a {
  border: 0px solid #9933ff;  /* is this is the | between menu items? no. */
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: #FFFFFF;
}

/* The Menu 'Hover' Colour - Styling the basic appearance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
  background-color: #ffffff; /* did this work? no. */
}


/* Styling the basic appearance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
}


/* Styling the appearance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #FFFFFF; /* changed TO WHITE - fixed hover color? */
}


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

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}


/* IE Hacks */
#primary-nav li li {
  float: left;
  clear: both;
}
#primary-nav li li a {
  height: 1%;
}
REQUIRED :
- no hover colours at all
- '|' between page names, but not at the far left or far right end of list
- removal of NUMBERS


I am attaching an image of the MENU as it now appears.

Thanks for ANY help whatsoever, it is greatly appreciated!

WebGirl

[gelöscht durch Administrator]

Re: Horizontal menu won't work

Posted: Fri Oct 20, 2006 11:24 pm
by WebGirl
Fantastic!  Thank you!

Where did you find this?  It's not in the Stylesheet [or not that I found anyway ...]  Is it in a separate file somewhere?
mark wrote:The number removal is in the default accessability and tools CSS it starts with dfn {

EDIT: found it...

dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}
I am soooo close to having this right!!!

Once I know where this bit of code lives I can remove the numbering with:

list-style-type: none;

Thanks so much!

PS I found a fabulous tutorial [which I mentioned elsewhere on this forum] explaining all about LISTS and making them 'inline' [horizontal] etc - well worth a visit:

http://css.maxdesign.com.au/listutorial ... uction.htm

cheers :D

Re: Horizontal menu won't work

Posted: Sat Oct 21, 2006 6:34 am
by Dr.CSS
This is already in your style sheet...
Once I know where this bit of code lives I can remove the numbering with:

list-style-type: none;
it makes the 'bullets', square, round, diamond, not show... remember the dots next to the menu before it went horiz., attached img. prev. post...

This is what the source looks like for the numbered menu text...


Current page is 1: Home

2: How CMSMS Works


so the CSS that I posted will make the 2: move off the page, since it has  position: absolute;  to the left    left: -1000px;  above the top  top: -1000px;...

I've attached image that shows the Default  'Accessibility and cross-browser tools'  style sheet with the  'dfn{'  call...

I made a copy of the menu template, in Layout » Menu Manager, 'cssmenu.tpl' called it 'show' in the 'pages' template it's...


     
        Navigation
        {menu template='show'}
     
     
     

in the new menu template 'show' I put numbers 1...9

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


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

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

{repeat string="" times=$node->prevdepth-$node->depth}
1
{elseif $node->index > 0}2
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
3current == true}
4haschildren == true}
5type == 'sectionheader'}
        6 {$node->menutext}
{elseif $node->type == 'separator'}
        7
{else}
8type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{elseif $node->type == 'sectionheader'}
>{$node->hierarchy}: {$node->menutext}
{/if}

{/foreach}

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



{/if}

the source looks like this....


81: Home

2
52: How CMSMS Works



82.1: Templates and stylesheets

2
82.2: Extensions

2
82.3: Events Manager

2
82.4: Workflow

2
82.5: Where do I get help?

2
82.6: Content

2

82.7: Pages and navigation

2
82.8: Menu Manager




1
33: Default Templates Explained



83.1: CMSMS tags in the templates

2
83.2: Left simple navigation + 1 column

2
83.3: Top simple navigation + left subnavigation + 1 column

2
43.4: CSSMenu top + 2 columns

2
83.5: CSSMenu left + 1 column

2

83.6: Minimal template



1
54: Default Extensions



54.1: Modules



84.1.1: News1

2
84.1.2: Menu Manager

2
84.1.3: Theme Manager

2
84.1.4: FCKEditorX

2
84.1.5: Search

2

84.1.6: Module Manager



1
54.2: Tags



84.2.1: Tags in the core

2
84.2.2: User-defined tags



1
85: Embeded

2
86: Golf


9



from this output I get an idea of where to put my "|" in the menu template at first glance 8 looks like a good place but the first one will have | in front so maybe 2 that will put it in front of all the 8's but the first one but then 3 and 5 will need them and so on...

[gelöscht durch Administrator]

Re: Horizontal menu won't work

Posted: Sat Oct 21, 2006 6:49 am
by WebGirl
Mark,

Phew!!! You're amazing!  Thank you sooooo much for your help!

You're helping me to learn that there are still many areas of CMSMS of which I know nothing - and just because it was easy to install and add content, didn't mean I knew enough to do exactly what I wanted ... yet.

But with your help [and Ross, and others] I'm learning!!!!

I'll print all this out and go over it with a latte [or a cocktail] ... :) - I love to learn!

Thanks again for taking so much time to explain all this to me, you are so generous.

WebGirl

Re: Horizontal menu won't work

Posted: Sun Feb 18, 2007 10:51 pm
by niemi
WebGirl

If you got your |'s working in the menu, please tell how to do it. In details please  :P