Esotropiart

Blog

first last

Bottoms Up Menus on the House

I can't remember ever seeing a menu on the bottom of a web page before, have you? I'm not talking a list of links, but a "drop-down" sort that has one or two branching levels. I am duplicating the primary navigation bar on Camp Jonah's new site, both on the top and the bottom of the page. Yesterday I added drop down functionality to the top menu. Obviously the same detail needs to be provided on the bottom, so I determined to alter the Gibson menu css to create "toss-up" or "Bottoms Up" menus as opposed to "drop-downs". I don't reckon I've ever seen such an inverted menu implemented before, though I'm sure it has occurred somewhere on the web. It is of course a necessary variation for a menu near the bottom of a page; otherwise some of the links would potentially drop below the browser's viewable region. It was an easy change to the CSS to invert the positioning of the menus. If the two menus had identical color schemes, it would take just one line of CSS code to invert the bottom menu (a context selector). Since I created both green and red buttons and menus, I had to redefine a number of CSS rules. Most of the CSS was not duplicated; however, for aside from the inverted positioning of the menu groups the structure remained the same. Here is a demo page that uses both the normal pure CSS menu and the inverted one.

Bottoms Up Menu

first last