Cara Membuat Posisi Menu Menjadi Diam atau Fixed
Halo Sobat, pada tutorial kali ini, saya akan membahas bagaimana cara membuat posisi menu menjadi diam atau fixed. oke langsung saja kita mulai.
 |
| Cara Membuat Menu dengan efek Property CSS Fixed |
Langkah atau cara Posisi Menu Menjadi Diam atau Fixed
1). Buat source code menunya terlebih dahulu, sebagai contoh saya akan membuat menu dengan style seperti contoh gambar dibawah ini :
 |
| Hasil Menu Horizontal By Dunia Programming |
2). Setelah itu, kita masuk kedalam bagian source codenya, cari bagian nav atau div atau apa saja yang sudah kalian buat tadi, dan cari nama class atau id pada nav, div ataupun yang lain, untuk contoh yang sudah saya buat, saya menggunakan class menu, maka kita cari nama .menu pada css yang sudah saya buat tadi.
3).Setelah itu, kita masuk kebagian source code css, kita gunakan property position:fixed; agar posisi menu tidak berubah, alias diam ditempat.
4). Lebih lengkapnya, kalian bisa copy script HTML dan CSS dibawah ini :
Copy script HTML dibawah ini, dan beri nama index.html
HTML
<!doctype html>
<html>
<head>
<title>Horizontal</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Info Buku</a></li>
<li><a href="#">Question</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>Horizontal</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Info Buku</a></li>
<li><a href="#">Question</a></li>
</ul>
</div>
</body>
</html>
Copy script CSS dibawah ini, dan beri nama style.css
CSS
body {
background: #000;
height: 2000px;
}
#menu {
position: fixed;
width: 98%;
height: 38px;
background: #ff0000;
border: 1px solid #fff;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
margin-top: 9px;
}
#menu ul li a {
color: #fff;
padding: 10px;
border-right: 1px solid #fff;
display: inline;
text-decoration: none;
font-weight: bold;
}
#menu ul li a:hover {
background: white;
color: green;
}
background: #000;
height: 2000px;
}
#menu {
position: fixed;
width: 98%;
height: 38px;
background: #ff0000;
border: 1px solid #fff;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
margin-top: 9px;
}
#menu ul li a {
color: #fff;
padding: 10px;
border-right: 1px solid #fff;
display: inline;
text-decoration: none;
font-weight: bold;
}
#menu ul li a:hover {
background: white;
color: green;
}
atau juga bisa kalian gunakan source code lengkap HTML dengan CSSnya, dan beri nama index.html atau yang lain.
Script Lengkap
<!doctype html>
<html>
<head>
<title>Horizontal</title>
<style type="tex/css">
body {
background: #000;
height: 2000px;
}
#menu {
position: fixed;
width: 98%;
height: 38px;
background: #ff0000;
border: 1px solid #fff;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
margin-top: 9px;
}
#menu ul li a {
color: #fff;
padding: 10px;
border-right: 1px solid #fff;
display: inline;
text-decoration: none;
font-weight: bold;
}
#menu ul li a:hover {
background: white;
color: green;
} </style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Info Buku</a></li>
<li><a href="#">Question</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>Horizontal</title>
<style type="tex/css">
body {
background: #000;
height: 2000px;
}
#menu {
position: fixed;
width: 98%;
height: 38px;
background: #ff0000;
border: 1px solid #fff;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
margin-top: 9px;
}
#menu ul li a {
color: #fff;
padding: 10px;
border-right: 1px solid #fff;
display: inline;
text-decoration: none;
font-weight: bold;
}
#menu ul li a:hover {
background: white;
color: green;
} </style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Info Buku</a></li>
<li><a href="#">Question</a></li>
</ul>
</div>
</body>
</html>
Lalu simpan dan lihat hasilnya
Lalu, bagaimana kalau kita memfungsikan style ini pada blog, apakah bisa...? sangat bisa sekali, ayo kita coba.
Cara Membuat Posisi Menu Blog Menjadi Diam atau Fixed
1). Pilih menu Template > Edit HTML2). Kemudian cari source code menu CSSnya, biasanya dalam script CSS, memiliki perbedaan masing-masing, kalian bisa cari sendiri script CSSnya dengan pelan scrol ke bawah, cari ciri-ciri source code menu pada blgo kalian sebagai berikut :
1). .nav atau #nav
2). .menu atau #menu
3). /*----Menu----*/
cari dengan menekan tombol CTRL+F, lalu masukkan script property CSS position:fixed;
Simpan dan lihat hasilnya.
Bagaimana...? Sukses...? kalau masih gagal atau kebingungan, silahkan kalian dapat meninggalkan komentar pada kolom yang sudah disediakan di bawah artikel ini, semoga bermanfaat, terimakasih.
Post a Comment for "Cara Membuat Posisi Menu Menjadi Diam atau Fixed"
- Gunakan Kata-Kata Yang Sopan
- Dilarang Keras Menaruh Link Aktif Dibawah Postingan
- Dilarang Membuat SPAM
- Dilarang Saling Melecehkan Antar Sesama
- Dilarang Promosi Web/Blog/Obat-Obatan Atau Yang Lain