CSS MENUS

How on earth do you do that with menus? This site uses the plain old ourlocality template. Create bespoke menus for each, as what is shown below only governs the top level, we’ll work on submenus at some point. Add basic colouring using the simple OL options. We’ve removed the header logo for now, but it may come back again.

The top menu first:

First change the height and add a little bit of curvature (radius may not work in older browsers)

#access {
height:46px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

Next, plump up the space between the menu elements

#access a {
padding:0 20px;
}

Now make sure that the first element of the series is background-free

#access .menu-header li:first-child,div.menu li:first-child {
float:left;
position:relative;
background:none;
}

Now make the other elements have a little separator

#access .menu-header li,div.menu li {
float:left;
position:relative;
background:url(‘http://ourlocality.org/themes/files/2012/03/orange-separator.png’) no-repeat;
margin-top:5px;
}

For the bottom menu:

Create a menu and call it ‘bottom’ and name the css elements #menu-bottom. Colour it white and ensure it floats left and define the width.

#menu-bottom {
background:#FFF;
display:block;
float:left;
width:940px;
margin:0 auto;
}

Chose a list separator using the background url and turn off the list-style.

#menu-bottom li {
float:left;
position:relative;
list-style:none;
border:none;
background:url(‘http://ourlocality.org/themes/files/2012/03/gt.png’) no-repeat;
}

Muck around with the style of the links until you’re happy

#menu-bottom a {
font-family:Arial;
color:#AFC3CE;
display:block;
line-height:36px;
text-decoration:none;
font-size:2.8em;
margin-top:-5px;
text-transform:uppercase;
padding:0 40px 10px;
}

Make sure it all sits nicely in the footer / colophon

#colophon {
border-top:2px dotted #FBB040;
border-bottom:2px dotted #FBB040;
}

Turn off the pesky site bits and bobs

#site-info {
display:none;
}

#site-generator {
display:none;
}

And finally, the side menu:

Create a new menu and call it ‘hello’, assign it to the sidebar widget.

#menu-hello {
background:#FBB040;
display:block;
float:left;
width:200px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 auto 0 -10px;
}

#menu-hello li {
float:none;
position:relative;
list-style:none;
border:none;
background:url(‘http://ourlocality.org/themes/files/2012/03/orange-separator.png’) no-repeat;
margin-top:5px;
margin-left:5px;
text-transform:uppercase;
}

#menu-hello a {
font-family:Arial;
color:#FFF;
display:block;
line-height:38px;
text-decoration:none;
padding:0 10px;
}

#main .widget-area ul ul {
margin-left:0;
}

You can probably get rid of some of the instructions above, as they duplicate existing css.

In practice they create more work for your browser, so it is an idea to test with the minimum number of css changes you can get away with (because less is more), unless you’re in a hurry or like me – a bit lazy.