Tips ini Membuat top menu anda bisa melayang seperti di pake blog ini
Biar Lebih Jelas Lagi Lihat Gif di bawah ini
Copy Kode Di bawah ini pastekan di atas ]]></b:skin> atau </style>
/* Top Menu
----------------------------------------------- */
#top-menuwrapper {
background-color: #fff;
box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 2px 4px rgba(163, 163, 163, 0.4);
height: 60px;width: 100%;position: fixed;top: 0;left: 0;z-index: 999;overflow: hidden;}
#top-menuwrap, #top-menuwrap2{width:1100px;margin:10px auto;}
#top-menu{width:100%}
#top-menu ul{list-style: none;}
#top-menu ul li{float:right}
#top-menu ul li a{font-family:'Oswald', Arial, sans-serif;line-height:16px;padding:5px 0;margin-left:5px;color:#666;font-size:14px;text-transform:uppercase;display:block;text-decoration:none;padding:6px 14px;border-radius:4px}
#top-menu ul li a:hover{color:#fff;background:#2980b9;border-bottom:3px solid #1C567D}
.logo{width:250px;float:left;font-family:'Montserrat', Oswald;font-size:160%;text-transform:uppercase;font-weight:300;}
#top-menu ul li a .current{background:#2980b9;color:#fff;border-bottom:3px solid #1C567D}
.logo-obah{margin-top:14px}
.logo a{color:#fff;text-decoration:none;margin-top:-5px}
.logo a:hover{color:#fff;text-decoration:none}
.logo img{margin-top:-6px;margin-left:-16px}
#top-menuwrapper{-webkit-animation:menur 4s;-moz-animation:menur 4s;}
@-webkit-keyframes menur{from{-webkit-transform:translate(0px,-1000px)}to{-webkit-transform:translate(0px,0px)}}
@-moz-keyframes menur{from{-moz-transform:translate(0px,-1000px)}to{-moz-transform:translate(0px,0px)}}
.logo-obah{border:none;display:block;width:470px;height:50px;position:relative;text-decoration:none}.logo-obah span,.logo-obah span:before,.logo-obah span:after{content:"";display:block;position:absolute;top:-9px;bottom:10px;left:0;font:normal normal 0/0 a;color:transparent;text-shadow:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.logo-obah .terusan{top:-4px;font:normal normal 43px/100% "Arial Narrow",Arial,Sans-Serif;-webkit-transition:all .80s ease-in-out .1s;-moz-transition:all .80s ease-in-out .1s;-ms-transition:all .80s ease-in-out .1s;-o-transition:all .80s ease-in-out .1s;transition:all .80s ease-in-out .1s}.logo-obah .huruf-a{font:normal normal 40px/100% "Arial";color:#2980B9;left:0;font-size:41px;top:-5px;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);border:4px solid #2980B9;padding:0 10px 5px 10px;margin-top:-2px}.logo-obah + h1{display:none}.logo-obah:hover .terusan{color:#2980B9;left:60px}Selanjutnya Copy Kode Di bawah ini pastekan di bawah <body>
<li><a class='current' href='http://alessia-sharing.blogspot.co.id/p/sitemap.html' target='_blank' title='Daftar Isi Aldhinya Web'>Daftar Isi</a></li>
<li><a class='current' href='http://alessia-sharing.blogspot.co.id/p/blog-page_11.html' target='_blank' title='Daftar Isi Aldhinya Web'>Partner Blog</a></li>
</ul>
</div>
<a class='logo-obah' href='/' target='_blank'><span class='huruf-a'>A</span><span class='terusan'>lessia Sharing</span></a>
</div>
</div>
Semoga Bermanfaat
0 Response to "Cara Memasang Top Menu Melayang Di blog"
Post a Comment