I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this:
<div class="topbar">
<div class="container fixed">
<h3>
<a href="" class="logo">test</a>
</h3>
<ul class="nav secondary-nav">
<li class="menu open">
<a class="menu" href="#">Dropdown</a>
<ul class="menu-dropdown">
<li><a href="">Secondary link</a></li>
<li><a href="">Something else here</a></li>
<li class="divider"></li>
<li><a href="">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div>
In addition, I want to utilize the clickhandler for all hyperlinks and implement hover effects on the "Dropdown" link. My idea is to generate different widgets such as NavBar and NavBarItem, then programmatically add them to the NavBar widget using methods like navBar.add("historytoken1", "Text"). This approach would append a li tag with a hyperlink to it, and so on.
The purpose of the clickhandler is for navigation and also for manipulating CSS classes to apply new styles to the li elements.
I've been experimenting with this widget all day long, but I haven't made much progress because GWT keeps inserting unnecessary divs between the li tags or in other places. The restriction of only using widgets in flowpanels is also causing some frustration.
While I'm not expecting a fully developed solution, could someone provide me with a hint on how to tackle this? It seems like having ul and li for a menu shouldn't be that complicated :) And I'm puzzled why GWT doesn't easily support this. Perhaps I'm missing something.
By the way, I'm attempting to incorporate HTML Bootstrap from Twitter Bootstrap, which I really admire:
Twitter Boostrap
Thanks