Komposisi kode yang digunakan sangat sederhana
#nav {
width: 300px;
height: 100%;
position: fixed;
top: 0;
background-color: #34495e;
transform: translate3d(0,0,0);
transition: 500ms transform ease-in-out;
}
#nav ul{
margin: 0px;
padding: 0px;
list-style: none;
}
#nav li {
color: white;
line-height: 2em;
position: relative;
}
#nav li a {
color: white;
display: block;
position: relative;
text-decoration: none;
padding: 10px;
font-weight: 300;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-top: 1px solid #406081;
border-bottom: 1px solid #2c3e50;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#nav li a:hover {
background: #3d566e;
}
HTML
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Back To Articles</a></li>
</ul>
</nav>
Nah seperti itulah adanya , mudah-mudahan sobat bisa lebih memahami dan lebih inovasi dengannya.
Betul kang nu penting mah kreatifna kang :) sapertos blog ieu keren nganggo blogazine :D
BalasHapusnah itu kang yg penting kita'y yg harus kreatif lg
Hapussimple banget ya.., gk pake epek2.., tumben ni.. *smile
BalasHapusBetul menunya simple dan no effects yah Mas Rohis..
HapusDi pincuk dulu nih Kang Ruly script CSS Menunya . thx
Rohis : biar mereka yg ngasih efect'y sendiri hehe
HapusKarri : monggo silahkan mang
Bisa wae yeuh artikelna Kang Ruly meuni sae artikel amaenu Navigation na
BalasHapusSukses deh Kang, perlu di coba soalnya keren dan Kasep lah pokona mah :q
lumayan kang daripada bengong wae hehe ..
Hapusnuhun kang
Muhun Kang Ruly sami-sami Abi nu Nuhun dai nya.
HapusDi tunggu artikel enggalna Kang, cepetan hhhh :) :sip
keren mas navigation sidebarnya :)
BalasHapusalakadrnya mas he
HapusGile benerr,,, kereen kang :-d mirip sama punya nya kang ismet, cuman beda tampilan aja haha :p
BalasHapusowh iya ya .. tinggal di poles aja atuh kang hehe
Hapusiya kang, apa lagi di bikin responsive jadi makin cetar dah menu navigasinya haha :D
Hapuskalau responsive pada sebuah menu saja kayaknya sedikit mudah sob ...
Hapusbisa pake auto hide gak mas?
BalasHapusbisa tinggal nambahin sedikit ramuan show or hiden hehe ..
Hapustapi itu ada di postingan selanjutnya ya
okedeh.. ane tunggu mas, trims :)
Hapussip mbak yu
Hapuswuihh sipp tenan kang, mantap abis ini mah.. sipp kang cobain yah :)
BalasHapusmonggo silahkan mas .. lumayan lah hehe
HapusAne coba terapin di blog saya Kang...wah cakep nih
BalasHapusboleh silahkan .. awas jgn bohong hehe
HapusDi temenin ngopi nyamni denger music..jd hasilnya keren ya kang :)
BalasHapusiya mas kalau ada kopi apa pun pasti mantapzz
HapusKeren kang lagi musim nih Menu Navigation Sidebar kayak gini :)
BalasHapusiya ini juga coba bikin untuk meramaikan saja kang ..
HapusKalo di posting ulang boleh ngak kang :)
Hapusboleh silahkan kang
Hapusmakin mantap we yeuh blog, selamat kang semoga makin tambah yahoot kang blogna
BalasHapusah bisa wae si akang .. amien doa'na we he
Hapusmampir lg ni kang.. *smile
BalasHapusselamat datang kembali mas rohis ...
Hapuswah bagus ini menu navigasi nya. sangat bermanfaat untuk saya :) Thanks ya :)
BalasHapusthx ,, back hehe
Hapusposisina fixed janten moal tiasa lumpat ka mamana, ditalian kang hehehe :D
BalasHapusjiga domba nya kang cing cang-cang heuehu
Hapushayang teh lepas talina di tubruk weh haha
Hapusfungsina transform: translate3d(0,0,0); dina menu eta naon tah kang?
BalasHapusitu CSS3 transform kang .. kurang lebih itu sebuah property , fungsi tranformasi yang memiliki value untuk scale , rotate , translate entah dalam menentukan posisi , efect atau apalah gitu kang .
Hapusmaksudnya gini kang rul... saya hanya melihat fungsi dari kode :
Hapustransition: 500ms transform ease-in-out;
transisi saat hover. tah ari 'transform: translate3d(0,0,0);' buat apa? can ngartos punten yeuh
tambihan kang.. maksudnya pada demo diatas fungsi 'transform: translate3d(0,0,0);' untuk apa?
Hapusfungsina sama kayak gini gk ?
Hapustransition:all 0.3s ease-in;
Fungsinya untuk penempatan posisi pada satu akselerasi kang ..
Hapuskarena pada dasarnya : untuk memindahkan objek secara horizontal saja atau secara vertikal, atau dengan menggunakan fungsi translateX, translateY dan translateZ (translateZ akan memindahkan objek ke depan –3D). ya kurang lebih lah
janten efekna kumaha tah, soalna asa teuaya perubahan pas dicobian dina demo dihapus, sok keuekuh abi mah mun can ngartos teh kang.... :D
Hapusmembantu sedikit, translate3d(0,0,0); berfungsi untuk memperlembuat gerakan meyesuaikan dengan GPU. menurut hemat saya pada menu diatas tidak terlalu penting penambahan kode ini. kode ini diutamakan untuk slider, 3d effect dan sejenisnya
Hapusduh baru faham maksud akang ,, maklum kang rada riweh ku job hehe lumayan 2,5 kang .. maksud kang ismet tuh peran translate3d(0,0,0) pada CSS diatas ?? ya itu yg dikasih tau sama mas joel .. memang secara kasat mata gak akan terlalu ngaruh tapi lamun di sidik2 ku translate3d(0,0,0) rada lembut kang ..
Hapusweyyy mangstab.. tah kitu maksad abditeh kang, paingan lieur sayah :D
Hapushah nya eta kang papuket taing fikiran sareng panangan na hehe
HapusDatang lagi di postingan Kang Ruly nu sae ini
BalasHapusBiasa saya yang masih awam pada script mah cuma bisa
Nyimak sambil baca para Master, mengajukan pendapat
Selamat datang kembali .. sama-sama masih belajar mas
Hapus