Going To The Bar

This week I had some practice working with Wicket and CSS. Specifically I was given an implementation of menu bars for Devcathlon and added improvements to it.

One of the first things I did was to add a menu along with 3 corresponding submenus. Then I implemented them into the Wicket code.





I made sure that the new menu corresponded to the body tag section-3 so that the bar will work correctly.



Then I created an additional 7 to showcase the limitations of the menu bar. At first I didn't notice anything wrong with the menu bar.



But if I reduced the browser size an issue popped up.



Clearly there was a problem in the CSS concerning browser resolution compatibility. Looking into menu.css I manage to narrow the problem down to either the subnav or content CSS code. After trying out using different positions and widths I managed to get a solution that worked.



Next in the test html files I changed h1 headers to h3 headers. This caused the submenus to misaligned. To fix this I went into the menu.css and changed the top value for the submenus from 84 px to 70 px.



The only problem that i couldn't solve was how to bold the menu item that corresponded to the currently displayed page. I couldn't figure out a Wicket solution but I did find this.

A file of the work I've done can be found here.