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

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

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

Post 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?
Last edited by libralion on Sun Jul 13, 2008 6:03 pm, edited 1 time in total.
rakker
New Member
New Member
Posts: 8
Joined: Sun Mar 09, 2008 6:05 pm

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

Post 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
Last edited by rakker on Sat Jul 12, 2008 1:51 pm, edited 1 time in total.
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

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

Post 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?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post 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...
Last edited by Anonymous on Sat Jul 12, 2008 5:07 pm, edited 1 time in total.
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

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

Post 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?
Last edited by libralion on Sat Jul 12, 2008 5:11 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post 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...
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

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

Post 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?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post 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...
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

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

Post 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?
Last edited by libralion on Sat Jul 12, 2008 6:47 pm, edited 1 time in total.
LouiseW
Forum Members
Forum Members
Posts: 83
Joined: Tue Jun 10, 2008 6:59 pm

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

Post 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
Thanks for your help
I use CMS Made Simple 1.6 "New Caledonia"
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post 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 */
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

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

Post 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/
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post 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...
libralion
Forum Members
Forum Members
Posts: 191
Joined: Fri Jul 11, 2008 4:11 pm

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

Post 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?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

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

Post 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...
Post Reply

Return to “Layout and Design (CSS & HTML)”