The Blog

Drop-up menu

Due to popular request (hi xeon :), I have updated the examples with the drop-up version. This is useful if you want to place the menus in the page footer.
This is the only important part:

CSS:
  1. /* fix the position */
  2. #menu li ul {
  3. bottom: 1.5em;
  4. left: 0;
  5. }
  6. #menu li li ul {
  7. bottom: 0;
  8. left: 100%;
  9. }

1.5em is just an example value. You need to modify it according to menu make-up (as shown in the examples).

Good to have in mind is that usability script will not be much help here, as it checks for menu going below the viewport’s bottom, while here we need to check for going above the viewport’s top. I will make sure that future revision of the script deals with this situation. It’s not hard, I just need to find time to do it.

There is one more change, due to some wierdness in IE 5.0x on Windows. I had to use display instead of visibility because the latter creates huge problems in IE. Main menu is totally broken, probably because IE is acting like the submenus are not absolutely positioned at all. This way, wierdness is limited only when item is hovered.

Also, I gave the better explanation how to extend the styles to have more submenu levels, in the pure CSS menus post.

Banca

Banca

Beautiful and functional currency converter, supports just about any currency in the world.

Go Couch to 5k

Go Couch to 5k

The most popular starter running program in beautiful feature-rich app (GPS tracking, charts, detailed history etc)

Quickie to do

Quickie to do

The fastest short-term task-list / check-list app on the App Store. Really.

Guerrilla Cardio

Guerrilla Cardio

The most challenging high-impulse interval training in the world.

Run Mate

Run Mate

A versatile running coach app, with unlimited number of running programs. Perfect for casual runners.

4 Comments

Feel free to chime in, looking forward to it. Leave a Comment

  1. xeon says:

    good work Aleksandar, many thanks

  2. xeon says:

    but the same fix do not work with AD xMenu 2b (http://www.aplus.co.yu/adxmenu/examples2b/)
    what I’am mistaking ?

  3. xeon says:

    this is my example:

    http://www.e-lar.it/menuDropUp/
    it shows only the last element of the drop-up menu

  4. Aleksandar says:

    For 2b to work in IE, ADxMenu must be used (in regular version 2 it is optional). I said that usability script will not work properly here — and since slightly modified version of it is used for 2b, that one will not work at all.

    You can try modifying it yourself, until I find time to properly code the version that will work in all cases (and test it, off course).

Comments are now closed for this article.