Page 1 of 1
How to make CSS menu expand up / updward instead of down [CMSMS1.42] [solved]
Posted: Thu Apr 24, 2008 9:57 am
by yankee80
Hi all,
When hovering the mouse over the standard CSS horizontal menu the menu children expand below the parent.
Is there any easy way to make the children expand above the parent instead?
Thanks in advance
Eric
Re: How to make CSS menu expand up / updward instead of down [CMSMS1.42]
Posted: Thu Apr 24, 2008 10:52 am
by thoms
Not so easy, as far as I know.
Look at the CSS, you have to change the relative position of the menu children:
Code: Select all
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
Play with negative values of margin-top. The problem is, that this is dependent on the nummber of child elements.
I don't know if there's an easier way.
Thomas
Re: How to make CSS menu expand up / updward instead of down [CMSMS1.42]
Posted: Thu Apr 24, 2008 12:58 pm
by KO
Try playing with:
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
I would try changing
top:auto -> bottom:auto or bottom:100%
Re: How to make CSS menu expand up / updward instead of down [CMSMS1.42]
Posted: Fri Apr 25, 2008 6:03 am
by yankee80
thanks to the both of you, but it didn't work out.
increasing the negative top margin makes the children show up ABOVE the main menu, but since different parents have a different amount of children it won't work anyway.
I think we have to forget about a dynamic CMS menu and go with a static javascript menu instead.
thanks anways
Eric
Re: How to make CSS menu expand up / updward instead of down [CMSMS1.42]
Posted: Fri Apr 25, 2008 10:29 pm
by Dr.CSS
I solved this in an older post, you may try search to find it...
Re: How to make CSS menu expand up / updward instead of down [CMSMS1.42]
Posted: Sat Apr 26, 2008 12:08 am
by Nullig
Have you tried playing around with:
top: -20px; /* depends on the height of your menu */
If you provide a link, it would be easier to play around with.
Nullig
Re: How to make CSS menu expand up / updward instead of down [CMSMS1.42]
Posted: Thu May 08, 2008 3:32 am
by yankee80
A CSS-expert friend of mine figured it out. The important things below are:
#menuwrapper {
WIDTH: 100%; BACKGROUND-COLOR: #7cccf2; POSITION: absolute; TOP: 0px; POSITION: relative ;LEFT: 0px;
}
#primary-nav UL {
DISPLAY: none; POSITION: absolute; BOTTOM: 24px;
}
#primary-nav UL UL {
MARGIN-TOP: 1px; LEFT: 100%; MARGIN-LEFT: -1px; BOTTOM: -1px;
}
-----------------------------------------
Full CSS below:
#menu_vert {
PADDING-LEFT: 125px; MARGIN-LEFT: 1px; MARGIN-RIGHT: 1px
}
.clearb {
CLEAR: both
}
#menuwrapper {
WIDTH: 100%; BACKGROUND-COLOR: #7cccf2; POSITION: absolute; TOP: 0px; POSITION: relative ;LEFT: 0px;
}
#primary-nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#primary-nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#primary-nav UL {
DISPLAY: none; POSITION: absolute; BOTTOM: 24px;
}
#primary-nav UL UL {
MARGIN-TOP: 1px; LEFT: 100%; MARGIN-LEFT: -1px; BOTTOM: -1px;
}
#primary-nav LI {
FLOAT: left; MARGIN-LEFT: -1px
}
#primary-nav LI LI {
MARGIN-TOP: -1px; FLOAT: none; MARGIN-LEFT: 0px; WIDTH: 165px; TEXT-ALIGN: left
}
#primary-nav A {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#primary-nav LI LI A {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; COLOR: #006699; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #e4f5ff
}
#primary-nav LI LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #e0b382
}
#primary-nav LI LI LI {
}
#primary-nav LI LI LI A {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; COLOR: #3399cc; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #bfe9ff
}
#primary-nav LI LI LI A:hover {
COLOR: #fff; BACKGROUND-COLOR: #edbd5d
}
#primary-nav LI {
}
#primary-nav LI.menuparent {
}
#primary-nav LI.menuactive {
BACKGROUND-COLOR: #c5681d
}
#primary-nav UL LI.menuparent {
BACKGROUND-POSITION: right center; BACKGROUND-IMAGE: url(images/cms/arrow.gif); BACKGROUND-REPEAT: no-repeat
}
#primary-nav UL LI.menuparent:hover {
BACKGROUND-POSITION: right center; BACKGROUND-IMAGE: url(images/cms/arrow.gif); BACKGROUND-REPEAT: no-repeat
}
#primary-nav UL LI.menuparenth {
BACKGROUND-POSITION: right center; BACKGROUND-IMAGE: url(images/cms/arrow.gif); BACKGROUND-REPEAT: no-repeat
}
#primary-nav LI:hover {
BACKGROUND-COLOR: #c5681d
}
#primary-nav LI.menuh {
BACKGROUND-COLOR: #c5681d
}
#primary-nav LI.menuparenth {
BACKGROUND-COLOR: #c5681d
}
#primary-nav LI.menuactiveh {
BACKGROUND-COLOR: #c5681d
}
#primary-nav UL {
DISPLAY: none
}
#primary-nav LI:hover UL {
DISPLAY: none
}
#primary-nav LI:hover UL UL {
DISPLAY: none
}
#primary-nav LI.menuparenth UL {
DISPLAY: none
}
#primary-nav LI.menuparenth UL UL {
DISPLAY: none
}
#primary-nav LI:hover UL {
DISPLAY: block
}
#primary-nav UL LI:hover UL {
DISPLAY: block
}
#primary-nav UL UL LI:hover UL {
DISPLAY: block
}
#primary-nav LI.menuparenth UL {
DISPLAY: block
}
#primary-nav UL LI.menuparenth UL {
DISPLAY: block
}
#primary-nav UL UL LI.menuparenth UL {
DISPLAY: block
}
#primary-nav LI LI {
CLEAR: both; FLOAT: left
}
#primary-nav LI LI A {
HEIGHT: 1%
}
Re: How to make CSS menu expand up / updward instead of down [CMSMS1.42] [solved
Posted: Fri May 09, 2008 6:41 am
by Dr.CSS
If you use the default horizontal CSS menu then just changing the 3 things below will make it go up, but the secondary menu items are starting off the menu in reverse...
#menuwrapper {position:relative
}
#primary-nav ul {
position: absolute;
bottom: 0px;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
bottom: 0px;
}