jendelablog.wordpress.com

budiscyan weblog area's

Dropdown Navigation Menu

Sudah banyak yang memposting trik ini, saya juga pernah mamakai trik ini. Dulu
saya mendapatkan tutorial semacam ini dari laptopmini. tapi sayang sekarang konten-konten di sana sudah di arsipkan oleh sang pemilik.

sekaligus menjawab pertanyaan dari sdr/i simplysimpler di salah satu journal saya.
Untuk itu tidak ada salahnya saya menuliskan kembali apa yang telah saya pelajari. Berikut Kode-nya;

CSS.menu{
max-width:900px;
position:absolute;
top:200px;
left:300px;
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:georgia;
font-size:14px;
font-weight:bold;
color:#8e8e8e;
}
.menu ul{
background:#E8E8E8;
height:40px;
list-style:none;
border-bottom:3px solid #990000;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#555555;
display:block;
font-weight:bold;
line-height:40px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
filter:alpha(opacity=95);
opacity:0.95;
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
height:auto;
position:absolute;
width:190px;
z-index:200;
display:none;
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:190px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0 10px 0 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:#990000;
color:#ffffff;
}

  • Kode di atas di letakkan di Custom CSS.
  • Text yang berwarna merah berfungsi untuk mengatur posisi menu.

HTML<div class=”menu”>
<ul>
<li><a href=”xxx.multiply.com” id=”current”>Home</a></li>
<li><a href=”http://xxx.multiply.com/profile”>About</a></li&gt;
<li><a href=”http://xxx.multiply.com/products”>Product</a&gt;
<li><a href=”#”>Gallery</a>
<ul>
<li><a href=”http://xxx.multiply.com/photos”>Photos</a></li&gt;
<li><a href=”http://xxx.multiply.com/music”>Music</a></li&gt;
<li><a href=”http://xxx.multiply.com/videos”>Videos</a></li&gt;
<li><a href=”http://xxx.multiply.com/tag/YOUR-TAG-ID”>Other</a></li&gt;
</ul> </li>

<li><a href=”http://xxx.multiply.com/blog”>Blog</a&gt;
<ul>
<li><a href=”http://xxx.multiply.com/journal”>Journal</a></li&gt;
<li><a href=”http://xxx.multiply.com/notes”>Notes</a></li&gt;
<li><a href=”http://xxx.multiply.com/tag/YOUR-TAG-ID”>Testimonial</a></li&gt;
<li><a href=”http://xxx.multiply.com/reviews”>Reviews</a></li&gt;
<li><a href=”http://xxx.multiply.com/recipes”>Recipes</a></li&gt;
<li><a href=”http://xxx.multiply.com/market”>Market</a></li&gt;
<li><a href=”http://xxx.multiply.com/links”>More Articles</a></li>
</ul></li>

<li><a href=”http://xxx.multiply.com/guestbook”>Guestbook</a></li&gt;

</ul>
</div>

  • kode HTML di atas di copy ke Sidebar kalau di page title akan menimbulkan jejak pada tab title di browser anda.
  • text di belakang http:// bisa anda ganti sendiri dengan url link anda.

Selamat Mecoba.

*credit image to: http://www.bijusubhash.com/ and http://www.taxitariff.co.uk

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Information

This entry was posted on 20 Februari 2012 by in artikel.

Kategori

Blog Statistic

  • 21,292 hits

Contact

%d blogger menyukai ini: