GWT - How to create a drop down menu


Tags: java,css,gwt

Problem :

Hi I am trying to create a drop down menu using GWT. This is the layout I am trying to achieve:

| Categories | Pictures | Other |

Now, when categories opens I want to display the actual drop down showing the categories in groups of two. Lets say:

 | Categories | Pictures | Other |
 |  Cat 1    Cat 2   |
 |  Cat 3    Cat 4   |
 |  Cat 5    Cat 6   | <---------- Menu of categories here
 |  Cat 7    Cat 8   |
 |  Cat 9    Other   |
  -------------------

I looked at the MenuBar Widget http://gwt.google.com/samples/Showcase/Showcase.html# MenuBar and the rest of the widgets there. However, doesnt seem to fit my needs since categories will be shown in pairs of 2 so whenevever I move the mouse over a row it will select both of them instead of only one.

I am currently using a FlexTable so basically I have a matrix with empty spaces and I only display the elements from categories because it is the only one that has items. In otherwords all the elements are a cell in a matrix. I almost achieve the use case However, the way is currently programmed is a bit hacky and unnatural.. currently it looks like this:

       Column1        |       Col2   |  Col3
| Categories                Pictures | Other |               <- Row1
|  Cat 1                     Cat 2   |  Empy |               <- Row2
|  Cat 3                     Cat 4   |  Empy |               <- Row3
|  Cat 5                     Cat 6   |  Empy |   <---------- Menu of categories here
|  Cat 7                     Cat 8   |  Empy |               <- Row5
|  long descriptions ruin layout     |  Empy |               <- Row6
-------------------------------------

So the layout of the header “Pictures” and “Other” always will move depending on the width of the categories menu.

Could anyone give me an advise on how how to achieve this using GWT? I know there's the option to create own widgets. But before that I would like to know how to achieve that. May be somebody can guide me how to integrate another technology like jQuery, or achieve that format adding CSS classes or a particular GWT widget layout that allows to have different columns and row sizes.

Thank you



Solution :

here is a fiddle you can start with http://jsfiddle.net/UUHyj/ all it uses is css but for ie6 down you will need javascript to do the rollovers etc


    CSS Howto..

    How is the “travel mode” menu in Google Maps implemented?

    How to remove Width and Height values of an Image with css?

    How to switch between specific CSS files using jQuery?

    new google images how do they float correctly

    How to enable auto indentation in lists and list items?

    How put some horizontal offset to an element bottom border with CSS?

    How to inline the contents of an entire stylesheet with Wordpress?

    HTML, CSS. Show the second node first before the first node in MOBILE site

    How to remove a html table particular column to make other datas visible(responsive) using media queries?

    How to have your own style.css and bootstrap at the same time?

    How to prevent span tags overlapping each other?

    How do I prevent a child element from inheriting parent element's attached attribute (in notched navigation)?

    CSS Horizontal Menu is showing list bullets

    How can I add a fixed sidebar to a web page?

    How to make text on the same line different font without using extra divs?

    How to make the same distance between tags with only CSS?

    How Should I Send HTML/CSS Content To A Server?

    How do I post a jsfiddle example of some trouble I'm seeing in Rails?

    How to make div blocks not floating using CSS?

    How to add the css properties to an image in ImageResourceCell of CellTable

    How to add and remove a current state to a link when another is clicked using jQuery

    How do I make a div not display, if the browser window is at a certain width? [duplicate]

    How to output element.style.marginTop using digits only?

    Skeleton CSS - how to span the width of the screen?

    How to display Highcharts in rows (5)

    How to make visual changes with dynamically generated HTML code?

    How to get two column float left div layout to word wrap?

    How can I make clickable list with sublinks ?

    How do I select an element in the dom with an attribute of ct:value?

    How to move the right div to the right with css