Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

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.
Membuat Menu dengan efek Property CSS Fixed
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 :
Cara Membuat Posisi Menu Menjadi Diam atau Fixed
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>

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;
}

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>

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 HTML
2). 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"