building a vertical menu from botton upward

1,024 Posts

Frank Reply #1, 17 years, 4 months ago

Hi,

for styling purposes I would like to align my first menu item on the botton of a div.
ANd the have the next menu item on top of that on, etc. Valign does not do that. Any suggestions?

Here the css i got sofar

.vmenu ul { padding: 0;  list-style-type: none;}
.vmenu ul li { float:left; list-style: none; padding: 0; margin: 0; border-right: solid 0px}
.vmenu ul li a {float: left;display: block; height: 40px;	color: #beb3f0;line-height: 40px;   padding: 0;   text-decoration: none;
}
.vmenu ul li.active a {color:#faebe6;}
.vmenu ul li a:hover {color:#300fbc; background:transparent;}
.vmenu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}

1,390 Posts

kongondo Reply #2, 17 years, 4 months ago

Hi,

How are you generating this menu? If you are using Wayfinder then you can just use make use of menu index to tell Wayfinder how to order the menu items. So, if you have 5 items in your menu, the one with the highest menu index will appear last and the one with the lowest (0) should appear first.

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

1,024 Posts

Frank Reply #3, 17 years, 4 months ago

Hi,

yep using wayfinder. But sorting order (as far as I know) only lets me sort what document will be first in the row.
I however want to have my first menu item on the bottom of that menu div.
So if there is only one menu item, that item should be on the bottom of that div. Next should appear above it.

1,390 Posts

kongondo Reply #4, 17 years, 4 months ago

Oh, OK

I think either of the following might work?

1. You can set the div to :

display:table;

And the ul/li to

display:table-cell; vertical-align:bottom;

NOTE: IE 8 supports CSS tables, but IE 7 and below do not. Some solutions here:
http://css-tricks.com/vertically-center-multi-lined-text/

OR

2. Play around with position relative and absolute for the parent and child elements respectively.

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

1,024 Posts

Frank Reply #5, 17 years, 3 months ago

Hi,

solved this, was almost sure it could be done with a negative margin,
Focussed on the top margin of the container, no go.
Instead tried it with the bottom margin of the li element and all okay,

here s the code, if interested:

/*menu section*/
ul, li{/*margin:20px 0 0 0;*/ border:0; padding:0; list-style:none;}
.vmenu { clear: both; margin: 0 0 0 0; padding:10px 0 0 0;  height: 22px;}
.vmenu li {  margin: 0px 10px -50px 0; }
.vmenu li a { margin: 0px 0 7px 0;display: block; height: 20px;	color: #ffffff;line-height: 24px; padding-left: 0px; text-decoration: none;}
.vmenu li a:hover {color:red; }
.vmenu li.active a {color:orange;}
/*end menu section*/

Here the site: http://www.italianartists.eu/Work.html

The menu is build up from the bottom of the div, so far in IE7, FF, (Mac & PC) Safari and Chrome. Off course IE6 messes up completely. Cant check IE8, virtual PC & win7 is really slow here.

Frank.

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 17 years, 3 months ago

The dotted outline on the items of the top menu are kind of ugly, at least in FF. Have you considered setting outline:none in the CSS for them?

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,024 Posts

Frank Reply #7, 17 years, 3 months ago

Hi Susan,

well I thought it was really ugly, thanks for the tip.

Frank.