Membuat menu pada Header web

Dari hasil referensi saya akan mencoba menampilkan code untuk membuat menu pada header blog ataupun web.Dari code ini di sertai juga dengan code CSS yang nanti akan mengatur dari pada tampilan dari Document HTML.

<html>
<head>
<title>membuat menu</title>
<style type="text/css">

.circlemenu{
width: 100%;
overflow:hidden;
}

.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.circlemenu li{
display: inline;
margin: 0;
}

.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; 
width:100px;
height:100px;
border-radius: 400px; 
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.circlemenu a span{
position:relative;
top:40%;
}

.circlemenu li a:visited{
color: white;
}

.circlemenu a:hover{
background: #a71b15;
}

</style>
</head>
<body>

<div class="circlemenu">
<ul>
<li><a href="masukan link tujuan"><span>Home</span></a></li>
<li><a href="masukan link tujuan"><span>About</span></a></li>
<li><a href="masukan link tujuan"><span>Bisnis</span></a></li>
<li><a href="masukan link tujuan"><span>Forums</span></a></li>
<li><a href="masukan link tujuan"><span>Download</span></a></li>
</ul>
</div>
</bady>
</html>


Dari Code HTML di atas anda bisa merubah sendiri menu yang nantinya akan di tampilkan dengan menentukan link tujuan dari masing-masing menu. Untuk melihat hasilnya lihat di bawah ini:

Comments