Creating a website in mints for beginners Part 3 ``The navigation``

Creating a webstie from scratch part 3 `` The Navigation ``

Creating a website in mints for beginners Part 3 `` The Navigation ``

Hello folks and welcome back to "Creating a website in mints for beginners Part 3"
In this video we are going to learn how to create navigation (menu) for our site and style it in css
So let's start doing that right away

You can either watch this video or you can just go through reading the article below and





Okay so now we need to create a navigation for our site

Let's start by opening the navigation tag "nav" and adding some un-ordered list items

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>

Here we have created our basic navigation Markup and now we need to style it in our css file
let's open the "style.css" file and add some styles also if you notice in the markup above we included two links only
the reason for that is because we are only going to create two pages in this course an index page and a contact page

So Here How we are going to style our menu

Step 1:
Set the background color of ul tag by selecting it via "nav ul" since inside of th nav tag and give it some padding

nav ul {
    background :rgba(126,44,44,1);
    padding:2px;
}

Okay now go check out how it looks.

Step 2:
Setting the list item (<li>) and anhcor tag (<a>) color and display styles

nav ul li, nav ul li a{
    color:#fff;
    display: inline-block;
}

Go check what effects it added before i tell you.

Okay so here we are selecting two tag elements which are "li" and "a" by separating them with a comma .
Here we are just giving them a white color and setting their display to inline-block so they align on the same line. by default "li" list items make a new line for each list item.

if i sound a little confusing go check it out your self.

Step 3:
Add let's now style our main link so they look better

nav ul li a:link , nav ul li a:visited {
    padding:20px;  /* Giving links a padding of 20px */
    text-decoration: none; /* Setting to have no decoration (underline etc) */
    font-family: georgia;    /* specifying which font family we wan't for our menu */
    text-transform: capitalize; /* capitalizing each word in menu (making the first letter big)*/
    transition: 0.8s; /* Setting basic transition for the menu */
    -o-transition: 0.8s; /* opera specific transition */
    -webkit-transition: 0.8s;    /* Chrome specific transition */
    -ms-transition: 0.8s; /* IE specific transition */
    -moz-transition: 0.8s; /* Mozila specific transition */
}

Okay so the example above is pretty self explanatory as it has been commented on each line telling you what we are doing
but you may be a bit confuse about the transition property
well, we are just adding a transition of .8 seconds which gives our navigation link color a nice fade effect

Step 4:
Lastly for this lesson let's add a hover effect to the navigation which takes place when someone hovers their mouse on one of the navigation links

nav ul li a:hover, nav ul li a:active {
    background:rgba(169,61,61,1);

}

Okay i assume you understood that well ... (just adding a background color when someone hovers over a link).

Now here is the final version of our navigation menu along with the header from previous lesson

So that's it for this lesson hope you learned something good and if you have any queries or questions don't hesitate to contact to via below options

Don't forget to share this article if you liked and learned from it

Thank you