Hampir menuju bulan puasa nih bahkan dalam hitungan hari lagi untuk itu sebelumnya saya mau mengucapkan Selamat Menunaikan Ibadah Puasa :D dan minta maaf lahir batin :D.
Dalam mengawali libur menjelang bulan ramadhan saya mau share tutorial menu navigasi Slick Menu dengan CSS3 dalam menu ini ada keistimewaan sendiri berupa hover biru yang menyerupai cahaya dalam penerapannya tidak terlalu sulit cukup tambahkan HTML pada add gadget HTML/javascript saja.
View Demo

Untuk kode CSS bisa diletakkan diatas ]]></skin> atau bisa juga menggunakan <style>CSS</style>


CSS

.wrapper {
    width: 100%;
    height: 80px;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    position: relative;
    margin-bottom: 30px;
}

ul {

    margin: 0;
    padding: 0;
}


ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}


ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }


ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }


ul li a:hover {
    background: transparent none;
}


ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}


HTML

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>

Labels: ,

3 Komentar:

Anonymous Jefry said on October 10, 2012 at 1:56 PM 

dengan memberi efek dari scriupt css, link menu jadi makin menarik
terima kasih untuk tutorialnya

Blogger setya adii wibowo said on December 10, 2012 at 1:25 AM 

mantab,

visit http://goodshare2us.blogspot.com/

Anonymous airport pickup w2 said on March 5, 2013 at 5:18 PM 

I am very thankful to all your team for sharing such inspirational information.

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger