[Solved] 2 Cssmenu in same gabarit?

[mel]

Hi,
I'm not quite sure what I did wrong...
I set 2 menu on my pages : top (with minimal.tpl) and right box (with cssmenu.tpl) and styled with css on my stylesheet. Everything was fine.
But now, I wanted a dropdown menu for top menu. So I changed to cssmenu.tpl, added default stylesheet cssmenu horizontal (i wanted to use it as example before modifying css). But I dont have dropdown menu for almost items and don't know why.

For top menu, I put this:
{menu template='cssmenu' collapse='0' includeprefix="accueil,he,rose,labo,lexique,liens"}

For my right box, I didn't touch it
{menu template='cssmenu' collapse='1' start_level="2"}

I have questions :
-Because, I use same tpl, I have two #menuwrapper -> validation problem
-Why css from cssmenu horizontal overcome my css for my right box? I did'nt change anything for this one, and should show up as previously, no?

For reference, here my work-on-progress site http://www.labneuro.hostwq.net

Hope I'm enough clear for my explanations,
thanks,
Mel

[mel]

Hi,
Still me. Could someone could at least tell me if it's a template problem, a CSS problem or something else? I dont know where search for fixes this.
Re-thanks.
Mel

[Dr.CSS]

Ok for starters...

1) {menu template='cssmenu' collapse='0' includeprefix="accueil,he,rose,labo,lexique,liens"}
When you want a dropdown/flyout menu you don't call the collapse, and if you use the includeprefix= it will only show those pages and not the children of them...

2) {menu template='cssmenu' collapse='1' start_level="2"}
Again if you call collapse='1' it won't pull in children, look in the source and you don't see them, if you even have any...

What does your page/menu structure look like?... the...

1. home
2. page
2.1page
3. page
etc. etc...

[mel]

Thanks a lot for taking time to answer beginners...

ok. It's work if I remove includeprefix. But now, how I choose what I want, only these 5 pages in my dropdown menu?

(Since my previous post, I had removed collapse)

I have
1 Accueil
2 Labo
2.1 -  Dr Rose
2.1.1 -  -  Cours
3 Encéphalopathie hépatique
        3.1 -  Néophyte  
3.1.1 -  -  Clinique
3.1.2 -  -  Ammoniac
etc (to 8 first levels, but just want 5 in my main menu)...


EDIT: I tried items="", but it doesn't work for dropdown. By the way, I don't really understand the difference between prefix and items...

[Dr.CSS]

There are diff. ways to split your menu...

The things you want in main drop down can be 1>5 then the other pages can be split up under section headers set as not shown in menu and its children will be set as show in menu then when you want to call a set of pages from under the section...

(optional) start_page="home" - Starts the menu displaying at the given start_page and showing that element and it's children only. Takes a page alias.

This can call the non shown in menu 'section header', so it will show all items and the children of them, but you will have change the menu template as it will be missing a at the beginning of the ul...

Or/and if it has siblings, since they won't show as they aren't children of it...

(optional) show_root_siblings="1" - This option only becomes useful if start_element or start_page are used. It basically will display the siblings along side of the selected start_page/element.

"items" is also one that will only show the pages specified, no children, siblings, etc., even with the show_root_siblings="1" call...

(optional) includeprefix="" - Include only those items who's page alias matches one of the specified (comma separated) prefixes.

Meaning you can give any page a prefix, prefix_pagealias in the alias box in options, even if it some where else in the menu structure so it can be pulled into a specific menu, but again it will not show children of themselves...

[mel]

After long analyse of your answer, test and forum search, I found my solution.
I first tried with header sections as you wrote, but it generated another problem concerning url. As it add another level, my url becomes longer, that I don't want (I used pretty url with hierarchy enable).
So I used solution proposed in this post. I disable menu from my 3 others elements and use items parameters to recall them for my footer menu.
Thanks!

[mel]

Hi
Now, I have my two menus
But unfortunately in IE, it's not well displayed... In fact, it was fine until I had the search box on top of the menu. But I could'nt find where is the problem : in search div or in menu div?
If someone could take 2 minutes to look, it will be so cool!
Thanks
Mel

Code: Select all

<div id="header">
<div id="sitename">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
</div>
<div id="search">{global_content name='recherche'}</div>
<div id="lang">
<p>{lang text="true" class="lang" spacer=" - "}</p>
</div>
{* Start Navigation *} {menu template='dropdown' start_element='8' show_root_siblings="1"}</div>
{* End Navigation *}
<div id="splash"><a href="#"><img title="Labo d'hépato-neurologie" src="uploads/images/logo/banniere.gif" alt="Labo d'hépato-neurologie" width="490" height="140" /></a>
<div id="logo"><a href="http://www.umontreal.ca"> <img class="logo_top" src="uploads/images/logo/UdeM_Blanc_petit.gif" alt="Université de Montréal" width="103" height="40" /></a> <a href="http://www.chum.qc.ca/"><img class="logo_bot" src="uploads/images/logo/chum_c_petit.gif" alt="Centre Hospitalier de l'Université de Montréal" width="47" height="40" /></a></div>
</div>

Code: Select all

/* Header */

#header {
	width: 100%;
	margin: 0;
height: 50px;
}


/* Logo */

#sitename {
float: left;
margin: 0 0.5em;

}

#sitename h1 {
	font-size: 1em;
}

#sitename a {
	text-decoration: none;
	color: #000000;
}

/* Recherche */
#search {
float: right;
margin: 0 0.35em;
width: 30%;
}


form {
margin: 0 auto;
width: 100%;
text-align: right;
}


input {
border: 2px solid #B6B6B6;
text-align: center;
}

input[type=submit], input[type=reset] {
cursor: pointer;
}

.searchbutton{
border: none;
margin: 0 2px;
width: 20px;
height: 20px; 
background:url(uploads/images/design/icone/search-32.png) no-repeat;
}


/* Lang */


#lang {
clear: both;
float: left;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .8em;
	font-weight: bold;
 margin: 0em 0em 0 0.5em;
}



/* Splash */

#splash {
	height: 140px;
	margin: 0;
width: 100%;
}

#splash img {
float: left;
}

#logo img {
float: right;
margin: 2%;
}


/* Start of CMSMS style sheet 'Navigation: CSSMenu - Horizontal' */
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* Menu */

#menu {
float: right;
margin: 0;
background: #dbdbdb;
height: 20px;
border-top: 8px solid #FFFFFF;
}


#menu a:hover {
	color: #B20000;
}




/* 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: #ECECEC;
   border-bottom: 1px solid #C0C0C0;
   width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 100px; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   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 li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
	padding: 0.35em 1.2em 0 1.2em;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .8em;
	font-weight: bold;
color: #000000;   
display: block; 
   margin: 0px; 
 }
#primary-nav li a { 
   border-left: 1px solid #C0C0C0;

}

#primary-nav li li a { 
   border: 1px solid #C0C0C0;
}	
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #ececec; 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: #C7C7C7; 
}


/* Styling the basic apperance 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 apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #ffffff; 
}


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


#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; 
}


#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%; 
}
/* End of 'Navigation: CSSMenu - Horizontal' */

[Dr.CSS]

You have primary-nav set as primary-nav2 in your menu template...

[KO]

IE6 uses javascript to do the dropdown. It looks for certain ID for the menu and when it founds it ... it does it's tricks. Now you have 2 menu's DropDown/Flyout and they both need unique ID as IE6 looks only one and ignores the other with same ID as ID should be unique in html. So you need to modify the js or have 2 different js files looking for each unique ID. Ofcourse CSS needs to match those ID's. You could try wrapping those menu's to div with unique ID and make sure that those 2 JS looks them but I'm not sure it that works.

[mel]

I don't want to be opposed to your advices, but it's not my problem.
I volontary change to primary-nav2 because I had two occurences of same template, causing problem with multiple identical id. My 2 menus works fine, even for IE6 in javascript (only one of them is dropdown menu)
My concern is about styling. Because I try to remove in HTML the search box, and menu return to his place, meaning just right, on top of black splash.
It's why I was thinking it's something related to css, but maybe I could be wrong...
Mel

[Dr.CSS]

I see no search in yours?...

You must be looking at it in IE, Firefox looks way diff...

[KO]

Don't be opposed as it was not ment that way. I understood you added another dropdown and then having problems with IE.

You should validate the code. Part of it goes after tag that could be causing some of the styling differencies between IE and FF.

Also something inside element needs to be fixed. Turning off javascript shows something you probably did not intend to show.

[mel]

I apologize...
I didn't saw that gig mess, as is not occuring in local.
The code after /body is add by host, because it's a free host. I know you will tell me to change, but for now it's not really possible 
But I'm very annoying because it didn't had this problem couple of weeks ago, it's why I was sure it's only related to changes I did in CMSMS.
Thanks, and if you have some advices...
Mel

PS Even, in local, where I dont have this non-validation problem, I have problem with styling. And also, I don't understand why in IE6 I have on home page my dropdown menu (one gabarit) and then for other pages (1 other gabarit), I didn't work. It's the same head containing cssmenu.js script.   

[mel]

Hi,
new detail in my story. Now it should work in IE.  I ask my host and they remove this code after tag. By the mean time, it solve one of my other problem concerning TinyMce that was not appearing.
So now, I still have problem with menu.
1- In IE, it not sit just over the header as in FF
2- In IE6, my dropdown work only for my home page and not other pages. As I wrote below, I use only 2 gabarits: home and site. But strange thing: if I change all my pages to gabarit_site, still only home page have dropdown menu. But if I switch all pages to home_gabarit, still only home page show menu! But when trying with standard CSSmenu+2 columns, it works for all pages. So, is it related to gabarit or not? I really dont know where it come from!
Mel
PS My two gabarits are linked to exact same stylesheets.

[Dr.CSS]

What is a gabarit?...