Tutorial Membuat Menu
Website Keren,Responsive dan simple dengan html dan css
Oke kali ini saya
akan memberikan tutorial bagaimana cara membuat menu/navigasi web elegan dan
responsive oke pertama, anda buat sebuah
folder baru tersrah namanya apa lalu anda copaskan atau jika anda mau ketikan
script html dan css juga tidak masalah ya langsung saja kita buat sebuah file
html boleh pakai notepad gedit atau apalah enaknya anda oke ini script html dan
css nya
HTML
<html>
<head>
<title>Latihan</title>
<link rel="stylesheet"
href="gaya.css">
</head>
<body background="andrid.jpg">
<div
id="logo">
<img
src="logo.PNG"></img>
</div>
<div
id="nav">
<ul>
<li><a
href="#">Home</a> </li>
<li><a
href="#">Contact us</a></li>
<li><a
href="#">Tentang</a> </li>
<li><a
href="#">Penulis</a> </li>
<li><a
href="#">Sejarah</a> </li>
<li><a
href="#">Social Media</a> </li>
</ul>
</div>
</body>
</html>
Oke sedikit
keterangan to the point aja anda bisa amati tiru dan modifikasi (ATM) agar anda
paham
2. Mari kita
buat sebuah file dengan nama “gaya.css” karena linknya namanya gaya.css dan
jangan lupa di masukin ke folder yang sama yang telah anda buat tadi ya yang
lagu saja kopikan atau ketik juga gak dilarang ini scriptnya
body
{
width:100%;
margin:0
auto;
text-align:left;
clear:both;
background-image:andrid.jpg
}
img
{
border-radius:40px;
position: center;
height:50px;
}
#nav
{
height:auto;
margin:0
auto;
width:1370;
}
#nav ul
{
width:1370;
position:fixed;
border:3px
solid ece6e8;
border-bottom:5px
solid #d9ced2;
list-style:none;
padding:0;
margin:0;
padding:8px
55px;
background-color:#800000;
}
#nav ul li
{
float:left;
height:35px;
width:auto;
padding:0;
margin:0;
}
#nav ul li a
{
display:block;
padding:10px
65px;
text-decoration:none;
text-shadow:0px
5px 5px #FFFF00;
color:fff;
margin:-5px;
font-size:18px;
font-family: 'FontAwesome';
}
#nav ul li a:hover
{
background-color:#00FF00;
color:black;
text-shadow:0px
1px 0px #000;
height:25px;
border-radius:10px;
width:auto;
margin:-5px;
}
Dan inilah
hasilnya oh ya logo img src bisa anda hilangkan atau diganti dengan foto atau
logo anda sendiri dan juga backgroundnya bisa diganti dengan color atau foto
anda yang menurut anda keren .
0 komentar:
Posting Komentar