Menu Full Down Golosor Cantik

• My Diary
  • PUISI: Sahabat Jadi Cinta
  • Faktor Utama Penyebab Putus Cinta

  • Surat Untuk Sahabat
  • Pengorbanan CINTA
• Artikel
  • Blogging Tips
  • CSS Widget
  • Template Design
  • Efek Gambar
  • SEO Informasi

  • Tutorial Blog
  • SEO Trik
  • CSS Code
  • Efek Colection
  • Kehidupan Sosial
• Profile
  • Google Plus
  • Facebook
  • Twitter
• Arsip File
  • Jumping Text
  • Trembling Text
  • Animated Text

  • Daftar Isi Blogger Dengan Navigasi
  • Elegan Black Color For Sitemap Theme
  • Black Red Light Theme Sitemap Design
• Follow

Amarajen

Untuk membuat contoh menu seperti di atas kodenya adalah, tempatkan kode berikut sebelum kode :
]]></b:skin>

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999}
.menu3Dflip {border-bottom:2px solid #cecece;margin:0 auto;text-align:center;position:relative;height:40px;z-index:999;background:#0091d6;-moz-perspective:100px;-webkit-perspective:100px;-o-perspective:100px;perspective:100px}
.menu3Dflip ul.nav li {display:inline-block;display:inline}
.menu3Dflip ul.nav {padding:0;margin:0;list-style:none;display:inline-block;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}
.menu3Dflip ul.nav li {float:left;display:block;padding:0 4px}
.menu3Dflip ul.nav > li {-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.menu3Dflip ul.nav li a.top-a {display:block;margin-top:4px;float:left;height:36px}
.menu3Dflip ul.nav li a.top-a b {display:block;padding:0 20px;font:bold 14px/30px arial, sans-serif;color:#fff}
.menu3Dflip ul.nav li:hover a.top-a {background:red;border-radius:8px 8px 0 0;-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4)}
.menu3Dflip ul.nav div {position:absolute;top:40px;left:4px;background:#09c;padding:5px 0 10px 0;border-radius:0 0 15px 15px;-webkit-transition:0.5s;-moz-transition:0.5s;-o-transition:0.5s;transition:0.5s;-moz-transform-origin:0px 0px;-moz-transform:rotateX(-90deg);-webkit-transform-origin:0px 0px;-webkit-transform:rotateX(-90deg);-o-transform-origin:0px 0px;-o-transform:rotateX(-90deg);transform-origin:0px 0px; transform:rotateX(-90deg);-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility: hidden}
.menu3Dflip ul.nav div.left {left:auto; right:4px} .menu3Dflip ul.nav div ul {padding:10px 0;list-style:none;width:300px;margin:10px 5px 0 5px; float:left;display:inline;text-align:left;background:#fff;border-radius:6px;-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4)}
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px;margin-right:10px}
.menu3Dflip ul.nav div ul li {float:left;border-bottom:1px dotted #09c;margin:0 5px 0 5px;display:inline}
.menu3Dflip ul.nav div ul li:last-child {border:0}
.menu3Dflip ul.nav div ul li a {display:block;width:280px;font:12px/16px arial, sans-serif;color:#069;margin:0;padding:4px 0 4px 10px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHMOO3OnhhBV0F5Y7lBXH2oevq2GMUIiAUmzOi-DyEkICjJqWD7EMkNEVk0Ve783HVieR7Omat2vwyJOaXyb-jlgFJUlqB-G2eQa48ow2GSmsbMGdQsL0Gq6SdpiTKoerGPEkQzxW38U/h120/arrow.gif) no-repeat left center}
.menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHMOO3OnhhBV0F5Y7lBXH2oevq2GMUIiAUmzOi-DyEkICjJqWD7EMkNEVk0Ve783HVieR7Omat2vwyJOaXyb-jlgFJUlqB-G2eQa48ow2GSmsbMGdQsL0Gq6SdpiTKoerGPEkQzxW38U/h120/arrow.gif) no-repeat 1px center}
.menu3Dflip ul.nav div.col1 {width:320px}
.menu3Dflip ul.nav div.col2 {width:630px}
.menu3Dflip ul.nav div.col3 {width:740px}
.menu3Dflip ul.nav li:hover div{-moz-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform: rotateX(0deg)}

Tempatkan kode berikut setelah <body> atau dimana saja sesuka hatimu :

<div id='menufixed'>
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='#' target='_blank' title='Tentang Saya'><b>My Diary</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='#' target='_blank' title='Sahabat Jadi Cinta'>PUISI: Sahabat Jadi Cinta</a></li>
<li><a href='#' target='_blank' title='Faktor Utama Penyebab Putus Cinta'>Faktor Utama Penyebab Putus Cinta</a></li>
</ul>
<ul class='colRight'>
<li><a href='#' target='_blank' title='Surat Untuk Sahabat'>Surat Untuk Sahabat</a></li>
<li><a href='#' target='_blank' title='PUISI : Pengorbanan Cinta'>Pengorbanan CINTA</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='TOP Artikel'><b>Artikel</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='#' target='_blank' title='Blogging Tips'>Blogging Tips</a></li>
<li><a href='#' target='_blank' title='CSS Widget'>CSS Widget</a></li>
<li><a href='#' target='_blank' title='Desain Template'>Template Design</a></li>
<li><a href='#' target='_blank' title='Efek Gambar'>Efek Gambar</a></li>
<li><a href='#' target='_blank' title='Informasi SEO'>SEO Informasi</a></li>
</ul>
<ul class='colRight'>
<li><a href='#' target='_blank' title='Tutorial Blog'>Tutorial Blog</a></li>
<li><a href='#' target='_blank' title='SEO Trik'>SEO Trik</a></li>
<li><a href='#' target='_blank' title='CSS Code'>CSS Code</a></li>
<li><a href='#' target='_blank' title='Efek Colection'>Efek Colection</a></li>
<li><a href='#' target='_blank' title='Kehidupan Sosial'>Kehidupan Sosial</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='My Account'><b>Profile</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#' target='_blank' title='Google Plus'>Google Plus</a></li>
<li><a href='#' target='_blank' title='Facebook'>Facebook</a></li>
<li><a href='#' target='_blank' title='Twitter'>Twitter</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='Arsip File Laman Page'><b>Arsip File</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='#' target='_blank' title='Jumping Text Effect'>Jumping Text</a></li>
<li><a href='#' target='_blank' title='Trembling Text Effect'>Trembling Text</a></li>
<li><a href='#' target='_blank' title='Animated Text Fill'>Animated Text</a></li>
</ul>
<ul class='colRight'>
<li><a href='#' target='_blank' title='Daftar Isi Blogger Dengan Navigasi'>Daftar Isi Blogger Dengan Navigasi</a></li>
<li><a href='#' target='_blank' title='Elegant Black Color'>Elegan Black Color For Sitemap Theme</a></li>
<li><a href='#' target='_blank' title='Black Red Light Theme'>Black Red Light Theme Sitemap Design</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='https://www.blogger.com/blogger.g?blogID=7626083369379555858' target='_blank' title='Follow My Blog'><b>Follow</b></a></li>
</ul>
<div style='text-align:left;position:absolute;position:fixed;top:0;left:5px;z-index:999;overflow:hidden'><img alt='Logo Blog' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8meXdkLWGXbK61DRGOVyYRNWq_EXxZGCnfYapiJ8um80G0qtc9sfF7An84F7OJzA6I3xZNuSdXkGjh5ZDV3uP5VuHoQ7luYlhJwbqWTAdUuBcJPDwl8Ib_CxESHJgFHCcpBhC7Rvwb3U/s28-no/' title='Web Design' width='40'/></div><div style='text-align:center;position:absolute;position:fixed;left:52px;z-index:999;overflow:hidden;color:white;font:bold 15px Verdana;margin-top:-36px;text-shadow:1px 2px 3px #111'>Amarajen</div>
</div>
</div>

Artikel Terkait