HTML Project

Chapter: 7

Create Menu for our home page

Menu is used to navigate the web

Start from index.html file

Step-1
Just after myheader division it add new division for menu in index.html
with "menu" id
now add "ul" and "li" in this division
or copy and paste the following code in it
<div id="menu"><!-- Menu Division Start here -->
	<ul>
	  <li><a href="#">Home</a></li>
	  <li><a href="#">Clients</a></li>
	  <li><a href="#">About</a></li>
	  <li><a href="#">Contact</a></li>
	</ul>
</div><!-- Menu Division over here -->
Note: Temporary We are using "#" Later we will insert links here

Open style.css file

Step-2
add code for Menu division in style.css
or copy and paste the following code in it
#menu{
width: 900px;
height:60px;
line-height: 60px;
background-color: #ff9914;
position: relative;
margin-top:-25px;
font-size:25px;
}

It's time to check the result

Now open index.html file in browser
Oops.. Something Wrong again!



The links of the menu are not in the correct place
let's make it correct

Open style.css file

Step-3
add following code for Menu ul and menu li in style.css
#menu a {
display: inline-block;
text-decoration: none;
color: #ffffff;
font-family:Impact, fantasy;
margin: 0 0 -3 0;
position: relative;
padding-bottom: 3px;
}

#menu ul li {
padding:15px; 	
text-align: center;
display: inline;
}

Let's check again

open index.html file in browser




Looks better
Let's make it more enjoyable
Step-4
create a class for "li - home".
and its name would be "active"
or replace this line "<li><a href="#">Home</a></li>" with following
<li class="active"><a href="#">Home</a></li>

Open style.css file again

Step-5
add some code for "active" class and others
or copy and paste the following code in it
#menu .active a {
color:#81171b;
}

#menu a:after {
content: '';
display: block;
position: absolute;
bottom: 25%;
left: 50%;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease, left .5s ease;
}
#menu a:hover:after {
bottom: 25%;
width: 100%;
left: 0;
background: #540804;
}

#menu .active a:after {
bottom: 25%;
width: 100%;
left: 0;
background: #540804;
}

Let's check Result again

open index.html file in browser
and hover the cursor on about
it's a beautiful animated Under line



Looks better
Let's make footer for our web

oper index.html file again

Step-6
Just after col_one_third_last division for image is over add new division for footer in index.html
with "footer" class
now add tow divisions in this division
first one is with "col_two_third" class and second one is with "col_one_third_last" class and some text in it
or copy and paste the following code in it
<div class="footer"><!-- footer Start here -->
<div class="col_two_third">
	<p>if you have any queries regarding this tutorial please mail me :- freeeducation.me@gmail.com or <a href="http://www.freeeducation.me/qa.php">click here</a></p>
	</div>
<div class="col_one_third_last">
	<p>mailme@myweb.com<br>contact me: 123-456 789</p> </div>
</div><!-- footer over here -->
Note: You can change details, contact info, color etc.

Open style.css file

Step-7
add some code for footer
or copy and paste the following code in it
.footer{
	padding:10px;
	background:#0c090d;
	height:60px;
	width:900px;
	clear:both;
	color:#fcbfb7;
	border-radius:5px;
}

We done it

Now it's complete
This way you can create forward pages.
And where we used # in the menu, you can change it with page references.
You can change colors, fonts, images, etc. as per your requirement
Please if you have any queries regarding this tutorial please mail me :- freeeducation.me@gmail.com