underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Responsive Web Design: Equally Spaced Horizontal Menu

A menu is one of the first and most basic things your site needs. Styling a menu to fit a static web page that is say, 960px wide is one thing, but how do you create a horizontal menu that stretches across the width of the site in a responsive design?

We’ve already showed you how to create equally spaced divs in a responsive web design, so it might be a good idea to familiarise yourself with that first.

equally spaced horizontal menu with css

The nice thing is that you’re not relying on Javascript/jQuery for this to work – it’s just simple, smart usage of CSS and HTML – the basic building blocks of a website.

First of all, we need a basic, familiar menu structure like this:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="menusur">
<div id="menu">
<ul>
    <li><a class="active" href="#">home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">pricing</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact</a></li>
</ul>
</div>
</div>
<!-- menusur -->

This menu is held together with some simple CSS code like this:

Select Code
1
2
3
4
5
6
#menusur { height: 38px; background: #ccc;}
#menu ul { padding: 7px 7px 0 7px; margin: 0; font-size: 20px;}
#menu li { display: inline; list-style-type: none;}
#menu a { color:#fff; text-decoration:none; font-size: 20px;}
#menu a:hover { color:#fa7e04; text-decoration: none; }
#menu .active { color:#fa7e04; text-decoration:none; }

This will give us a horizontal (display: inline;) menu – but all aligned to the left of the page. A few simple changes will allow the menu to stretch across the entire width of the web page using the same techniques as used to equally space out divs.

equally spaced menu before

First of all, we must add the key div classes and span to the HTML:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="menusur">
<div id="menu">
<ul>
    <li class="equal"><a class="active" href="#">home</a></li>
    <li class="equal"><a href="#">about us</a></li>
    <li class="equal"><a href="#">services</a></li>
    <li class="equal"><a href="#">portfolio</a></li>
    <li class="equal"><a href="#">pricing</a></li>
    <li class="equal"><a href="#">blog</a></li>
    <li class="equal"><a href="#">contact</a></li>
    <li class="stretch"></li>
</ul>
</div>
</div>
<!-- menusur -->

As you can see, the class equal is added to each list item and an additional li item is added, containing the stretch class at the bottom (this is important). You will notice that this is a slightly different way of using the stretch class when compared to the code used to equally space divs across the width of a web page.

Also in this example compared to code for the way we space divs (linked above), it’s worth noting that the class/id names change slightly – here it makes more sense to not call the containing div equal but to use the more descriptive word, menu – and instead, to use equal to describe what is happening to the list items.

So, the CSS now needs to look like this:

Select Code
1
2
3
4
5
6
7
8
9
.equal { padding: 0 8px 0 8px; display: inline-block; vertical-align: top; }
.stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0;}

#menusur { height: 38px; background: #000;}
#menu ul { padding: 7px 7px 0 7px; margin: 0; font-size: 20px;}
#menu {position: relative; margin: 0 auto; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; clear: both; }
#menu a { display:inline; color:#fff; text-decoration:none; font-size: 20px;}
#menu a:hover { display:inline; color:#fa7e04; text-decoration: none; }
#menu .active { display:inline; color:#fa7e04; text-decoration:none; }

In this example, we’ve now lost the menu li code and replaced with all-encompassing menu code that contains the crucial elements. We also now have equal and stretch classes.

equally spaced menu after

You should now see that your menu stretches across the full width of your website page with just this simple use of HTML and CSS and with no need to pull any extra Javascript or jQuery code. Now your menu will automatically span the width of your website whatever device that the user is viewing it on – no more need for any maths to calculate the spaces between each menu item – which of course gets more complicated in responsive design if you try to use percentages instead of pixels..

It’s a good idea to limit the minimum width (min-width:) to something like 800px or 960px – or whatever suits your site – to add some control to your menu code, but apart from that, this is all there is to it. Happy menu coding!

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , ,


One Response to “Responsive Web Design: Equally Spaced Horizontal Menu”

Leave a Reply

Please complete the sum so we know you\'re a human... *