Making a Full Width Responsive Tiled Menu with CSS3 & jQuery

2nd, Jul 2015

Full width responsive tiled menu is one of the most creative ways to display the navigation of your site. Not only it creates a very full-bodied effect for visitors but also gives them a taste of trendy flat design. In this tutorial, I’m going to create a full width tiled menu and make it fully responsive using CSS3 Media Queries. At the end, I’ll also use some quick JavaScript to show or hide the tiled menu on smaller screen devices. Let’s get started!

Include Files

This is the first step toward creating a tiled menu. All you have to do is to put all necessary files between the and 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.

HTML

12345

<head>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">
  <script src="//code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
</head>

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 the of your HTML document, the next thing you need to do is developing the menu. Check out the markup for the menu below:

HTML

1234567891011121314151617

<body>
<nav class="nav-bar">
    <div class="nav-container"> 
        <a id="nav-menu" class="nav-menu">&#9776; Menu</a>
        <ul class="nav-list " id="nav">
            <li> <a href="#" id="tile1"><i class="icon ion-ios7-home-outline"></i> Home</a></li>
            <li> <a href="#" id="tile2"><i class="icon ion-ios7-person-outline"></i> About</a></li>
            <li> <a href="#" id="tile3"><i class="icon ion-ios7-briefcase-outline"></i> Portfolio</a></li>
            <li> <a href="#" id="tile4"><i class="ion-ios7-monitor-outline"></i> Services</a></li>
            <li> <a href="#" id="tile5"><i class="ion-ios7-people-outline"></i> Clients</a></li>
            <li> <a href="#" id="tile6"><i class="ion-bag"></i> Order</a></li>
            <li> <a href="#" id="tile7"><i class="ion-ios7-paper-outline"></i> Blog</a></li>
            <li> <a href="#" id="tile8"><i class="ion-ios7-email-outline"></i> Contact</a></li>
        </ul>
    </div>
</nav>
</body>

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.

Style Elements

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.

CSS

1234567891011

body{
    font-family: 'Open Sans Condensed', sans-serif;
    background: white;
}
.nav-bar {
    width: 100%;
}
.nav-container {
    overflow: hidden;
    margin: 2.95% auto;
}

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.

CSS

1234567891011121314151617181920212223242526272829303132

.nav-menu {
  display: none;
}
nav.nav-bar ul {
  list-style: none;
}
.nav-list {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.nav-list li {
  float: left;
  width:12.5%;
}
.nav-list li a {
  display: block;
  color: #f9f9f9;
  text-shadow: 1px 1px 3px rgba(150, 150, 150, 1);
  padding: 30px 30px;
  font-size: 1.5em;
  text-align: center;
  text-decoration: none;
  -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}
.nav-list li a:hover {
  -webkit-filter: brightness(1.3);
  padding-top: 80px ;
}

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!

CSS

123456789101112131415161718192021222324

#tile1 {
  background:#00ced7
}
#tile2 {
  background:#00bbc3
}
#tile3 {
  background:#00a8af
}
#tile4 {
  background:#00959c
}
#tile5 {
  background:#00889c
}
#tile6 {
  background:#007b9c
}
#tile7 {
  background:#006e9c
}
#tile8 {
  background:#005c83
}

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.

CSS

1234567891011121314151617181920212223242526272829

@media screen and (max-width: 480px) {
.nav-container, .container {
    background:#4f6f8f
}
.nav-menu{
    color: #fff;
    float: left;
    display: block;
    padding: 10px 10px;
    cursor: pointer;
}
.nav-list{
    float: left; 
    width: 100%;
    height: 0;
}
.nav-open {
    height:auto
}
.nav-list li {
    width:100%
}
.nav-list li a {
    text-align: left;
}
.nav-list li a:hover {
    padding-left: 36%;
    padding-top: 30px;
}

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.

CSS

12345678910111213

@media screen and (min-width: 481px) and (max-width: 768px) {
  .nav-container,.container {
    margin: 8% auto;
  }
  .nav-list li {
    float: left;
    width: 50%;
  }
  .nav-list li a:hover{
    padding-right: 40%;
    padding-top: 30px ;
  }
}

In the same way, you can add media queries to your own menu for other devices.

Implement JavaScript

After making our tiled menu responsive, now it’s time to implement some basic JavaScript to make the navigation toggle function on smaller screens. Below is the JavaScript that I’ve used in my demo code:

JQUERY

12345

$(document).ready(function(){
	$('#nav-menu').click(function(){
		$('ul.nav-list').addClass('open').slideToggle('200');
	});
});

The above JavaScript code will select the menu list and add the open class to it. When a user will click the menu list icon, the open class will give it a height of auto and slide down the menu by the duration of 200 milliseconds. 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.

21 Comments

Cristóvão
15th Mar 2023 at 2:46 pm
thanks for all
Cristóvão
15th Mar 2023 at 2:46 pm
Very good
Julio Gomes Pena
21st Feb 2019 at 6:45 pm
Great menu, to fix issues:1 - Do the changes that Sam Richeson mentioned on the above comments2 - Change your javascript code to this:
123456789101112131415
$(document).ready(function(){ $('#nav-menu').click(function(){ if( ( $('ul.nav-list').hasClass('open') ) ) { $('ul.nav-list').removeClass('open'); }else{ $('ul.nav-list').addClass('open'); } }); });
It will remove the dropdown slidding effect on 480px media query when clicked on 'Menu' but will not dissapear anymore when resized :D
Naresh
15th Jan 2018 at 11:53 am
Sir, your full screen menu bar is awesome but when u resize it in a responsive way and open it and closing it...after closing it if we again make our window on full screen then menubar is not visible plzz solve it
Radhi
25th May 2017 at 6:18 pm
thank you ...... very use full navbar and attractive output
Alistair
13th Dec 2016 at 1:58 am
I couldn't remember what the file names should be index.htm style.css jscript.jsThanks very much. Looks great on my website http://www.BlueMotionGeyser.co.za
Mb
22nd Nov 2016 at 11:21 pm
menu still disappears on expanding from mobile
Neha
17th Jun 2016 at 12:43 pm
same problem on Chrome … shrink, expand window and menu gone … doesn’t refresh/reload~please reply
Jasmine
17th Jun 2016 at 12:40 pm
same problem on Chrome … shrink, expand window and menu is gone … doesn’t refresh/reload~ please reply
Creative Solutions
14th Jan 2016 at 2:23 pm
Looks great