Created (c) by Princexells Seyka (Princelling Saki)

Rabu, 27 Maret 2013

Menu Keren With CSS


Simpan kode Di bawah ini di Atas kode ]]></b:skin>

.dalang, .dalang ul{padding-top:0px;padding-left:10px; margin:0; list-style:none; display:block;}.dalang{width:150px; height:60px; margin:0 auto; position:fixed;}.dalang li.menu{width:150px; height:60px; line-height:50px; position:relative; z-index:100;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;transition-delay:0.5s;-o-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-webkit-transition-delay:0.5s;}.dalang li.menu > a{display:block;width:130px;height:46px;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;transition-delay:0.6s;-o-transition-delay:0.6s;-moz-transition-delay:0.6s;-ms-transition-delay:0.6s;-webkit-transition-delay:0.6s;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFOPz3q0c8XLCXfEDXYT_7eLKCUhzi5mjjgZMERIm9os7OMzn6TqwRsTsQ9vu2Iz5YpGYw86OpIejw6orSjL_3jI5Jolo2keyXvihzQvdU4FJ2R_hWy0NT5qpZ9nFvgQvLLlJpPoj7NU/s1600/Menu.png) no-repeat center center}.dalang ul li a{display:block; width:140px; height:50px; opacity:0.5; float:left;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}.dalang li a b{position:absolute; left:-9999px;}.dalang li.menu ul li.mas1 a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohhnl3NuzbYoM0V-LC9gYS1R4CGhcVB3UHq4IQ529Gn5jadvc4fxoO0ieFWQBlLqfjCWjusaG56TB7cTxuArsPiLY2_N-89c6nsheaj9K9IVBUa3UVJMLzwn32vj-8PdlT9HRvROSDf0/s1600/feed.png) no-repeat center;}.dalang li.menu ul li.mas2 a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3_tS54aywITQBk02jWEYVKplaau6yUTDDkpBtd_mxqVKRPa2jY5izcVzPpo0uEBFm9hd0DcvdMT7ero1NOxfoANrNtn7NlrC2vig_4ymCQPKpdgOhOkL26Pnr_ibjBrVKmjUi-lNXsSA/s1600/mail.png) no-repeat center;}.dalang li.menu ul li.mas3 a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZvTHFQde1flkUtpUbVGPfTCPng3vYp3qJSZyxw1-wHo31T1Yyh2NxuyNwBKyexPi3P2LA3-9Fn21noiWx6zJ2p2D4jD5Z5-fIHKKB0eC1xKtouYGeAxchyDleoOFsrf7DPUqhdHp1cE/s1600/homes.png) no-repeat center;}.dalang li ul{z-index:-1; position:absolute; top:0px; left:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;transition-delay:0.5s;-o-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-webkit-transition-delay: 0.5s;}.dalang li ul li {position:absolute; left:0; top:0; width:150px; height:50px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;transition-delay:0.5s;-o-transition-delay:0.5s;-moz-transition-delay:0.5s;-ms-transition-delay:0.5s;-webkit-transition-delay:0.5s;}.dalang li.menu:hover{margin-top:0px;}.dalang li.menu:hover ul{top:0px;width:380px; left:100px;}.dalang li.menu:hover ul li.mas1{left:0; top:0;}.dalang li.menu:hover ul li.mas2{left:100px; top:0;}.dalang li.menu:hover ul li.mas3{left:200px; top:0;}.dalang li a:hover{opacity:1;}.dalang li.menu > a:hover{opacity:0;}

kemudian pilih Edit HTML dan klik Lanjutkan.
Temukan kode ini     :    </head> atau </body>

Salin kode CSS ini dan letakkan di atasnya:

<ul class='dalang'><li class='menu'><a href='http://hooter-spot.blogspot.com/'><b>Menu</b></a><ul><li class='mas1'><a href='http://hooter-spot.blogspot.com/'><b>RSS</b></a></li><li class='mas2'><a href='http://hooter-spot.blogspot.com/'><b>Contact</b></a></li><li class='mas3'><a href='http://hooter-spot.blogspot.com/'><b>Home</b></a></li></ul></li></ul>

simpan Template...

Tidak ada komentar:

Posting Komentar

Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Lagi Perbaikan Blog
Back to Top