Assalamu'alaikum Wr. Wb.
Di siang hari ini saya ingin sekali membagikan sebuah artikel tentang script yang digunakan untuk membuat sebuah menu bar sederhana di dalam sebuah website. Menubar adalah sederet pilihan yang jika kita mengekliknya kita akan dialihkan ke halaman tertentu sesuai dari nama menu yang kita klik, menu yang biasa ada di dalam menubar adalah Home untuk kembali ke halaman awal website dan menu-menu lain yang memiliki fungsinya sendiri-sendiri.
langsung saja untuk scriptnya adalah sebagai berikut...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Membuat Website</title>
<style type="text/css">
body{
background: lightgreen;
}
.menus{
background: grey;
width: 100%;
height: 50px;
top: 0;
left: 0;
margin: 0;
padding: 0;
position: fixed;
}
.menus li{
float: left;
list-style-type: none;
width: 70px;
cursor: pointer;
text-align: center;
line-height: 45px;
font-family: verdana;
padding-left: 20px;
padding-right: 20px;
color: white;
}
.menus li:hover{
background: #aaaca1;
height: 100%;
}
</style>
</head>
<body>
<div class="menu bar">
<ul class="menus">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Membuat Website</title>
<style type="text/css">
body{
background: lightgreen;
}
.menus{
background: grey;
width: 100%;
height: 50px;
top: 0;
left: 0;
margin: 0;
padding: 0;
position: fixed;
}
.menus li{
float: left;
list-style-type: none;
width: 70px;
cursor: pointer;
text-align: center;
line-height: 45px;
font-family: verdana;
padding-left: 20px;
padding-right: 20px;
color: white;
}
.menus li:hover{
background: #aaaca1;
height: 100%;
}
</style>
</head>
<body>
<div class="menu bar">
<ul class="menus">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Dan untuk hasilnya aka terlihat seperti ini
 | ||||
| Simple menu bar |
0 Komentar