Cara Membuat Menu Fixed Menggunakan HTML CSS
Halo teman teman di kesempatan kali ini saya akan berbagi panduan mengenai Cara Merancang Fitur Fixed Menggunakan HTML CSS, mungkin kita sering melihat di website-website ataupun blog yang menunya tetap ketika di scroll keatas maupun kebawah, bagi membangun sebuah fitur supaya tetap ketika di scroll tidaklah susah hanya lumayan mengikuti step by step yang terdapat dibawah ini.
Sebelum kita masuk ke study case ada baiknya kita mesti paham dulu apa sih yang dimaksud dengan position fixed. Position fixed berfungsi bagi menjadikan sebuah sebuah element div tak bergerak kemana-mana, walaupun halaman tersebut digeser keatas maupun kebawah di halaman web, dan fitur fixed ini pun berfungsi bagi mempermudah user berpindah ke halaman berikutnya tanpa mesti kembali ke halaman atas.
Oke teman teman kita seketika saja, berikut Cara Merancang Fitur Fixed Menggunakan HTML CSS
- Silahkan buka sebuah text editor teman teman seperti : Notpad++, Adobe Dreamweaver, Sublime Text, ataupun yang lainnya
- Silahkan teman teman simpan script dibawah ini di text editornya
<!DOCTYPE html>
<html>
<head>
<title>fitur</title>
<style type=text/css>
*{margin: 0; padding: 0}
body {background-image: url(cara-membuat-menu-fixed-menggunakan-html-css-1.jpg);}
.container {width: 100%; background-color: red; height: 40px; position: fixed; margin-top: -45px;}
nav {width: 900px; margin:auto; background-color: red; height: 40px;}
nav ul {list-style: none; }
nav ul li {float: left; width: 20%}
nav ul li a { display: block; color:#fff; text-align: center; line-height: 40px; text-decoration: none;}
nav ul li a:hover {background-color:blue;}
article {width: 900px; margin:auto;}
article p {color: #52ff12; margin-top: 40px;}
</style>
</head>
<body>
<div class=container>
<nav>
<ul>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Galery</a></li>
<li><a href=#>Service</a></li>
<li><a href=#>Blog</a></li>
</ul>
</nav>
</div>
<article>
<p>
Silahkan isi Content atau Text .. !
</p>
</article>
</body>
</html>
- Kemudian Save As dengan nama Cara Merancang Fitur Fixed Menggunakan HTML CSS.html
- Silahkan jalankan di browser teman teman karenanya hasilnya seperti dibawah ini,
Jadi Apabila di Scroll ke atas maupun ke bawah karenanya fitur nya akan fixed atau tetap.
Bagai mana teman teman Cara Merancang Fitur Fixed Menggunakan HTML CSS nya ? lumayan gampang bukan ?
Demikianlah panduan dari saya mengenai Cara Merancang Fitur Fixed Menggunakan HTML CSS, semoga bermanfaat
Terimakasih.
Sumber https://kursuswebsite.org
