Friday, March 1, 2019

Creating a Navigation Menu

Creating a Navigation Menu



For this post I will invite you make a tutorial navigation menu under the header.

Create an HTML file for Menu Navigation 

Let us get on with it, type the HTML code to create a navigation menu below:

<html>
<head>
<title>Make a Navigation Menu</title>
<link href="style.css" rel="stylesheet" type="text/css"
media="all" />

</head>
<body>
<div id="container">
<div id="menu">
<a href="#">HOME</a>
<a href="#">PRODUK</a>
<a href="#">ARTIKEL</a>
<a href="#">MEMBER</a>
<a href="#">TESTIMONIAL</a>
<a href="#">KONTAK</a>
<a href="#">ABOUT US</a>
</div>
</div>
</body>
</html>

A description of the above HTML code:
  • The code I take only part of the course navigation menu layout website HTML file that can later be joined again so that it can form a complete website.
  • Here I simply add navigation start Home up to About Us, you can change your own liking, and I've given a link which only a "#".
Create a new folder with the name of Chapter II Creating a Navigation Menu and save the HTML file above with the name of the menu-navigasi.html


Creating a CSS file from the Menu Navigation

Next, you create a CSS file again the following:

#container{
width:1000px;
margin:0 auto;
font-family: verdana;
}
#menu{
background-color:#993300;
width:1000px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
a:link{
background-color:#FFFF00;
color:#000099;
text-decoration:none;
font-size:14px;
}
a:hover{
background-color:#0000CC;
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
font-size:16px;
}
a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}

Explanation of the above CSS rule as follows:
  • #container {...}as usually I make a page with a width of 1000 pixels with a margin of 0 and auto to place it in the middle.
  • #menu {...}to create the menu background color # 993 300, width 1000 px, placement of text in the middle by this time I omit the height and set to give the value of padding above and below each 10 px.
  • A: link {...}This is a class which presudo to regulate the existence of the content or images that have been given link. Text menu has been given the link and the setting here with a setting that is the background color of the text that is yellow (# FFFF00) and text by writing dark blue color (# 000 099) and to eliminate under line when a text given link then I leave a text decoration with the value none with font size 14 px.
  • a: hover {...}is when the existence of the text when the mouse is above the text. Background color on paper will change color to blue (# 0000CC) with the text color to white (# FFFFFF), this time I gave the letters become thick and given under the line and change font size to 16 px.
  • a: active {...}where the existence of the text when the mouse is clicked on and I gave a background color was changed to white (# FFFFFF), later writings black (# 000000) and thickness I return again as the origin.
After that save this file with the name style.css inside the folder the same as the HTML file , and then you run. 

The following screenshot:
Creating a Navigation Menu



You seem more like with the use of CSS, pretty easy is not it ...? 

Please make your own creations with CSS to change the value of this rule and you can also replace the words with pictures.


CSS Learning material Next is:  Edit Content.

If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in fajaryusuf.com . :)


Reviewer: FajarYusuf.Com
ItemReviewed: Creating a Navigation Menu

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

TENTANG SITUS

SITUS INI ADALAH SITUS INFO GAME TERBARU DAN JUGA SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.