HTML5 effects: How to create a simple menubar

Share RGraph:  

An example of how to build a menubar like the one above adorning the RGraph website. There's really not a great deal that's involved!

Sometimes the simple things are not always the most straight forward things to everybody. Particularly to those who don't give a hoot about the web development process (me sometimes) - the results are the most important thing. So here's a straight foward menubar example - much like the one above from the RGraph website. First lets talk through the CSS that's involved:

    div#menubar {
        background-image: linear-gradient(#eee, #fff, #ddd);
        padding: 15px;
        font-family: sans-serif;
        font-weight: bold;
        font-style: italic;
        text-align: center;
        box-shadow: 2px 2px 2px #ccc;
        position: relative;
        left: -10px;
        width: calc(100% + 20px);
        overflow: hidden;

The background-image specifies a linear gradient that involves three colours and produces the slight curved effect. The padding can be adjusted to suit and results in a thinner or thicker bar. The various font properties simply control the font. Tweak these as required. The box-shadow gives the entire bar a small shadow. Then setting the position to relative allows us to adjust the position slightly and then the left and width properties do the actual adjusting. The CSS calc() function allows us to mix units and add them together - in this case adding the margin (which totals 20px) to the entirety of the width. And finally any spillover from the inner SPAN tags (when they turn black) is hidden.

    div#menubar a {
        text-decoration: none;
        color: black;
        font-size: 16pt;

This bit of CSS simply controls the appearance of the individual "buttons" - which are actually A tags with nested SPAN tags. Link underlining is removed and the size and color are set. Remember that the colour will be inverted when mouseover'ed.

    div#menubar span {
        padding: 20px;

This gives padding to the SPAN tag that sits inside the A tag. Otherwise you'd get a small black rectangle in the middle of the bar when you havered over a button.

    div#menubar a span:hover {
        background-color: black;
        color: white;

And finally this bit changes the colours when a "button" is hovered over.

An example of putting it all together

So when you put it all together you get an example like the one on this page.