Menu Question

[Grover]

Hello Guys,

back with a new question.

I make the menu by using

Code: Select all

      <!-- This is for the left menu -->
     <div id="menue1">
       {bulletmenu start_element="1"}
    </div>
    <div id="menue2">
       {bulletmenu start_element="2"}
    </div>
...

and css

Code: Select all

#menue1{
position:absolute;
left:20px;
top:160px;
width:150px;
color:inherit;
padding-left:10px;
border-top: 1px solid #babdba;
	border-left: 1px solid #babdba;
	border-bottom: 1px solid #babdba;
	border-right: 1px solid #babdba;
}

#menue2{
position:absolute;
left:20px;
top:190px;
width:150px;
color:inherit;
padding-left:10px;
border-top: 1px solid #babdba;
	border-left: 1px solid #babdba;
	border-bottom: 1px solid #babdba;
	border-right: 1px solid #babdba;
}
...

result

But here is a few points. The dot, unterline, and I whant the hole button. Also, that the active button change the color and a hover.

How can I handle this?

Thanks

Grover

[westis]

I'm replying here to the menu question that you also posted in another post.

The {bulletmenu} tags generates the class "bulletmenu" for each menu item. So to change the CSS for the menu links you need to add something like this:

Code: Select all

.bulletmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none; //removes the bullets
}

.bulletmenu li {
}

.bulletmenu a, .bulletmenu a:link, .bulletmenu a:visited
{
display: block;
padding: 5px 10px;
text-decoration: none;
}

[Grover]

I love you

Thanks. I would never find this by my self.

Now I have to play to get div. colors. I think is not the Problem.
But I think there is a other problem. My you can help me again?

I use only the main navigation (means 1. 2. 3... not 1.1 2.1 etc)
But inside the page I make the link to, let say, 2.1
You can reach 2.1 over the page 2. I like to have the menu marked by color
until I stay inside 2. 2.1 2.2 ...

Any idea?

[westis]

I'm glad I can help. This forum is great that way.

I'm not sure I understand what you mean with the menu thing. Do you want sub-menus (2.1, 2.2 etc.) to show when you click on a top level menu item (like 1, 2, 3 etc.)? Then you could just add pages and select one of the top level menu items as the parent page. Then the sub-pages will only show when you click the parent page/top level.

Or you could post a link to a site that is using what you are looking for.

[Grover]

I will try it.
Have a look there http://www.kreatives-chaos.com/index.php?seite=an910
You can see at the breadcrumb that you are inside 3 level deep.

I say in CMS that 1., 2., 3. ... are shown in the menu. 1.1, 2.1, 2.2, 3.1 are not marked to shown in the menu.
I go on menu 2. Inside page 2. I make a link to 2.1 and 2.2. You can see at breadcrumb that you are in the next level
And I like the same that the menu point/ field is marked if I am at the next level

Like http://cms.eids.de/avm.html breadcrumb show I am at 2.1 and I like to mark the manu button like in the URL on top.

Sorry, my English is not the best

[westis]

So you would like to show  μC >> avm  in the menu? But you don't want sub-menus to expand below the top-level, like avm being below μC? Like on www.kisima.org/cmsmadesimple, where each sub-menu expands as you click a top-level menu item.

[Grover]

forget what I wrote befor.

My menu look like I want. But there are a few small thinks.

1. If I push on it and hold the button you can see a small dot line. At the left side, it dit not reach the border.
If I use padding-left I have this gap. Without the word "glue" to the left border.

2. I like to have the aktiv button with a background color. I'm not able to do this. Where to look for?

Thanks

Grover

[westis]

If you look at the source code of your page you can see that the active link has class="currentpage". What you need to add in your CSS then is a background-color for this class, that will be the background color for the active link. '

Also, you have set the border for #menue1, which has padding-left: 10px. That's why the link is not reaching all the way to the border on the left side, because that dotted line shows around the link when you click on it and the link tag is embedded in the . The hierarchy now is #menue1 .bulletmenu ul li a.

I would suggest you dig a bit deeper into CSS (there are lots of great tutorials on CSS) and look at your source code to understand what part of the code that is affected by which CSS element.

I looked at your CSS and for the menu, these are the relevant CSS you use now:

Code: Select all

.bulletmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.bulletmenu li {
}

.bulletmenu a, .bulletmenu a:link, .bulletmenu a:visited
{
  display: block;
  padding: 0px 0px;
  text-decoration: none;
}


#menue1 {
  position:absolute;
  left:20px;
  top:160px;
  width:150px;
  color:inherit;
  background-color:#fff;
  padding-left:10px;
  border:1px solid #babdba;
  font-size:90%;
  font-weight:bold;
}

I would suggest the following changes:

Move border:1px solid #babdba; and padding-left:10px; from #menue1 (and #menue2) to .bulletmenu a, .bulletmenu a:link, .bulletmenu a:visited

The full code for the menu would then look like this:

Code: Select all

#menue1 {
  position:absolute;
  left:20px;
  top:160px;
  width:150px;
  color:inherit;
  background-color:#fff;
  font-size:90%;
  font-weight:bold;
}

.bulletmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.bulletmenu li {
}

.bulletmenu a, .bulletmenu a:link, .bulletmenu a:visited
{
  display: block;
  padding:5px 10px; //5px of padding top and bottom, 10px of padding left and right
  text-decoration: none;
  padding-left:10px;
  border:1px solid #babdba;
  background-color: #000000; //you can select a background color for each menu item here if you want, otherwise remove this
}

.bulletmenu a:hover
{
  font-weight: bold; // choose any style for when you hover over a menu item here
}

.currentpage {
      font-weight: bold;
      background-color:#b7b7ef;   // choose any style for the active link here
      }

// You MAY have to replace .currentpage with the following, which is more specific about the hierarchy.

.bulletmenu li a.currentpage, .bulletmenu li a:link.currentpage, .bulletmenu li a:visited.currentpage {
      font-weight: bold;
      background-color:#b7b7ef;  
      }

Hope that works. Unfortunately, I won't have much time to look more carefully at your page in the coming days. But if more questions arise, feel free to ask. However, I would suggest that you first search the answers by reading a tutorial about CSS.

And by the way, your site now looks very similar to the site that you wanted to take ideas from. If you don't know the people at kreatives-chaos.com it's probably a good idea to make some more changes to have your site feel more unique.

Have a nice weekend!
/Daniel "westis"

[Grover]

Thanks!

Yes I know. I have to take a deep look inside css. I never had experiences with css. By the way, I will do it.
More and more I try, more and more it do not work. For me I can follow better to some sample.
That embedet and hierarchy inside of css was new for me.

And yes, it looks to simular with the other page. If I have more experienc, then I will think about the design (I am a Design cripple)

So thanks again. I will use the weekend to study css

Dirk

[Grover]

Sorry me again.

I think, this is a problem I can not solve with CSS.

I mark the button as "current page" this work fine. If I go to page "http://cms.eids.de/uc.html" there is a link.
This link goes to http://cms.eids.de/avm.html what is a son of the first link. You can see this at the breadcrumb.

Now the "current page" is the son not longer the father. What can I do that the "father" stay aktiv?

[westis]

Grover,

If you will have the submenu placed in a different place from the toplevel, then you can use the EllNav module. Then you will be able to have different CSS both for the parent and the child.

That module is for example used on the site that soon will replace the official CMSMS site. For example a page like http://test.cmsmadesimple.org/Navigation.shtml, where both the top level (in the horizontal menu), the parent in the vertical menu and the child to that parent all have different CSS to show you where in the menu you are.

The link I provided is also where you can download the EllNav module, although this site is not yet officially released.

[Grover]

Westis,

You patience with me is great. I will have a look on it and I try to asked not so much

[westis]

Westis,

You patience with me is great. I will have a look on it and I try to asked not so much

I'm still in the "fall-in-love" phase with CMSMS And I have asked newbie questions in other forums and been impressed by the way people usually answer such questions. Now when I'm able to I'd like to give that back to others who I could help.

And then again, that's what I love about the CMSMS community, no question is too stupid, really, if asked with sincerity and by someone who is willing to learn.

[Grover]

I hope you trink Beer?! I can not help her, but once if we will meet us, I will invite you for one (ore 2.3.4...)