Tulisan kali ini akan membahas tentang positioning di css, kita akan membuat studi kasus menu yang posisinya tetap biasa disebut menu melayang, atau flying menu atau fixed position menu.
Menu tidak akan bergerak walaupun kita malakukan scroll sampai bawah.
Gaya seperti ini memang sedang marak diterapkan oleh banyak web designer saat ini, website sosial media pun banyak yang menerapkan menu yang posisinya tetap seperti itu, sebagai contoh Twitter, Facebook, Pinterest pun menerapkannnya.
Oke kita mulai saja membuat.
Pertama siapkan file index.html
sisipkan 2 buah font dari google web font di bagian head dan /head pada file html tersebut.
<link href='http://fonts.googleapis.com/css?family=Concert+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
Lalu buat struktur HTML sebagai berikut
<div class="fly">
<div class="content">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="ribbon">
Follow Twitter
<h2><a href="http://www.twitter.com/tut_web">@tut_web</a></h2>
</div>
</div>
</div> <!-- /.fly -->
<div class="flying-robot"><img src="fly.png" alt=""></div>
<div class="main">
<div class="content">
<h1>DEMO | Flying Menu CSS</h1>
<p><strong><a href="http://www.tutorial-webdesign.com">http:www.tutorial-webdesign.com</a></strong></p>
<p>...</p>
<p>...</p>
</div>
</div> <!-- /.main -->
<div class="footer">
<div class="content">
<p>
Copyright © 2012 <a href="http://www.tutorial-webdesign.com">Tutorial-Webdesign.com</a> | Image Credit <a href="http://fantendo.wikia.com/wiki/File:Fly_Guy_Card.png">Fantendo</a>
</p>
</div>
</div> <!-- /.footer -->
dengan struktur HTML itu kita membuat 4 bagian penting
class .fly untuk membuat menu atas
class .flying-robot untuk membuat objek robot terbang
class .main untuk tempat tulisan atau konten website
class .footer untuk membuat bagian bawah web
Style CSS
Untuk mempercantik bagian-bagian tersebut kita buat CSS sebagai berikut.
Style untuk menu atas, class .fly
/* Menu atas */
.fly{
background-color: #1484CE;
background-image: -webkit-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image: -moz-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image: -o-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image: -ms-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
background-image: linear-gradient(center top , #1484CE 0%, #1274B5 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0 2px 0 #0E5A8C;
box-shadow: 0 2px 0 #0E5A8C;
font-size: 13px;
height: 30px;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.fly .content ul{
list-style-type: none;
float: left;
}
.fly .content ul li{
display: inline;
}
.fly .content ul li a{
display: inline-block;
text-decoration: none;
padding: 7px 10px;
border-right: 1px solid rgba(255, 255, 255, 0.125);
color: #f8f8f8;
font-weight: bold;
}
.fly .content ul li a:hover, .fly .content ul li a.active{
background: -webkit-linear-gradient(top, #2b90d2, #1382cb);
background: -moz-linear-gradient(top, #2b90d2, #1382cb);
background: -o-linear-gradient(top, #2b90d2, #1382cb);
background: -ms-linear-gradient(top, #2b90d2, #1382cb);
background: linear-gradient(top, #2b90d2, #1382cb);
}
.fly .content .ribbon{
text-align: center;
float: right;
width: 100px;
background: #fff000;
padding: 2px 10px;
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
.fly .content .ribbon:hover{
background: orange;
}
/* Content untuk semua */
.content{
max-width: 940px;
margin: 0 auto;
}
style untuk robot terbang class .flying-robots
/* Robot Terbang */
.flying-robot{
position:fixed; top:50px; left:10px;padding:10px;
height: 150px;
width: 150px;
}
style untuk halaman utama berisi teks class .main
/* Halaman Utama */
.main{
margin-top:50px;
margin-bottom: 50px
}
.main .content p{
margin-bottom: 30px;
}
style untuk footer, class .footer
/* Bagian Footer */
.footer{
padding: 10px 0;
background: -webkit-linear-gradient(left, #ccc, #999);
background: -moz-linear-gradient(left, #ccc, #999);
background: -o-linear-gradient(left, #ccc, #999);
background: -ms-linear-gradient(left, #ccc, #999);
background: linear-gradient(left, #ccc, #999);
bottom: 0;
position: fixed;
width: 100%;
font-size: 12px;
}
.footer a{
text-decoration: none;
font-weight: bold;
color: #000;
}
Pada intinya untuk membuat elemen yang posisinya tidak berubah itu yaitu dengan menyertakan position:fixed di css
sedangkan untuk membuat posisinya suatu elemen merapat ke bawah atau keatas ditentukan dengan bottom:0 atau top:0
Responsive
Untuk membuat halaman tersebut menjadi responsive, atau bisa menyesuaikan ukuran layar device nya, maka tambahkan kode berikut
@media (max-width: 767px) {
.flying-robot{
position:relative;
text-align: center;
top:60px;
}
.fly{
text-align: center;
}
.fly .content ul li a{
border:none;
}
.content{
width: 99%;
}
.main .content h1,
.main .content p{
margin: 10px;
}
.footer{
text-align: center;
}
}
@media (max-width: 520px){
.fly{
height: 60px;
}
.fly .content .ribbon{
display: block;
width: 100%;
}
.main{
margin-top:80px;
margin-bottom: 80px
}
}
Berikut adalah hasil yang telah kita buat
Sekian tutorial kali ini, semoga membantu anda dalam belajar atau mengerjakan proyek anda.
Salam Web Design Indonesia
Link demo ga aktif
Terima kasih koreksinya, sudah kami betulkan, silahkan di cek kembali
min, saya mau coba bikin menu bar diatas saya kombinasikan sama yg link http://www.tutorial-webdesign.com/membuat-dropdown-menu/ ini. intinya saya pengen bikin kedrop down juga. cuman belum bisa-bisa. masih bingung mengaturan ul dan li nya. bisa kasih sdikit clue? maklum newbie :)
Simple nya sih, untuk membuat posisi selalu diatas itu cuma pada bagian:
position: fixed;
top: 0;
width:100%;
Jadi coba tambahkan baris itu di bagian nav, contoh, coba kamu tambahkan script barikut di style.css dropdown menu ini -> http://www.tutorial-webdesign.com/membuat-dropdown-menu/
nav {
background: #000000;
position: fixed;
top: 0;
width: 100%; /* Sesuaikan dengan kebutuhan */
}
wak keren thanks, q cari ni
Permisi admin bagai mana cara membuat kotak dialog atau pop up seperti “baca juga” yang ada pada website anda. apakah menggunakan teknik ini atau yang lain sebeb jika di geser kebawah posisinya tetap.
Kami menggunakan plugin ini – http://goo.gl/d3vJZ
terbangnya pake properti position:fixed yaa. mantap :D :D
[…] menu di scroll dengan bantuan jquery. Agak berbeda dengan yang kita buat sebelum nya di tutorial Membuat Menu Posisi Tetap dan Responsive dimana kita tidak membutuhkan javascript untuk itu, karena menunya sudah langsung kita letakan di […]
maaf gan, msh newbe nh., ini buat wordpress kan?
untuk index.html nya dimana ya? punyaku index.php e
thx atas pencerahannya
Untuk web biasa khususnya, kalau mau dipake di wordpress ya silahkan di sesuaikan dengan struktur wordpress :)
terima kasih nih sebelumnya untuk tutorialnya..
nah pas saya ingin menambahkan link di gambar yang ko ga aktif ya.. itu masalahnya dmn ya mas…
Malam gan…
Mau tanya.. gimana caranya buat halaman berita fixed artinya yg bergerak hanya berita2nya saja tapi halaman depannya tidak. itu loh seperti yahoo.com yang baru,
tks gan atas bantuannya.
Sama saja dengan artikel ini, tinggal di buat fixed dan diletakan di atas dan di samping
Selamat Malam Min.
Terimakasih banyak atas tutorial dan file’ masternya. Alhamdulillah saya jadi semakin paham model html seperti ini, walaupun masih ngcontek punya orang.
Kebetulan template yang saya download dari sini, langsung saya modifikasi untuk membuat virtual class bo’ong2an. . Karena template ini, visrtual class yg saya buat bener2 serasa milik sendiri. :D
Ini hasil modifikasinya. http://kumbang.org/bio-ex/vic/index.html. Bagi teman2 yang lain ingin download hasil modifikasi saya, dapat download melalui https://drive.google.com/file/d/0B80qays9D8TEbEJqQUNDcjhLbHc/edit?usp=sharing.
Makasih banyak buat TutWeb
Mantap…. senang membaca komentarnya, ternyata tidak sia-sia tulisan2 twd :)
Bagus tutorialnya. Saya telah menggunakannya tapi “konten” malah menimpa “navbar” bagaimana cara memperbaikinya? apa yang salah? ini web saya: http://hedipro.blogspot.com
Jawabannya sangat saya tunggu.
Terima kasih.
Tambahkan
z-index: 9999di css nya, tepatnya di class.flySekarang content nya sudah tidak menimpa menu lagi. Saya sangat berterima kasih kepada TWD Editorial yang telah meluangkan waktunya untuk menjawab permasalahan saya. Saya baru belajar tentang web design dan saya mendapat banyak ilmu disini. Terima kasih
:) kami pun senang bisa membantu, terima kasih telah berkunjung
Saya masih butuh bantuan lagi dari TWD Editorial. Ketika hedipro.blogspot.com saya buka di smartphone android menggunakan aplikasi browser opera mini dan browser chrome content nya menjadi berantakan. Kira-kira apa yang salah dari saya ya? Mohon bantuannya.
Terima kasih.
Demo untuk tutorial itu memang tidak dibuat untuk keperluan website responsive seutuhnya, kalau mau tampil bagus di smartphone pelajari media query nya css, atau bisa kasih width menggunakan %, misal 100% pada bagian konten tersebut.
makasih gan infonya…ijin praktek dulu ya
mas klo mau bikin di wordpress gmn yah. sy coba tadi unggah lewat plugin gak bisa..? jadi caranya masukin ke wordpress nya gmn? thx mas
maaf gan link download-nya mati …
boleh minta :)
Berhasil, keren … maju terus untuk tutorial-webdesign.com … (y)
matur nuhun admin, berhasil ane terapin diblog ane :)
makasih gan tutornya
oh berarti penggunaan fixed dan z-index itu sangat berkaitan erat ya ? Thanks admin, hem TWD sudah tidak update lagi ini, agaknya banyak project ya ?
tanya lagi donk , ini aku coba modifikasi coding dari http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
aku tambahkn position:fixed untuk header kok malah naek ya ? bagaimana solusinya agar tidak naek, yang mau ku buat adalah header dan menu samping tetap untuk artikel jika panjang, need respon gan ?
wait ini sudah gan tapi agak acak-acakan ini
http://pastebin.com/RnEqkbsX
pertanyaan ku adalah,
1. ketika kita buat header nya itu fixed, terus contentnya dan menu samping itu di kasih margin-top sama dengan tinggi header nya ya ?
maaf gan rempong tanya ya ? Thanks
Tanya lagi donk, itu flying robot ko position nya relative ya ? kn seharusnya fixed ya ?
mohon di alas satu-satu ya admin if you have time :D
kenapa antara div yang ada diatas sama div untuk konten nya timpang tindih, mohon perncerahannya
karena div yang diatas memang dibuat seperti berada diatas konten ketika mouse di scroll, namanya saja flying menu :)
keren keren,,detail sekali pencerahanya tanks,,ijin saya coba di blog saya
good gan tutorialnya ,,, semoga bermanfa’at
Udah dicoba tapi headernya jadi dibelakang konten gimana cara benerinnya?
Tutorialnya lengkap dan bermanfaat banget gan,, makasih ya sudah share…
Makasih gan, ijin coba dulu
[…] Membuat Menu Posisi Tetap dan Responsive […]
Makasih gan. :)
Semisal ini ditambah “slide show” saya sudah mencoba, slide shownya tumpang tindih (posisi diatas menu), bagaimana caranya supaya posisi slide show dibawah saat scroll?
Terima Kasih
coba kurangi nilai/value dari z-index di CSS nya
Malam admin
tolong bantuan kasus sy ingin membuat menu fly di blog gustihadinata.com otomatis memanjang tab nya saat dixcroll, bukan hanya tetap melayang, tetapi juga dasar tab otomatis memanjang ke kiri-kanan menyesuaikan lebar window.
trims
pak mohon bantuannya
untuk di blogger gmn ya tutorialnya, sy pengen banget bikin mene kyk gini atau kyk di blog mas ini, yang mana saat pada mobile mode tetap nampil dan tidak perlu ada ( MENU ) yang butuh di klik baru muncul drop down.
mohon bantuannya
Makasih Mas… saya coba otak atik dulu mudah-mudahan berhasil di terapin di blog saya
makasih admin sangat membantu
thanks ya saya senang belajar ngeblog mudah mudahan bisa memberikan artikel yang lebih mujarab
bang aku mau nanya,,
aku mau bikin menu turunan ke bawah cuma masih bingung di tag ul sama li nya,,,
gmn ya bang?
keren gan. penjelasannya cukup bagus