This is the first step toward creating a tiled menu. All you have to do is to put all necessary files between theand tags of your HTML page. This may consist of links to your favorite Google Fonts, CSS, jQuery and icon font that you want to use.
Notice that I’ve placed links to Google’s Open Sans Condensed fonts and Ionicons font icon in my demo code. Optionally you can use other font icon such as Font Awesome. In addition, I’ve also referenced the latest version of jQuery in the script tag from http://code.jquery.com.
Structure the Menu
Once you’ve put all necessary files in theof your HTML document, the next thing you need to do is developing the menu. Check out the markup for the menu below:
In the above code, I’ve created an unordered list <ul> with a class of nav-list wrapped up inside a nav tag. Each list item contains a link, a ionicons class, and name of the menu item. The ionicons class is used to add ionicons icon tag to a menu item.
Also, you would have noticed that I’ve used the Unicode ☰ (☰). This will create a navigation toggle button that will only be displayed on smaller screens. Using the toggle button, a user will be able to open the tilled menu on the mobile device he’s using.
Once the menu is created, now it’s time to dig into the CSS. Let’s start with adding styles to the body, .nav-bar and .nav-container classes.
In the above CSS code, I’ve put general styles for font and background of the body of HTML page. After that, I’ve set the width of nav-bar class 100% to make the menu fit in all screen sizes. As I’m taking a mobile-friendly approach, I’ve set the overflow property of nav-container class to hidden in order to eliminate all the possibilities of any unexpected layout break. Finally, I’ve defined the position of nav-container class on the screen.
Now let’s add CSS magic to other classes including nav-menu and nav-list.
Let me explain what’s going on here. First of all, to hide the navigation menu on large screen sizes, I’ve set the display property for nav-menu class to none. To avoid the HTML list bullets in the menu, I’ve set the list-style property to none for unordered list <ul>. Then, I’ve set the position of nav-list class and all list elements.
After that I’ve defined the look and feel of <a> element. Everything is ordinary there except the CSS3 transitions, using which I’ve added smooth transitions on mouse-over for the duration of 0.2 seconds to each <a> element. Later, I’ve added a simple hover effect to each <a> element using CSS3 filters.
Now it’s time to give a unique background color to our each menu item. Let’s do it!
Add Media Queries
To incorporate responsiveness in our created tiled menu, we have to use CSS media queries. Because different devices support different media queries, you need to target a device according to the screen resolution it has. For example, I’ve used the following CSS for the first breakpoint at 480px.
As you can see, instead of keeping the navigation menu invisible, I’ve displayed it with some basic styles. I’ve set the height of nav-list class to zero, which will animate from zero to auto for displaying the navigation when a class of .open is added to nav-list through jQuery. Our tiles will have 100% width and each of them will be floated to the left. Finally, I’ve added a cool mouse hover effect to each menu item by adjusting the padding.
Likewise, I’ve used the following CSS for the second breakpoint at 768px. Notice I’ve given each menu item a width of 50% to form a tilled navigation on 768px viewport.
In the same way, you can add media queries to your own menu for other devices.
That’s all about creating a full width responsive tiled menu having flat design.
To play around with the demo code and better understand how it functions, kindly see my created menu in action here.