HTML5 effects: How to create a simple menu bar

Written by Richard Heyes, on 21st September 2017

An example of how to build a menu bar similar to what was previously used on 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-forward menu bar example - much like the one above from the RGraph website. First let's 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 colors and produces the slight curve 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 spill over 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 color will be inverted when hovered over.

    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 hovered over a button.

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

And finally this bit changes the colors 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.