Membuat Menu Keren Untuk Website / Blog Dengan HTML Dan CSS
- Buka Code Editor
- Buat file index.html
- copykan Code dibawah ini , dan pastekan kedalam code editor Anda
- Lihat DiBrowser
- Enjoy...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BroHonHon</title>
<style>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav{
width: 100%;
background-color: rgb(2, 47, 71);
height: 60px;
}
nav ul{
width: 90%;
margin: auto;
background-color: rgb(2, 47, 71);
}
nav ul .menu-dalam{
float: right;
}
nav ul .brand{
color: white;
font-weight: bolder;
text-decoration: underline;
display: inline;
text-align: center;
font-size: 25px;
line-height: 60px;
}
nav ul li{
display: inline-block;
width: 110px;
height: 60px;
text-align: center;
line-height: 60px;
margin-left: -5px;
}
nav ul li:hover a{
background-color: rgb(7, 63, 167);
display: block;
border-right: 1px solid #dedede;
border-left: 1px solid #dedede;;
}
nav ul .active {
background-color: rgb(7, 63, 167);
width: 110px;
height: 60px;
display: inline-block;
color: #eaeaea;
}
nav ul li a{
color: white;
font-weight: bold;
text-decoration: none;
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
nav{
height: 60px;
}
nav ul{
overflow: hidden;
width: 90%;
}
nav ul .brand{
margin-left: 30px;
}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
nav{
height: 180px;
}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
nav{
height: 250px;
}
}
@media (min-width: 160px) and (max-width: 320px) {
nav{
height: 280px;
}
}
</style>
</head>
<body>
<nav>
<ul>
<span class="brand">BROHONHON</span>
<div class="menu-dalam">
<li><a href="" class="active">Home</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Profile</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</div>
</ul>
</nav>
</body>
</html>
Terimakasih Nih link nya bisa di Download aja langsung lewat Zippyshare, buatan saya jauh dari kata sempurna ,karna yang sempurna hanya allah subhanahu wa ta'ala.
Wassalamu'alaikum warahmatullahi wabarakatuh
Comments
Post a Comment