Jumat, 27 Mei 2011

Cara Membuat Dark Menu CSS3

Posted by silett di 12.54 Label: |

Comments







1. Login ke Akun Blogger
2. Rancangan,-->> edit html
3. Centang Expand Widget Template/download templet lengkap supaya punya backupan
4. Cari kode ]]></b:skin>
5. letakkan Kode CSS dibawah ini tepat diatas kode tersebut
/* Main Dark Menu Unordered List First Level Style */
ul.dark_menu {
list-style: none;
padding: 0;
font-family: Arial;
font-size: 14px;
line-height: 14px;
}

/* Clears all floated List Items */
ul.dark_menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* First Level List Items Style */
ul.dark_menu li {
float: left;
margin: 0 0 0 10px;
position: relative;
}

/* First List Item in First Level Style */
ul.dark_menu li:first-child {
margin: 0;
}


/* List Items Links Style */
ul.dark_menu li a, ul.dark_menu li a:link {
color: #161312;
text-decoration: none;
display: block;
padding: 10px 26px;

/* Text Shadow */
text-shadow: 0 1px 0 #4b433e;

/* Gradient Background */
background: #362f2c; /* Old browsers */
background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #362f2c 0%,#282321 100%); /* W3C */

/* Border Radius */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

/* Box Shadows */
-webkit-box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;
-moz-box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;
box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/* List Items Links Hover State Style */
ul.dark_menu li a:hover {
color: #73635e;

/* Text Shadow */
text-shadow: 0 1px 1px #000;

/* Gradient Background */
background: #282321; /* Old browsers */
background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* W3C */

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

/* List Items Links Active and Selected State Style */
ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #73635e;
background: #282321;

/* Text Shadow */
text-shadow: 0 1px 1px #000;

/* Box Shadows */
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/* Sub Menu Unordered List Second Level Style */
ul.dark_menu li ul {
display: none;
}
/* Sub Menu Unordered List Second Level Style
When Parent List Item is Hovered */
ul.dark_menu li:hover ul {
position: absolute;
display: block;
z-index: 1000;
left: 0;
top: 44px;
padding: 5px 0;
list-style: none;
background: #282321;

/* Box Shadows */
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;

/* Border Radius */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Before Second Level Unordered List Style */
ul.dark_menu li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;
}

/* Second Level Menu List Items Style */
ul.dark_menu li ul li {
float: none;
margin: 0 10px;
border-bottom: 1px solid #191614;
border-top: 1px solid #3a3230;
}

/* First List Item in Second Level Menu Style */
ul.dark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;
}

/* Last List Item in Second Level Menu Style */
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;
}
/* Second Level List Items Links Style */
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #73635e;
display: block;
background: transparent none;
padding: 10px 20px 10px 5px;
white-space: nowrap;

/* Text Shadow */
text-shadow: 0 1px 2px #000;

/* Box Shadows */
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0);
box-shadow: 0 0 0 rgba(0,0,0,0);

/* Border Radius */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

/* Second Level List Items Links Hover State Style */
ul.dark_menu li ul li a:hover {
text-decoration: underline;
background: #2a2523;
}

6. letakkan Kode HTML dibawah ini tepat dibawah kode <body>
<!-- Dark Menu Begin -->
<ul class='dark_menu'>
<li><a class='selected' href=''>Home</a></li>
<li>
<a href='#'>Back To</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href='#'>Back To Tutorial</a></li>
<li><a href='#'>Back To Tutorial</a></li>
<li><a href='#'>Back To Tutorial</a></li>
<li><a href='#'>Back To Tutorial</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li>
<a href='#'>Blog</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href='http://dj-site.blogspot.com/'>DJ Site</a></li>
<li><a href='http://dj-note.blogspot.com/'>DJ Note</a></li>
<li><a href='http://private-ebook.blogspot.com/'>E-Book</a></li>
<li><a href='http://review-movie-boxoffice.blogspot.com/'>Movie&#39;s</a></li>
<li><a href='http://sejarah-bangsa-kita.blogspot.com/'>History</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li><a href='mailto:djnand.dj@gmail.com'>Contact</a></li>
</ul>
<!-- Dark Menu End -->

7.simpan templet

Langganan: Posting Komentar (Atom)