بِسْــــــــــــــــمِ ï·²ِالرَّØْÙ…َÙ†ِ الرَّØِيم
Selamat sore sobat.... di kesempatan ini
KangJuns mau mencoba memperjelas tentang
bikin menu Horizontal yang melayang silahkan
LIHAT DEMO nya.
Adapun cara nya sebagai berikut:
Seperti biasa sobat masuk dulu ke Blogger sobat,,pilih TEMPLATE-Edit TEMPLATE cari code seperti ini
]]></b:skin> setelah ketemu coppy code di bawah ini lalu paste kan tepat di atas
]]></b:skin>
#sticky1 { position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit; _top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }#toppic {width:1500px;height:30px;background:#2c2c2c;border-top:0px solid #444;margin:0 auto;padding:0;overflow:hidden;text-shadow:1px 1px 2px #002851}
#topwrapper {width:1500px;height:30px;margin:0 auto;padding:0}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {border-right:1px solid #444;border-left:1px solid #111;text-align:left;display: block;text-decoration: none;padding:6px 12px 8px;font:12px Arial;text-transform:none;color:#eee;}
#top a:hover {background:#111;}
#top a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-djWDhyw67fhwFqeOXtBNxCSBdPhct0UurFqD8rcTylBrZIyAFRfVKsED3F9NvKrm7oVX-ALqD6udp8HjSukA2B2B7oGawVpzgWJd5VVUYQPaWQ_UipQoNL8rM8afiDuY17EVB2Y3X0/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 6px 24px 8px 12px;background-position: right center;}
#top li {float: left;position: relative;}
#top li {position: static; width: auto;}
#top li ul, #top ul li {width:240px;}
#top ul li a {text-align:left;padding: 6px 10px;font-size:13px;font-weight:normal;text-transform:none;font-family:Arial, sans-serif;border:none;}
#top li ul {z-index:100;position: absolute;display: none;background-color:#111;margin-left:-60px;padding:10px 0;-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#top li ul li {width:120px;float:left;margin:0;padding:0}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {color:#ddd;background-color:transparent;text-decoration:none;}
#top ul a:hover {text-decoration:underline!important;color:yellow}
Langkah selanjut ya sobar cari code
</body> lalu coppy code di bawah ini dan pastekan di atas code
</body>
<div id='sticky1'>
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
<li><a href='/'>Sub menu 5</a></li>
<li><a href='/'>Sub menu 6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 3</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
<li><a href='/'>Sub menu 5</a></li>
<li><a href='/'>Sub menu 6</a></li>
<li><a href='/'>Sub menu 7</a></li>
<li><a href='/'>Sub menu 8</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
</div>
</div></div>
Ganti
# ,
/ denagan
link menu sobat
Lalu Simpan template dan lihat Hasil nya,,,semoga bermanfa'at,
Posted by
Unknown
02:51
Home
