A Simple Blogger Responsive Menu - Setelah beberapa waktu lalu berbagi tutorial dalam membuat Button Dengan CSS3 saatnya kembali berbagi , Kali saya akan share sebuah tutorial yang simple tentang cara membuat menu responsive yang hanya menggunakan CSS . Menu kali ini terlihat sederhana dengan dominasi warna kehitaman . Untuk lebih jelasnya silahkan brada cek demonya .
Kustomisasi
- Masuk pada Edit HTML
- Cari kode ]]></b:skin>
- Masukan kode dibawah ini , dan tempatkan diatas kode ]]></b:skin>
/* A simple, css only, (some-what) responsive menu */
/* tiny reset */
* { padding: 0; margin: 0; }
body {
background: #ccc;
font-family: oswald, arial, serif;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}
.wrap {
display: inline-block;
-webkit-box-shadow: 0 0 70px #fff;
-moz-box-shadow: 0 0 70px #fff;
box-shadow: 0 0 70px #fff;
margin-top: 40px;
}
/* a little "umph" */
.decor {
background: #6EAF8D;
background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: linear-gradient(left, white 50%, #6EAF8D 50%);
background-size: 50px 25%;;
padding: 2px;
display: block;
}
a {
text-decoration: none;
color: #fff;
display: block;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
}
/* clear'n floats */
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #2B2B2B;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
box-shadow: 2px 2px 3px #888;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
/* prime */
ul.primary li a {
display: block;
padding: 20px 30px;
border-right: 1px solid #3D3D3D;
}
ul.primary li:last-child a {
border-right: none;
}
ul.primary li a:hover {
color: #000;
}
/* subs */
ul.sub {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 35%;
display:none;
}
ul.sub li {
float: none;
margin: 0;
}
ul.sub li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 30px;
}
ul.sub li:last-child a {
border-bottom: none;
}
ul.sub li a:hover {
color: #000;
background: #eeeeee;
}
/* sub display*/
ul.primary li:hover ul {
display: block;
background: #fff;
}
/* keeps the tab background white */
ul.primary li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.primary li:hover > a{
color: #000;
}
@media only screen and (max-width: 600px) {
.decor {
padding: 3px;
}
.wrap {
width: 100%;
margin-top: 0px;
}
li {
float: none;
}
ul.primary li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
}
ul.primary li:hover ul {
display: block;
background: #272727;
color: #fff;
}
ul.sub {
display: block;
position: static;
box-shadow: none;
width: 100%;
}
ul.sub li a {
background: #485f6f;
border: none;
color: #8B8B8B;
}
ul.sub li a:hover {
color: #ccc;
background: none;
}
}
Masih dalam modus Edit HTML , untuk menempatkan menu diatas header brada cari kode <header> dan tempatkan kode dibawah ini tepat diatas kode <header> .
<div class="wrap">
<span class="decor"></span>
<nav>
<ul class="primary">
<li>
<a href="">Action Blog</a>
<ul class="sub">
<li><a href="">Bulldog</a></li>
<li><a href="">Mastiff</a></li>
<li><a href="">Labrador</a></li>
<li><a href="">Mutt</a></li>
</ul>
</li>
<li>
<a href="">Action Blog</a>
<ul class="sub">
<li><a href="">Tabby</a></li>
<li><a href="">Black Cat</a></li>
<li><a href="">Wrinkly Cat</a></li>
</ul>
</li>
<li>
<a href="">Action Blog</a>
<ul class="sub">
<li><a href="">Humming Bird</a></li>
<li><a href="">Hawk</a></li>
<li><a href="">Crow</a></li>
</ul>
</li>
<li>
<a href="">Action Blog</a>
<ul class="sub">
<li><a href="">Brown Horse</a></li>
<li><a href="">Race Horse</a></li>
<li><a href="">Tall Horse</a></li>
</ul>
</li>
</ul>
</nav>
</div>
Mudah-mudahan beruntung .
source : Freebiesbug.com
source : Freebiesbug.com
saya liat demo nya dulu deh sob. ^^
BalasHapusmonggo sob !!
Hapusnulis linknya begini bro :d
BalasHapusjsfiddle.net/RulyNakula/S82e4/show
bner kang Beben, kalau diliat di link ini jadi kelihatan menu kerennya. :D
Hapusbisi sakalian bade di dit kang ben hehe
HapusIya sob mendingan digituin ah
HapusKeren nih sob... kapan kapan saya coba terapin... (h)
BalasHapusoks sob :)
Hapusbeuuhhh ganteng blogna.. ngan nuansana asa di blog sayah wkwkkwkwk :)
BalasHapushahaha biasa rada niron embet kang
Hapussakedap dai ge robah gera hehe !!!
tong robah2 wae desain.. lieuuur :)
Hapushaha nyaeta kang teu kaop ningali nu batur sok hoyong nyobian ... :yaya:
Hapuskebetulan lagi ngoprek menu, cuman sampe sekarang belom sempurna, maklum hatiku kali ini sedang GALAU....;o)
BalasHapuswalah eta meni galau .. b-(
HapusPara master udah pd ngumpul..sy ktinggalan tumpengnya dong... Hehe
BalasHapusKeren...lanjutin kang Rul.. :)
iya nih mas bud telat datang'y hehe ...
BalasHapusDateng telat...jgn di setrap ya kang...hehe :)
Hapusgak dong paling suruh jongkok 4 malem haha
Hapuskang.. tina emot sigana yeuh, pas masuk atau akses halaman bijil ieu :
BalasHapushttp://1.bp.blogspot.com/-C-6K8B109fE/UkzBPo8QflI/AAAAAAAAFsQ/qqHgAdkFifA/s1600/duniaradio.png
Sumuhun kang js comment milik mkr ...
Hapuskeren euy, hampura karak bisa amengan, hehhehe
BalasHapusdihampura pisan kang :D
Hapusmakin nyentrik kang blogna, warna temanya ganti yah.. makin adem uyyy
BalasHapusSedikit di poles mas pake nyontek hihi
Hapusjamunya mantap ah, assoy nih kang..
BalasHapuspolesannya manjur hihi
jamu sedep rapet mas haha
Hapuskeren dan simpel banget menunya kang...
BalasHapusKapan-kapan saya coba ah...
Monggo sob .. sekarang juga boleh hehe
Hapusblon update!!!
BalasHapusIya nih kang ben ... nyari-nyari nu rada aneh .. eh hese ning
HapusBagus soalnya sudah dilengkapi versi selain desktop
BalasHapus