The Code Powering Your Menu
No need to get into details here in this chapter, after all, Menu Builder does all the work for you. But this we want to make clear before we go any further: HTML and CSS(3) give you a lot of power to structure and design not only your pages but also navigation menus! Let’s briefly talk about how Menu Builder harnesses these powers to create powerful menus.
In HTML we use containers, or more correctly ‘elements’, to structure content and place it in a website. Menus work in the same way. In Menu Builder we’re using the <div> container to create the menu and place the other menu elements into. We could have used the slightly more semantic HTML5 <nav> element. But since it would have been the only HTML5 element in the entire menu, we (and with us many others) feel it’s as good (or even better since we don’t have to provide for IE fixes) to use a good ol’ div container.
CSS3 is actually way more awesome than HTML5 and provides you with design powers you could only dream of a few years ago. You can apply the new features, like border-radius (rounded corners) and box shadows, to your current HTML and even mix them with older CSS code. That's backwards compatibility at it's best, and you're taking full advantage of that when you add a snazzy CSS3 menu created with Menu Builder to a less modern site.
By using these new CSS3 properties, it makes it possible to design really cool menus with rounded corners, drop shadows (text shadow and other effects coming soon) without the use of graphics, making the menus lightweight and fast loading. In a future version gradient support will be added, giving even more possibilities. If you are already coding your website to be responsive, the added bonus is for you that with the fluid HTML menu layout and new CSS functions (Media Queries), your menus can be made responsive as well.
We think these are some pretty awesome reasons to build our new Menu Builder around these modern web standards.
