Trik Komputer: Single Menu Pure CSS With Hover Effect

Sudah tidak tahu juga nih berapa postingan mengenai menu sudah Beben kasih :D (search saja deh yah) Menu yang ini cocok bagi sobat yang suka dengan minimalis dalam tampilan blognya. Hanya dengan mencantumkan satu link, dan ketika disorot akan muncul semua link yg ada disana ;)) Biasa sob hasil bloglang secara ganteng kalem ;)) ;) Belom kebayang kali yah kayak apa menu ini :D Baiklah, Beben akan kasih screenshot dolo biar terlihat jelas: Satu disorot cursor jadi banyak :P Ooopppsss...menu ini fixed posisi sob, jadi walau di scroll akan tetap keberadaannya :D

Kode CSS

#nav {
z-index: 10;
text-align: left;
_display:none;
position:fixed;
top:0;
right:30px;
font-family:Verdana;
color:#cbcbcb;
font-size:12px;
background-color:#a0f;
cursor:default;
}
#nav h3 {
font-weight:normal;
font-size:100%;
text-align:right;
padding:10px 10px 0;
margin:0;
height:25px;
color:#000;
}
#nav:hover h3 {
color:#fff;
}
#nav div.nav-section {
display: none;
padding: 4px;
color:#fff;
}
#nav:hover div.nav-section {
display: block;
}
#nav ul {
display:none;
background-color:#f9f9f9;
border:1px solid #ccc;
border-top-width:0;
padding:4px 8px;
margin:0;
}
#nav ul + ul {
border-bottom-width:3px;
}
#nav:hover ul {
display:block;
}
#nav li {
margin:3px 0;
list-style:none;
}
#nav a {
color:#556680;
text-decoration:none;
}
#nav a:hover {
color:#a00;
text-decoration:underline;
}
#nav span.nav-langs {
color: #888;
font-size: 7pt;
}
#nav span.nav-langs > a {
color: #888;
}

Kode HTML

Letakan didalam tag <body> Jangan sampai bentrok dengan tag yang lainnya!!!

<div id="nav"><br /><h3>Menu</h3><br /><div class="nav-section">ECMA-1 in detail</div><br /><ul><br /><li><a href="http://your-link.com">Chapter 1.</a> <span class="nav-langs">(<a href="http://your-link1.com">Sub a</a>, <a href="http://your-link2.com">Sub b</a>, <a href="http://your-link3.com">Sub c</a>).</span></li><br /><li><a href="http://your-link4.com">Chapter 2.</a> <span class="nav-langs">(<a href="http://your-link5.com">Sub a</a>, <a href="http://your-link6.com">Sub b</a>, <a href="http://your-link7.com">Sub c</a>).</span></li><br /><li><a href="http://your-link.com">Chapter 3.</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>, <a href="http://your-link.com">Sub c</a>).</span></li><br /><li><a href="http://your-link.com">Chapter 4.</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>).</span></li><br /><li><a href="http://your-link.com">Chapter 5.</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>).</span></li><br /><li><a href="http://your-link.com">Chapter 6.</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>).</span></li><br /><li><a href="http://your-link.com">Chapter 7</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>).</span></li><br /><li><a href="http://your-link.com">Chapter 8</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>).</span></li><br /><li><a href="http://your-link.com">Chapter 9</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>).</span></li><br /></ul><br /><br /><div class="nav-section">ECMA-2 in detail</div><br /><br /><ul><br /><li><a href="http://your-link.com">Chapter 0.</a></li><br /><li><a href="http://your-link.com">Chapter 1.</a></li><br /><li><a href="http://your-link.com">Chapter 2.</a></li><br /></ul><br /><br /><div class="nav-section">ECMA-3 in detail</div><br /><br /><ul><br /><li><a href="http://your-link.com">Note 1.</a></li><br /><li><a href="http://your-link.com">Note 2.</a></li>        <br /></ul><br /><br /><div class="nav-section">ECMA-4 in detail</div><br /><br /><ul><br /><li><a href="http://your-link.com">JavaScript. The Core.</a> <span class="nav-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>, <a href="http://your-link.com">Sub c</a>)</span></li><br /></ul><br /></div>

Select Text

Karena ID yg digunakan disini yaitu ID kebanyakan menu yaitu NAV! Maka jika tetap mau memakai menu ini harap diganti dengan ID yg lain supaya tidak terjadi clash!!!

Click Here for Get CSS Code

Kode CSS

#van {
z-index: 10;
text-align: left;
position:fixed;
top:0;
right:30px;
font-family:Verdana;
color:#cbcbcb;
font-size:12px;
background-color:#a0f;
cursor:default; _display:none;
}
#van h3 {
font-weight:normal;
font-size:100%;
text-align:right;
padding:10px 10px 0;
margin:0;
height:25px;
color:#000;
}
#van:hover h3 {
color:#fff;
}
#van div.van-section {
display: none;
padding: 4px;
color:#fff;
}
#van:hover div.van-section {
display: block;
}
#van ul {
display:none;
background-color:#f9f9f9;
border:1px solid #ccc;
border-top-width:0;
padding:4px 8px;
margin:0;
}
#van ul + ul {
border-bottom-width:3px;
}
#van:hover ul {
display:block;
}
#van li {
margin:3px 0;
list-style:none;
}
#van a {
color:#556680;
text-decoration:none;
}
#van a:hover {
color:#a00;
text-decoration:underline;
}
#van span.van-langs {
color: #888;
font-size: 7pt;
}
#van span.van-langs > a {
color: #888;
}

Kode HTML

<div id="van">
<h3>Menu</h3>
<div class="van-section">ECMA-1 in detail</div>
<ul>
<li><a href="http://your-link.com">Chapter 1.</a> <span class="van-langs">(<a href="http://your-link1.com">Sub a</a>, <a href="http://your-link2.com">Sub b</a>, <a href="http://your-link3.com">Sub c</a>).</span></li>

<li><a href="http://your-link4.com">Chapter 2.</a> <span class="van-langs">(<a href="http://your-link5.com">Sub a</a>, <a href="http://your-link6.com">Sub b</a>, <a href="http://your-link7.com">Sub c</a>).</span></li>
<li><a href="http://your-link.com">Chapter 3.</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>, <a href="http://your-link.com">Sub c</a>).</span></li>

<li><a href="http://your-link.com">Chapter 4.</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>).</span></li>
<li><a href="http://your-link.com">Chapter 5.</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>).</span></li>
<li><a href="http://your-link.com">Chapter 6.</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>).</span></li>

<li><a href="http://your-link.com">Chapter 7</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>).</span></li>
<li><a href="http://your-link.com">Chapter 8</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>).</span></li>
<li><a href="http://your-link.com">Chapter 9</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>).</span></li>

</ul>

<div class="van-section">ECMA-2 in detail</div>

<ul>
<li><a href="http://your-link.com">Chapter 0.</a></li>
<li><a href="http://your-link.com">Chapter 1.</a></li>
<li><a href="http://your-link.com">Chapter 2.</a></li>
</ul>

<div class="van-section">ECMA-3 in detail</div>

<ul>
<li><a href="http://your-link.com">Note 1.</a></li>
<li><a href="http://your-link.com">Note 2.</a></li>
</ul>

<div class="van-section">ECMA-4 in detail</div>

<ul>
<li><a href="http://your-link.com">JavaScript. The Core.</a> <span class="van-langs">(<a href="http://your-link.com">Sub a</a>, <a href="http://your-link.com">Sub b</a>, <a href="http://your-link.com">Sub c</a>)</span></li>

</ul>
</div>

Resource by: http://dmitrysoshnikov.com/

Trik Komputer

Rabu, 10 November 2010

Single Menu Pure CSS With Hover Effect

Kode CSS

Kode HTML

Kode CSS

Kode HTML

Tidak ada komentar:

Posting Komentar