Making table arranged horizontal menu responsive

Menu is the one of the most important functional parts of the website. We should provide a simple way for users with mobile device to navigate between pages. Let's imagine that your horizontal menu doesn't fit into the mobile device's width. Making this kind of menu responsive will be a very common task. The most common method is provision of switching option with a toggle button. User clicks on a toggler (toggle button) which shows menu items.

In this particular case, we have a table arranged menu. It means that the menu container is rendered as a table (display: table;), i.e. unordered listing (UL) container as a table row (display: table) and listing items (LI) as table cells (display: table-cell;).

We've added a toggler (element which will act as trigger to open a responsive menu) directly into the template.

<div class="toggler" style="display: none;">☰ Menu</div>

If you don't have access to a template, you can do it via separate JS command on document ready event.

$('menu_container_selector').prepend('<div class="toggler" style="display: none;">☰ Menu</div>');

We've prepared 3 JS functions to make the menu responsive.

Prepare toggler

First, with toggler function we add a click event. After, we change the menu elements (menu container, listing container and listing item) to adopt CSS types to which we assign the "block" value. All this proccess is dependant on the menu's functioning mode which is called "state". The "state" is a jQquery condition of toggler element. It can take "open" or "closed" values. If the "state" is "closed" - click event changes displays of all menu elements to block. If the state is "open" it reverts display values.

function prepareToggler(){
		$('.toggler').click(function() {
			 if( $(this).data('state') == 'closed' ){
				$('menu_container').css('display', 'block'); 
				$('listing_container').css('display', 'block'); 
				$('listing_item').css('display', 'block'); 
				$(this).data('state', 'open');
			 }else{
				 $('menu_container').css('display', 'none'); 
				 $('listing_container').css('display', 'table-row'); 
				 $('listing_item').css('display', 'table-cell'); 
				$(this).data('state', 'closed');
			 }
		});
	}

 

Is mobile?

This function checks the media query and returns a boolean value, which indicates the device type. If the returned value is TRUE, next function will make the menu responsive.

function isMobile(){
		return window.matchMedia('(max-width: 767px)').matches;
	}

In this case we've put "max-width: 767px" as a media query condition. It means that devices with width lower than 768 pixels will be treated as a mobile.

Make responsive

This function does the final job to make the menu responsive depending on "isMobile" function's returned value.

function makeReponsive(){
		if(isMobile()){
			$('.toggler').css('display', 'block');
			$('menu_container').css('display', 'none');
			$('body').data('rs_processed', true);
		}else{
			$('.toggler').css('display', 'none');
			$('menu_container').css('display', 'table');
		}
	}

If "is Mobile" function returns TRUE, it shows toggler element, hides menu container element and adds boolean data "rs_processed" to the document's body element, which indicates the menu is responsive already.

If "is Mobile" function returns FALSE, it reverts toggler and menu container displays. We consider this case as there are devices which width in horizontal orientation is larger than 768 pixels and orientation change from vertical to horizontal will cause problems.

Calling functions on document ready event

$( document ).ready(function() {
		prepareToggler();
		makeReponsive();

		$( window ).resize(function() {
			makeReponsive();
		});	 

	 	window.addEventListener("orientationchange", function() {
				if(!$('body').data('rs_processed'))
			 		makeReponsive();
			}, false);
	});

We've considered 2 events, which can rise runtime (window resize and orientation change).

On resizing event we just call "makeReponsive" function to ensure that menu's current state is corresponding to window's width.

On orientation change event we call "makeReponsive" function only once if it's not proccessed (checking via "rs_processed" data from body element).

Notice: This solution needs jQuery library.

Type: 

Make my existing website responsive - request form

 
1 Start 2 Complete

If you don't have web development skills, just fill in the form below. Our specialists will make your website responsive.