Navigasi pada pada suatu web adalah sebagai ptunjuk atau button untuk menuju ke artikel atau post lain. Navigasi pada suatu web dapat terletak di atas , samping kiri kanan , dan bawah .
2. Alat dan bahan
- PC / Laptop
- Sublime Text
- Browser
3. Pembahasan
sintag :
<script type="text/css"> ... </script>Setelah itu ikuti script di bawah ini untuk membuat navigasi di samping kiri :
<!DOCTYPE html>
<html>
<head>
<title> Drop down Navigation </title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
color: black ;
background-color: #DCDCDC;
}
li a{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none ;
}
li a:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
 |
| Hasil script saat di run |
<!DOCTYPE html>
<html>
<head>
<title> Horisontal Navigation</title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #DCDCDC;
color :black;
}
li {
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
}
li a:hover {
background-color: black;
color: white
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
 |
| Hasil script saat di run |
Dan satu lagi , kita dapat membuat navigasi agar terlihat active saat artikel di buka dengan sintag CSS active . untuk contohnya lihat script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title> Active Navigation </title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F08080;
color :black;
}
li {
float: left;
}
li a{
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
}
li a:hover {
background-color: #ffb6c1;
}
li.active {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
 | |
| Hasil script saat di run |
.jpg)
.jpg)
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment