1. Creating a Menu Bar

Section written by Diala Dahabi

In this part of the tutorial we're going to be creating the menu bar for your social media profile. This will allow visitors to quickly navigate to different sections of your website.

We'll be creating a menu that will link to:

Your about page
Your photo gallery
Your likes
A contact page

This tutorial consists of two parts.

Part One: HTML

To create a menu bar in HTML we use the <a> , <div>, <ul> and <li> tags previously introduced.

Below is an example

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="nav">
            <ul>
                <li><a href='contact.html'>Contact</a></li>
                <li><a href='gallery.html'>Gallery</a></li>
                <li><a href='likes.html'>Likes</a></li>
                <li><a href='about.html'>About</a></li>
            </ul>
        </div>
    </body>
</html>

The <link> tag is used to link the code to the CSS stylesheet.

The id attribute of an HTML element is used to select a specific element.

As seen above an extra thing is added which is the class attribute and this is used to provide a link to the CSS code which produces a pulsing effect to the button when the mouse hovers over it

Part Two: CSS

To select an element, write a hash character, followed by the id of the element, which is in this case nav.

This is the first part of the css code. It is used to align the menu and make the layout more presentable.

The display: block; displays the element as a block.

The position: relative; positions the element relative to its normal position.

The :after selector inserts the content that is after the selected element.

The clear: both; allows no floating elements on either of the left or right sides.

#nav,
#nav ul,
#nav ul li,
#nav ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    position: relative;
}

#nav:after,
#nav > ul:after {
    display: block;
    clear: both;
}

/*place menu to the right*/
#nav > ul > li {
    float: right;
}

This manipulates the text of the menu:

#nav > ul > li > a {
    padding: 18px 25px 12px 25px;
    font-size: 20px;
    text-decoration: none;
    margin-right: -5px;
}

This code sets the color of the text to white when the mouse hovers over it:

#nav > ul > li.active > a,
#nav > ul > li:hover > a,
#nav > ul > li > a:hover {
    color: #ffffff;
}

This sets the border of each block of the menu bar when the mouse hovers over it:

#nav > ul > li > a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -2;
    width: 100%;
    height: 90%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    content: "";
}

This sets the colour of the background of the block when the mouse hovers over it:

#nav > ul > li.active > a:after,
#nav > ul > li:hover > a:after,
#nav > ul > li > a:hover:after {
    background: #FF9966;
}

This is just an example of what a menu can look like. The code can be modified to change the appearance of the menu.

The following code is used to produce a pulsing effect which provides animation to the menu making the boxes pulse when the mouse hovers over them.

The @-webkit-keyframes is used to specify the animation code to control the appearance of the animation, for example, transform allows you to change the animation by scaling it thus, increasing and decreasing its size to make it appear as a pulse.

@-webkit-keyframes pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

This code uses translate to move the element from its current position and align it. Also, the box-shadow is used to attach one or more shadows to the element block.

The backface-visibility: hidden hides the backside of a rotated element.

The -moz-osx-font-smoothing property gives the element a grayscale effect to make it look more realistic.

.pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translate(0);
    transform: translate(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}

The animation-name names the animation for the @keyframes.

The animation-duration specifies how long does it take to complete one cycle of the animation and in this case its 2 seconds.

The animation-timing-function: linear plays the animation with the same speed from the start to the end of the cycle.

The animation-iteration-count: infinte means that the animation will be repeated infinitely.

.pulse:hover, .pulse:focus, .pulse:active {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

The above code can be modified to provide other effects.

This is how the menu should appear using the previous code:

This is how the menu will appear when the mouse hovers over one of the menu options:

Live demo

Click here to view a live demo:

Experiment!

Don't just copy the code and paste it! Modify the variables and play with the code and see what happens. Also look into other CSS properties that will allow you to make your social media profile more unique.

To be able to earn exceptional marks, you should try to make your website look as orignal as possible. A great reference source is the Mozilla Developer Network Wiki: https://developer.mozilla.org/en-US/docs/Web/CSS

Next lesson: Profile and Cover Photo

Next lesson we'll look at how to include your profile and cover photo.