Responsive CSS Menu

by cdwise 8. January 2017 20:05

Given the interest in responsive design I've been seeing I thought I'd show you how to create a simple horizontal menu that turns into a stacked vertical menu on cellphones and other small format devices.

I'm going to begin with the CSS 3 Horizontal menu tutorial.

Then create the @media styles so that when viewed on a cellphone or other device.

Move to External Stylesheet

To accomplish this the first thing I would do is to move the existing styles to an external stylesheet.

new CSSTo do that right click on the local site folder you are working in and create a new empy css file. Typically I would name by stylesheet the same as the website. In this case I've named it "responsive.css".

drag stylesheet to the pageNow from the Folder list grab the newly created stylesheet with your mouse and drag it over the design portion of your open page in the document window and drop it.

This will create the link <link href="responsive.css" rel="stylesheet" type="text/css" /> to the external styelsheet for you.

style moved to external stylesheet select and drag stylesNow when you look in the Manage Styles panel you will see three sections. The first "Current Page" section refers to all the styles that we created for page layout and the existing menu. The second "Current Page" section applies to the conditional IE 8 and lower styles. Finally, you will see an empty "responsive.css" section. If you select all the styles in the first Current Page you can drag them down to the responsive.css page. This is the fastest and easiest way to move your styles from the page to an external stylesheet.

Alternative Styles

This is the point where you have to make a decision on what changes you want to make to your site when it is viewed on a mobile device. There are several ways you can send a separate set of styles to different devices or screen sizes.

  • @media screen and (max-width: 480px) in the head section of your page works well when you only need to over ride a few styles but it is cumbersome to maintain.
  • Using a media query to send a secondary stylesheet which is the method we'll be using here.
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
  • Finally, using javascript or jQuery which is more difficult but maybe necessary if you are using dropdowns, flyouts or other more complex menus.

Since Expression Web design view is limited in what it can do, even the styles used in the menu do not render correctly in design view.

 

does not understand or render @media queries I find it best to start with regular styles in the head section below the conditional comment section for IE 8 and below. That way I can set a temporary width of 480px for the site container to see the affect in design view and when previewing locally. Now you will have an approixmate view of what the page will look like as you create the styles and a better view when you preview in browser. With a new size on the container you can see that we need to make changes.

Just by adding:

#nav a {
display: block;
}

You can see that the design view display already looks better while it is almost acceptable in the browser:

square links in design view

as shown in a browser

What makes this unacceptible in my view is unequal margins with the left side being away from the side of the viewport. This is another decision point. One option is to keep them as rounded buttons but to center them in the browser by adding:

 

#nav ul {
margin: 0;
padding: 0;
}

 

Which gives us:  

Alternatively you can leave padding on the #nav ul at 0 and remove the rounded borders by adding "border-radius: 0;" to the #nav a in our new head section style block:

 

 

My personal preference is for the edge to edge display but yours may vary.Whichever you choose is is now time move these styles:

either to an @media head section:

<style type="text/css">
@media screen and (max-device-width: 480px) {
#container {
width: 480px;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav a {
display: block;
border-radius: 0;}
}
</style>

Or you can move them the bottom of your current stylesheet which is what I have done. You should also be able to an external stylesheet but when I do so it seems to break in IE 10 and Windows Phone. If you want to try it the syntax is:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

One Last Change

Before you start testing on your mobile device let's make one more change and that is to remove the 480px restriction on the width in your mobile styles and change it to either 100% or 96% if you want a bit of the purple sides to show. That way it will resize to fit the width of your mobile device screen.

If you want you can also set break points for other common device sizes like 800px for some tablets in portrait orientation. Have fun playing playing with your site.

Try the finished page with your browser or mobile device.

One last note, Internet Explorer below IE 9 doesn't support media queries so if you are concerned about resizing your layout for various browsers sizes in older versions of IE you can use http://code.google.com/p/css3-mediaqueries-js/ though frankly I don't see the need.

Tags:

Pingbacks and trackbacks (1)+

Comments are closed


Outstanding Hosting