Mas Pardi Jadul

Mari kita membahas lagi tentang cara membuat menu navigasi dengan css tanpa java script, tentunya agar tidak membebani loading blog kita, saya sendiri sebenarnya paling suka widget atau apa yang tanpa menggunakan java script,namun tetep enak dipandang ketika kita mendesign suatu blog.

Tapi kelebihan menggunakan java script ditambah jquery pastinya menghasilkan efek yang keren, untuk kali ini saya tidak membahas hal tersebut.

Oke langsung aja mari kita belajar sampai memori kita penuh.
Sebelum memulai membuat menu jangan lupa template harus ada atau menggunakan font awesome.

Takud kena render css dari font awesome? Baca artikel ini untuk cara render css.

CSS CTRL+C DI b:skin or style :

/* Pure Mas Pardi */
#puremaspardicss3 a,#puremaspardicss3 li,#puremaspardicss3 ul{list-style:none;margin:0;padding:0;border:0;line-height:1;font-family:Lato,sans-serif}#puremaspardicss3{border:1px solid #0065b4;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;width:auto}#puremaspardicss3 ul{zoom:1;background:#4eb1ff;background:-moz-linear-gradient(top,#4eb1ff 0,#1b9bff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4eb1ff),color-stop(100%,#1b9bff));background:-webkit-linear-gradient(top,#4eb1ff 0,#1b9bff 100%);background:-o-linear-gradient(top,#4eb1ff 0,#1b9bff 100%);background:-ms-linear-gradient(top,#4eb1ff 0,#1b9bff 100%);background:linear-gradient(top,#4eb1ff 0,#1b9bff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);padding:5px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}#puremaspardicss3 ul:before{content:'';display:block}#puremaspardicss3 ul:after{content:'';display:table;clear:both}#puremaspardicss3 li{float:left;margin:0 5px 0 0;border:1px solid transparent}#puremaspardicss3 li a,#puremaspardicss3 li.active{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px}#puremaspardicss3 li a{border-radius:5px;padding:8px 15px 9px;display:block;text-decoration:none;color:#fff;border:1px solid transparent;font-size:16px}#puremaspardicss3 li.active{border-radius:5px;border:1px solid #4eb1ff}#puremaspardicss3 li.active a,#puremaspardicss3 li:hover{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px}#puremaspardicss3 li.active a{border-radius:5px;display:block;background:#0082e7;border:1px solid #0065b4;-moz-box-shadow:inset 0 5px 10px #0065b4;-webkit-box-shadow:inset 0 5px 10px #0065b4;box-shadow:inset 0 5px 10px #0065b4}#puremaspardicss3 li:hover{border-radius:5px;border:1px solid #4eb1ff;transition:.4s;color:#fff;font-size:20px;text-decoration:none;padding:0 10px;margin:0 10px}#puremaspardicss3 li:hover a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:block;background:#0082e7;border:1px solid #0065b4;-moz-box-shadow:inset 0 5px 10px #0065b4;-webkit-box-shadow:inset 0 5px 10px #0065b4;box-shadow:inset 0 5px 10px #0065b4}

Html CTRL+C diletakkan bebas sesuai kemauan ;

<div id="puremaspardicss3">
<ul>
<li><a href="/"><i class="fa fa-fw fa-home"></i> Beranda</a></li>
<li><a href="/"><i class="fa fa-fw fa-list-ul"></i> List</a></li>
<li><a href="/"><i class="fa fa-fw fa-bookmark"></i> Sitemap</a></li>
<li><a href="/"><i class="fa fa-fw fa-phone"></i> About</a></li>
<li><a href="/"><i class="fa fa-fw fa-print"></i> Print</a></li>
<li><a href="/"><i class="fa fa-fw fa-envelope-o"></i> Email</a></li>
</ul>
</div>

"Hidup Seperti Ibarat sebuah CSS kita bisa mengubah atau memberi warna yang inddah sesuai keinginan kita namun kalau kita tahu akan menggunakan CSS tersebut"

Demo Menu