Ini adalah sekedar tip sederhana membuat widget menu simpel hanya dengan menggunakan CSS. Posisi dari menu ini adalah melayang (fixed) pada top blog. Sebagai Icon / Logo, menggunakan HTML Icon yang diselipkan dalam pseudo element (before, after).
Selain itu menu ini juga dilengkapi dengan tooltip sederhana yang tentunya juga hanya menggunakan CSS (tanpa JS/Jquery) dan ditambah dengan sedikit efek transisi.
Dan untuk demonya kira-kira seperti menu diatas, Nah kalau sobat ada yang berminat dibawah ini adalah kode CSS dan HTMLnya.
CSS /*MENU*/ #menus{width:100%;height:38px;position:fixed;top:0;left:0;text-align:center;background:#555;border-bottom:2px solid #fff;box-shadow:0 0 0 1px #555;z-index:999; } #menus:before{width:15px;height:15px;content:"";position:fixed;top:8px;left:5px;border-radius:100%;border:2px solid #ddd;background:#000; } #menus:after{width:15px;height:15px;content:"";position:fixed;top:8px;right:5px;border-radius:100%;border:2px solid #ddd;background:#000; } #menus a{margin:3px;color:#333;text-decoration:none; } #menus a:hover{margin:3px;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000; } .menus{display:inline-block;height:30px;background:#ddd;border: 1px solid #ddd;padding:0 10px 0 0;font:bold 11px/30px Arial, Helvetica;text-decoration:none;text-transform:capitalize;color:#444;box-shadow:0 0 0 1px #222,inset 0 0 0 1px #444;transition:all 0.5s; } .menus:before{content:"";float:left;background:#aaa;width:35px; text-align: center;font-weight:bold;font-size:25px;color:#222;margin:0 10px 0 0;box-shadow:inset 0 0 0 1px #444; } .menus:hover{background-color:#fa0;color:#fff; } .menus:hover:before{background: #000;color:#ddd; } .menus:active{background:#b00; } .home:before{content:"\2794"; } .isi:before{content:"\2633"; } .post:before{content:"\2756"; } .contact:before{content:"\2706"; } .about:before{content:"\2639"; } /*tooltip*/ #toltip{position:relative; } #toltip span{display:block;position:absolute;top:-200px;left:0px;width:200px;height:auto;padding:5px;font:9px Verdana;color:#ddd;text-align:center;background:#000;border-radius:5px;border:1px solid #ddd;box-shadow:0 0 0 1px #222;opacity:0.9; } #toltip span:after{content:"";position:absolute;top:-22px;left:5px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #000; } #toltip:hover span{position:absolute;top:50px;left:0;z-index:9;transition:all 1s; } #toltip p{font:bold 10px Arial;font-style:italic;margin:0 auto 5px;color:#fa0;border-bottom:1px solid #888;text-align:center; } | HTML <div id='menus'><a class='menus home' href='' id='toltip'>BERANDA<span><p>BACK TO HOME</p>kembali lagi menuju ke beranda</span></a><a class='menus isi' href='' id='toltip'>ARCHIVES<span><p>OPEN ARCHIVE</p>lihat semua artikel dalam blog ini</span></a><a class='menus post' href='' id='toltip'>NEW ENTRY<span><p>READ NEW ARTICLE</p>baca artikel terbaru diblog ini</span></a><a class='menus contact' href='' id='toltip'>CONTACT 'US<span><p>MY CONTACT LINE</p>silahkan hubungi kami disini</span></a><a class='menus about' href='' id='toltip'>ABOUT 'US<span><p>MY PROFILE</p>sekilas tentang profil admin</span></a></div> |
Itulah sobat sekilas tentang kode-kode CSS menu yang simple plus tooltip sederhana, Untuk cara pemasangannya cukup sederhana dan mudah. Apabila sobat merasa kesulitan silahkan tinggalkan pertanyaan di form komentar.
Selamat mencoba dan semoga bisa sedikit bermanfaat...!!!
Selamat mencoba dan semoga bisa sedikit bermanfaat...!!!
Posted On : 25 Oktober 2013 Time : 22.27
