How to create DHTML menu?
I need to create a DHTML menu with the specified functions, but I cannot figure out how to do it. This is what I need:
All items are laid out horizontally. If they are wider than the screen, two small arrows will appear on the right side of the menu, allowing you to scroll through it. Something like that:
+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+
Menu items should be available anywhere in the cell. They should stretch both vertically and horizontally to the content. Text in paragraphs should be centered both vertically and horizontally. The menu should work in IE7 / Opera / FF / Safari.
Scrolling is the easy part - I just put the whole thing in a container (say <div>
), set the container to overflow: hidden
, and then fiddled with Javascript with clientWidth
, scrollWidth
and scrollLeft
. I understood this and have already tried it.
But how do you make menu items so flexible, clickable anywhere, and centered text?
source to share
Okay, I talked to the superiors and they thought it might be a good thing that you can't right-click a menu item and select "Open in New Window". If this requirement is omitted then I am not bound to <a>
link elements. With JavaScript I can turn anything into a link. So I choose you, pikachoo <table>
!
Yap, this is heresy, but it works. More specifically, this is the only construct I can think of that can do all of the following at the same time:
- Center text horizontally and vertically;
- Stretch content horizontally and vertically;
- Don't wrap to the next line when items start to overflow.
Anything else that can do the same is likely to be more contrite anyway. And before anyone has an idea - no, I don't need search engine support. This is an internal web application. It would be nice if Google could index this ...
source to share
Try the CSS below:
#menu {
display: table;
}
#menu a {
display:table-cell;
vertical-align:middle;
}
And then format your menu like this:
<div id="menu">
<a href="#">normal text</a>
<a href="#"><big>large text</big></a>
<a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>
This will vertically align and prevent link wrapping. Let us know how it works.
source to share
clickable anywhere is easy: you can bind an onclick event trigger (and hopefully some cursor style) to an atomic cell element, or you can make atomic cell elements <a> tags (or most likely wrap them in <li>) as well as link and style respectively (padding, margin, foo).
eg. case 1:
<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>
(obviously I don't really recommend inline style or script handlers, but you get the idea)
Applying padding will effectively center the text, and without having any width, they will naturally stretch to fit their content.
source to share