Membuat Navigasi Web dengan CSS
Macam-macam Pseudo-Class :
Nama Arti
:link Menambahkan style pada link yang belum pernah di kunjungi atau klik
:visited Menambahkan style pada link yang sudah pernah di kunjungi
:hover Menambahkan style pada elemen pada saat mouse berada di atasnya
:active Menambahkan style pada elemen yang sedang aktif
:first-child Menambahkan style pada elemen yang merupakan element yang pertama dipakai dari
:focus Menambahkan style pada kolom input yang sedang aktif
Latihan 1
1. Simpan dengan nama file nav1.html
<html>
<head>
<title>Navigasi Biasa</title>
<!-- perintah untuk memanggil file css -->
<link rel="stylesheet" type="text/css" href="css_nav1.css" />
</head>
<body>
<a href="nav1.html">Home</a>
<a href="profile.html">Profile</a>
<a href="visimisi.html">Visi Misi</a>
<a href="gallery.html">Gallery</a>
<a href="kontak.html">Kontak</a>
</body>
</html>
2. Simpan dengan nama file css_nav1.css
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
text-decoration: none;
margin: 1px;
padding: 5px;
float: left;
background-color: #FFFF00;
}
a:visited {
color: #0000FF;
a:hover {
color: #0000FF;
}
a:active {
color: #CC00FF;
text-decoration: underline;
}
Latihan 1
1. Simpan dengan nama file nav2.html
<html>
<head>
<title>Navigasi Drop Down</title>
<link rel="stylesheet" type="text/css" href="css_nav2.css" />
<head>
<body>
<div id="place-nav">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Google Wave</a></li>
<li><a href="#">Google Buzz</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body>
</html>
2. Simpan dengan nama file css_nav1.css
#place-nav {width: 960px;background-color: #039;padding: 1px;margin-top: 63px;margin-right: 0;margin-bottom:
0;margin-left: 0;}
#nav {height:35px;}
#nav li {height:35px;float:left;display:inline;margin:0 5px;position:relative;font-family: Arial, verdana, serif;z-
index:1000;background-color: #0099FF;}
#nav li a {float:left;display:inline;height:25px;padding:10px 8px 0 8px;font-size:12px;color:#FFFF00;font-
weight:bold;text-transform:uppercase;text-shadow:0 0 2px #000;}
#nav li:hover a { text-decoration:none;color:#fff;}
#place-nav ul ul {position:absolute;z-index:1200;display:none;width:186px;margin: 0;top:
35px;left:0;background:#1d87ca;padding:0 0 2px 0;}
#place-nav ul li ul li {display: inline;float: left;width:186px;height:auto;border-bottom:1px solid #085d93;float:
left;padding: 0;position:relative;margin:0;}
#place-nav ul ul ul {position:absolute;z-index:1300;display:none;width:186px;margin: 0;top:
0;left:183px;background:#1c83ce;border-left:1px solid #1479c3;padding:0;}
#place-nav ul li ul li ul li {display: inline;float: left;padding: 0;}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited
{color:#fff;font-size:12px;width:170px;height:auto;text-transform:none;border:none;background: none;padding:9px
8px;text-shadow:none;margin:0;font-weight:lighter;}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {text-
decoration:none;color:#fff;background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Langganan:
Posting Komentar (Atom)
Posting Komentar