Creating a Fixed Menu to the Left or Right of Browser

by Ran Enoch  –  follow on Twitter here

There are a number of reasons why you may need to fix your menu to a users browser and this tutorial will help you understand how to do it with CSS.

Most menus are fixed to the top or the bottom of a browser, but this tutorial is going to address fixing a menu to the right or left of a user screen. You will still have full control over the top, bottom or middle of the browser, but it will be mainly focused on one side.

Join us in our newest publication:

It’s worth noting that if you are concerned with being mobile responsive, that you do not use fixed positioning, unless you change it with an @media inquiry.

So we begin the tutorial with a basic layout:

<head>
<style type="text/css">
body{
    margin:0px;
    background:#000;
}
.header {
    height:30px;
    background:#DDDDDD;
    width:960px;
    margin:0px auto;
}
.content {
    width:960px;
    background: #F0F0F0;
    border: 1px solid #CCC;
    margin: 20px auto;
}
</style>
</head>
<body>
<div class="menu"><ul><li>Menu Item #1</li><li>Menu Item #2</li><li>Menu Item #3</li></ul> </div>
    <div></div>

    <div></div>

Of course the menu items will actually be links, but for our purposes we are just focused on the positioning of the menu.

So because the menu will be fixed to the browser, it doesn’t really matter where the menu code is situated. The only consideration is if you are also integrating a mobile strategy. If you are, then placement of the menu code should revert back to where it is in the layout. Or, you could change the fixed position to the top or bottom of the screen, which may help in the mobile space.

The CSS property to focus on here is position: fixed;, but there are other additional properties to consider including orientation:

top: 0;
bottom: 0;
left: 0;
right: 0;

So let’s put it all together and say for example, you want to fix your menu to the top right of the browser. Then it would look something like:


.menu {
position: fixed;
top: 0;
right: 0;

That orients the menu fixed to the top right of the screen. Likewise, you can make adjustments to it by adding pixels to the placement too, like top: 10px;.

Once you have the menu fixed to a portion of the screen, then you can play with vertical vs. horizontal menus, background colors, and more.

We hope you have enjoyed the tutorial and encourage you to send in requests for future tutorial topics. And before you hurry off, check out our partner site to start learning the beginnings of jQuery.

Share and Enjoy !

0Shares
0 0