[Solved] "div overflow" and "collapsing menu" in andreas03 template?

[howgodskill]

Hi, I installed CMSMS and the andreas03 template (http://www.multiintech.com/index.php?page=andreas03, but with the menu on the left side). I am making some modifications in the template but since I'm not that big on coding I could use some help on two things.

First, I would like to make the menu collapsable. Standard, the menu's children are shown to the right, but I would like the children to be shown only when the parent item is clicked first, but with the layout of the andreas03 template. I can of course get another template's menu to be shown, but it does in no way match the rest of the site.

Next, some pages are real lengthy, which makes the menu invisible because of all the scrolling. I am therefor looking for a way to keep it visible at all times. And as far as I know, there are two options. One would be to have the menu flowing up and down with the text, but I have no clue whatsoever on how to accomplish that. Something I might be able to pull off is setting a fixed height and make the div with the {content} overflowing. That way all else stays where it needs to be, and only the longer texts scroll. Although I've been looking over code for some hours now, I still haven't found out how to get it to work.

If anyone could give me some usefull hints on how to solve this, your help will be greatly appreciated!

Thanks!

[dowoam]

Hi,

to make the children only appear when the parent element ist aktive, just put collapse='1' to the menu tag in template.
I don`t know this template, but this will work in standard template.

For the content area, you must define the height of the content div and ad "overflow: auto;" or "overflow:scroll;"

greetings

Dirk

[howgodskill]

Hi Dirk, thanks for your reply.

The problem is though, that when I make the menu collapsable, it will still show the children horizontal, but now only when clicked. I need to change the layout of the menu, in order to show the children vertically, thus under the parent item. Guess I'll have to be digging some code here, unless someone knows an easier way (because, again, I' not that much of a coder).

The div overflow is fixed. I was looking at the wrong class all this time. Just re-arrange some other divs and it's done.

[dowoam]

Hi again,

display:block;


may you give me the domain?
I'll have a look to the code.
PM or email.

greetings
Dirk

[howgodskill]

Sure, that would be nice. It's at www.veganbarcelona.com and I'm currently filling it with content. You'll see that the menu could be a lot better than how it is now.

Anyway, the coding refers to the menumanager, in which I found this piece of code:

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
<a class="sidelink" {/if}

This refers to a class named "sidelink", which is following in the css file:
.sidelink{
display:block;
width:140px;
font-style: tahoma,verdana,sans-serif;
margin:3px 10px 2px 0;
padding:5px 0px 5px 8px;
font-size:10px;
font-weight:bold;
text-align:left;
background:#eee url(uploads/andeas03Lft/gradient1.png) repeat-x;
color:#0F3A7F;
border-top:1px solid #ddd;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
border-left:1px solid #ddd;
}

.sidelink:hover,.menuheader{
background:#fff url(uploads/andeas03Lft/gradient2.png) repeat-x;
color:#0F3A7F;
font: tahoma,verdana,sans-serif;
border-top:1px solid #ddd;
border-right:1px solid #888;
border-bottom:1px solid #888;
border-left:1px solid #ddd;
text-decoration:none;
}


For me it's still unclear on how to get children to be shown underneath (in a fold-open way) instead of next to the parent menu.

Hope you can make something out of this.

[howgodskill]

This is the complete css for the menu. I fiddled around a bit with the display: block and display: inline but couldn't work it out...



/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */

#menuwrapper {
width: 100%;
}


/* Unless you know what you do, do not touch this */

#primary-nav {
list-style: none; 
padding: 0px;
width:150px;
        margin:3px 0px;
}
#primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
        margin-left: 0px;
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
    margin-bottom: 3px;
position: relative;
}
#primary-nav li li{width:160px;
        margin-bottom: 0px;
        argin-right: 10px;
position: relative;
}
#primary-nav ul li li{
        margin-left: 0px;
        }

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

#primary-nav a {
color #666666;
display: block;
margin: 0px; 
text-decoration: none;
}
#primary-nav li, #primary-nav li .menuparent {

}


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

#primary-nav li.menuactive {
color:#000
}


/* 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 li .menuparent, #primary-nav li .menuparent:hover {
background-image: url(uploads/andeas03Lft/arrow.gif);
background-position: center left;
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 {
}


/* 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:hover ul ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul, #primary-nav li.menuparenth ul ul ul {
display: inline;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul, #primary-nav ul ul ul li.menuparenth ul {
display: inline;
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }

[dowoam]

Hi again.

Ok, I changed a little to the menu CSS:

This is the new CSS:

#menuwrapper {
width: 100%;
}


/* Unless you know what you do, do not touch this */

#primary-nav {
list-style: none;
margin:0;
}
#primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
                margin-left: 0px;
top: 0;
left: 100%;
display: none;
}

#primary-nav ul li li{
list-style: none;
                width:160px;
                margin-bottom: 0px;
                margin-right: 10px;
position: relative;
}

#primary-nav ul ul li{
                display:block;
                margin-bottom: 3px;
position: relative;

}

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

#primary-nav a {
color #666666;
display: block;
margin: 0px; 
text-decoration: none;
}

#primary-nav li, #primary-nav li .menuparent {

}


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

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


/* 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 li .menuparent, #primary-nav li .menuparent:hover {
background-image: url(uploads/andeas03Lft/arrow.gif);
background-position: center left;
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 {
}


/* 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:hover ul ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul, #primary-nav li.menuparenth ul ul ul {
display: block;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul, #primary-nav ul ul ul li.menuparenth ul {
display: block;
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }

The result is this:
http://www.bbm-content-management.de/CMSMS/index.php?page=temp

Sites Kontakt and temp are in the andreas03 template. So you can switch between this two, to see the temp-children appear.

for this side, I had to change the CSS (layout) and template to.

greetings

Dirk

[howgodskill]

Thank you for your work and time, Dirk, it works!! It now shows the children so I'll just have to check to show them a little bit further to the right or such to show they're children items, but it's great, THANKS!!!!

[dowoam]

Hi,

thats fine.

To show the children a little to the right, just ad:

#primary-nav li li a {
                padding-left:40px;       /*adjust left space*/
                width:108px;              /*adjust with to the parent menu width*/
}


after the

#primary-nav a {}

But I saw an other bug. In Firefox, the menu is displayed a little to the right.
To fix, ad the following th the Stylesheet andreas03:

#sidebar ul{
          padding:0;
          margin:0;
}

I hope everything will work now.


Greetings

Dirk

[howgodskill]

Dirk, I cannot thank you enough!!! Very kind of you to help me out, it would have been hopeless if it weren't for you.

[christiaans]

Good thing it worked out for you .

Could you be so kind, next time you ask a question, to mark it up "[Solved]", when it is solved? Thanks in advance .