Page 1 of 2

[solved]Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 12:47 pm
by libralion
Hi everybody,
I am testing the CMSmadesimple software and I find it very userfriendly.
I have a template that I have imported in CMSmadesimple. It has no dropdown menu by default. So I try to get one in it.
But I can't seem to get that right.
I have the stylesheet attached to the template and also the accessibility and tools stylesheet and I tried the Top menu and 2 colums stylesheet. But I don't get the dropdown to show correctly. I have made those pages and gave them the right parent(=home)
Here is the stylesheet from the template:

Code: Select all

/* Zoe Biz 01 - By Jose Erlino M. Lontok. http://jelontok.com | http://myhedspace.com */

body {
margin:0;
padding:0;
text-align:center;
background-color:#666;
font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, p {
margin:0;
padding:0;
font-weight:normal;
}

#wrap {
width:780px;
margin:0 auto;
text-align:left;
}

#header {
height:100px;
background:url(http://www.jomedio.nl/cmsmadesimple/uploads/images/business/header_bg.jpg) repeat-x;
}

#header h1{
font: 30px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333333;
text-transform:uppercase;
padding: 20px 0 0 20px
}
#header small{
padding: 0 0 0 20px
}

#topnav {
height:40px;
background:url(http://www.jomedio.nl/cmsmadesimple/uploads/images/business/topnav_bg.jpg) repeat-x;
}

#topnav_list {
float:right;
padding-top:12px;
}

#topnav_list ul {
list-style-type:none;
padding:0;
margin:0;
color:#666666;
text-transform:uppercase;
font:bold 12px Arial, Helvetica, sans-serif;
}

#topnav_list ul li{
float:left;
margin-right:10px;
}

#topnav_list ul li a{
color:#666666;
text-decoration:none;
}

#topnav_list ul li a:hover{
color:#000;
text-decoration:underline;
}


#mid_banner {
height:201px;
background:url(http://www.jomedio.nl/cmsmadesimple/uploads/images/business/mid_banner.jpg) no-repeat;
clear:both;
}

#mid_banner_text {
width:320px;
font:11px Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
position:absolute;
margin: 60px 0 0 20px;
}

#mid_banner_text strong {
color:#2F6182;
}

#content {
background:url(http://www.jomedio.nl/cmsmadesimple/uploads/images/business/content_bg.jpg) #FFFFFF repeat-x;
padding:20px 0 5px 0;
}

#content p {
font-size:10px;
color:#333333;
}

#content_box {
width:760px;
border:1px #CCCCCC solid;
background: url(http://www.jomedio.nl/cmsmadesimple/uploads/images/business/content_box_bg.jpg) #fff bottom left no-repeat;
margin:0 auto;
}

#content_box h2 {
color:#2F6182;
font-size:18px;
}

#content_box  h2, #content_box p{
padding: 5px 0;
text-align:justify;
}

#content_box_inside {
padding:30px 30px 10px 30px;
}

#footer {
text-align:center;
padding: 20px 0;
}

#footer a{
text-decoration:none;
color:#333;
}
And here is the testsite:
http://www.jomedio.nl/cmsmadesimple/index.php

What am I missing?

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 1:47 pm
by rakker
Hi,

I'm not sure where the dropdown menu should appear? Under home?
Make sure you use the right template from the menu manager.

For example the default template CSSMenu top + 2 columns uses a menu template called {menu template='cssmenu.tpl'}. Maybe start with this and modify to your own wishes?

Good luck.

Greetz,
rakker

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 2:06 pm
by libralion
rakker wrote: Hi,

I'm not sure where the dropdown menu should appear? Under home?
Make sure you use the right template from the menu manager.

For example the default template CSSMenu top + 2 columns uses a menu template called {menu template='cssmenu.tpl'}. Maybe start with this and modify to your own wishes?

Good luck.

Greetz,
rakker

Hi Rakker,
I did all of that. I attached the default stylesheet of the template to it and the accessibility stylesheet and the cssmenu top stylesheet.
And yes, for testpurposes I made 2 links under Home. But only the first one is showing and is visible all the time. And the second one isnot showing at  all. So somewhere I have to put in some code, but I have no clue where and what?

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 5:03 pm
by Dr.CSS
Well you are missing the Navigation: CSSMenu - Horizontal stylesheet...

You will have to either change it to reflect your colors and padding or remove them from it, yours are targeting the topnav and topnav_list but the other one goes 2 layers deeper to the ul IDed as #primary-nav and it may discard your calls...

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 5:07 pm
by libralion
mark wrote: Well you are missing the Navigation: CSSMenu - Horizontal stylesheet...
Hi Mark,

You mean I miss that in the default stylesheet? But what do I put in there then? I have no clue, sorry. ???
I always find it hard to mix 2 styles together. What exactly do I have to change or remove and in what file? In the default stylesheet as I wrote in the first post of this thread?

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 5:12 pm
by Dr.CSS
The default stylesheet you added was just for the layout you need to add the one for the menu, just attach it to template, when you need to make changes to default CSS it's best to make copies so you have something to go back to...

Also you have the base href in the head so these can be shortened, unlike most templates this is not needed...

background:url(http://www.jomedio.nl/cmsmadesimple/uploads/images/business/header_bg.jpg) repeat-x;

background:url(uploads/images/business/header_bg.jpg) repeat-x;

Even the call for the IE JS in the head can be shortened...

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 5:18 pm
by libralion
mark wrote: The default stylesheet you added was just for the layout you need to add the one for the menu, just attach it to template, when you need to make changes to default CSS it's best to make copies so you have something to go back to...

Also you have the base href in the head so these can be shortened, unlike most templates this is not needed...

background:url(http://www.jomedio.nl/cmsmadesimple/uploads/images/business/header_bg.jpg) repeat-x;

background:url(uploads/images/business/header_bg.jpg) repeat-x;

Even the call for the IE JS in the head can be shortened...
Hi Mark,

I shortened the links.
But about the top menu stylesheet, that is already attached to the template. I have the default stylesheet, the top menu and the accessibility stylesheet attached to the template. But still it isnot working. What am I missing?

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 5:26 pm
by Dr.CSS
Well I use Firefox with the web dev. toolbar ext. and it shows me the style sheets attached to the template and it's not there, sure you attached it to the right template?...

I see...

Layout: Top menu + 2 columns          This is for the layout not the menu...
Accessibility and cross-browser tools
business

Not...

Navigation: CSSMenu - Horizontal stylesheet    this is for the menu...

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 5:31 pm
by libralion
mark wrote: Well I use Firefox with the web dev. toolbar ext. and it shows me the style sheets attached to the template and it's not there, sure you attached it to the right template?...

I see...

Layout: Top menu + 2 columns           This is for the layout not the menu...
Accessibility and cross-browser tools
business

Not...

Navigation: CSSMenu - Horizontal stylesheet     this is for the menu...
I am sure that is the problem. But where do I attach the Navigation: CSSMenu - Horizontal stylesheet? I can't  find that anywhere.
Edit: I have this in the template:

Code: Select all

{cms_module module='menumanager' template='cssmenu.tpl' number_of_levels='3' collapse='1'}
Edit 2: I finally found the Navigation CSS menu under the stylesheets. Man how stupid can I be. ::) But I didnot know that I had to attach both a layout as well as a Navigation menu.
I have 1 link now under the Home button. But I don't see the second one. And why is the button so large. Where can i change that?

Re: Don't get the dropdown menu to work correctly

Posted: Sat Jul 12, 2008 9:44 pm
by LouiseW
Hello Libralion

Maybe this topic is of help: http://forum.cmsmadesimple.org/index.php/topic,23718
Don't code you menu, use the menumanager. Style it with CSS

Re: Don't get the dropdown menu to work correctly

Posted: Sun Jul 13, 2008 3:56 am
by Dr.CSS
Take the last 2 parameters out of the menu tag...  number_of_levels='3' collapse='1'

You will have to combine or take out some of the menu CSS, topnav, topnav_list, primary-nav...

Just don't mess with these...  and remember the top level ul is IDed as #primary-nav and the second level is #primary-nav ul

/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {    First level ul
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#primary-nav ul {        second level ul
  position: absolute;
  top: auto;
  display: none;
}
#primary-nav ul ul {      Third level ul
  margin-top: 1px;
  margin-left: -1px;
  left: 100%;
  top: 0px;
}

#primary-nav li {      first level li
  margin-left: -1px;
  float: left;
}
#primary-nav li li {            second level li
  margin-left: 0px;
  margin-top: -1px;
  float: none;
  position: relative;
}

/* Styling the basic apperance of the menu elements */

Re: Don't get the dropdown menu to work correctly

Posted: Sun Jul 13, 2008 6:03 am
by libralion
Thanks Louise and Mark. I am getting there now.  :)
I added the width: auto to the CSS menu Horizontal.
The only thing is, that the second level menulink is showing next to the first level menulink. I guess this is, because I use the Horizontal menu. But when I use the Vertical Menu it is all a mess, so what can I do to get the second menu level to show under the first menu level?
http://www.jomedio.nl/cmsmadesimple/

Re: Don't get the dropdown menu to work correctly

Posted: Sun Jul 13, 2008 8:01 am
by Dr.CSS
You should set the #primary-nav li li to a width:some px or it will be all over the place depending on the size of the word if you have a few items inder a top level menu item like 2.1, 2.1, 2.3, 2.4, right now it stays a width set from the text in Firefox but IE shows it going all the way to the edge of the page with little width on the 3rd level item...

BTW do you know the menu is to the right in Firefox and to the left in IE6...

Re: Don't get the dropdown menu to work correctly

Posted: Sun Jul 13, 2008 8:40 am
by libralion
mark wrote: You should set the #primary-nav li li to a width:some px or it will be all over the place depending on the size of the word if you have a few items inder a top level menu item like 2.1, 2.1, 2.3, 2.4, right now it stays a width set from the text in Firefox but IE shows it going all the way to the edge of the page with little width on the 3rd level item...

BTW do you know the menu is to the right in Firefox and to the left in IE6...
Great! Thanks for that!  ;D I will check the menu in IE6. I do have IE7 and Firefox set up, but I will check in IE6.
But the only thing left now is that the second level is still next to the first level. How do I get it to be displayed under the first level?

Re: Don't get the dropdown menu to work correctly

Posted: Sun Jul 13, 2008 5:47 pm
by Dr.CSS
What you see when you look at the site w/o touching/hovering menu is first level, I think you have number of levels confused...

You have Home this is first level, home 1 this is second level, hom 2 this is third level, in content > pages it looks like this, no?...

1. Home
1.1 Home 1
1.1.2 Hom 2  this is third level of "1. Home"

What you want is this, I bet...

1. Home
1.1 Home 1
1.2 Hom 2    So this shows up under Home 1

When you add page Hom 2 you gave it Parent: 1.1 Home 1  instead of  1. Home...