|
|
Posted by gehegeradeaus on 12/14/06 16:20
fullposter schreef:
> What about playing around with this idea:
>
> <style>/*no "frills"*/
> .foo{
> display: block;
> text-decoration: none;
> border:#000000 1px solid;
> height: 26px; /*20 + 6px for innerdiv padding*/
> width: 300px;
> overflow: hidden;
> }
>
> .foo span{
> display: block;
> width: 300px;
> height: 20px;
> border-bottom:#0000ff 1px solid;
> padding: 3px;
> }
>
> .foo:hover{
> overflow: visible;
> color:#ff0000;
> height: 78px; /*3 spans * 20 + padding6px * 3 spans*/
> }
> </style>
>
> <a href="#" class="foo" onclick="return false;">
> <span>option a</span>
> <span>option b</span>
> <span style="border-bottom-width: 0px;">option c</span>
> </a>
>
> If IE6 is a concern (it should be), go with javascript on the anchor
> rather than css hover. To keep Xhtml strict comaptibility, use spans
> and then assing display: block via css.
>
> Being mark up, you could technically put in there all you want, even
> images.
>
> To create an image as a spot that triggers the drop down, set an
> onmouseover on it (anchors can't nest other anchors, so tricks are
> necessary).
>
> If form submission is a concern, go with javascript once again: upon
> submission set an onsubmit that populates hidden fields.
> It would be very nice to arrange a DOM node swaps to emulate
> selections.
>
> I can't write the whole application, but the fact is: the answer is
> positive, you could do that, with some work.
>
> I hope this helps
> http://www.fullposter.com
thanks, it is a solution indeed, yet not a beautifull one... maybe I
should consider doing it another way. Thanks for your opinion!
Navigation:
[Reply to this message]
|