Cara Membuat Menu Fixed Menggunakan HTML CSS

by | Sep 11, 2016 | HTML CSS, Kursus Website, Tips Trik, Tutorial | 0 comments

Halo teman teman pada kesempatan kali ini saya akan berbagi tutorial tentang Cara Membuat Menu Fixed Menggunakan HTML CSS, mungkin kita sering melihat pada website-website ataupun blog yang menunya tetap saat di scroll keatas maupun kebawah, untuk membuat sebuah menu supaya tetap saat di scroll tidaklah susah hanya cukup mengikuti step by step yang ada dibawah ini.

Sebelum kita masuk ke study case ada baiknya kita harus mengerti dulu apa sih yang dimaksud dengan position fixed. Position fixed berfungsi untuk menjadikan sebuah sebuah element div tidak bergerak kemana-mana, walaupun halaman tersebut digeser keatas maupun kebawah pada halaman web, dan menu fixed ini juga berfungsi untuk memudahkan user berpindah ke halaman berikutnya tanpa harus kembali ke halaman atas.

Oke teman teman kita langsung saja, berikut Cara Membuat Menu Fixed Menggunakan HTML CSS

  1. Silahkan buka sebuah text editor teman teman seperti : Notpad++, Adobe Dreamweaver, Sublime Text, ataupun yang lainnya
  2. Silahkan teman teman simpan script dibawah ini pada text editornya
<!DOCTYPE html>
<html>
<head>
 <title>menu</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>
  1. Kemudian Save As dengan nama Cara Membuat Menu Fixed Menggunakan HTML CSS.html
  2. Silahkan jalankan pada browser teman teman maka hasilnya seperti dibawah ini,

cara-membuat-menu-fixed-mengunakan-html-css

 

Jadi Apabila di Scroll ke atas maupun ke bawah maka menu nya akan fixed atau tetap.

Bagai mana teman teman Cara Membuat Menu Fixed Menggunakan HTML CSS nya ? cukup mudah bukan ?

Sekian tutorial dari saya mengenai Cara Membuat Menu Fixed Menggunakan HTML CSS, semoga bermanfaat

Terimakasih.