Menu Dengan Bakground radial gradient

Menu Dengan Bakground radial gradient

Menu dengan tampilan background pada saat disentuh mouse dan pada link halaman rumahnya dengan background radial background yaitu background gradient (perpaduan warna) membentuk melingkar (lingkaran). baiklah, langsung saja kita menuju topik nya. kode atau skrip untuk membuat  menu tersebut adalah sebagai berikut :

Tag HTML nya

div id='menufixed'> <div class="wrapper"> <div class="container"> <ul class="menu" > <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 @insic</a></li> </ul> </div> </div>

Tag CSS nya

<style type="text/css"> .wrapper {margin: 0; padding: 0; width: 100%; height: 40px; background : #464646; background : -webkit-linear-gradient(top, rgb(168,168,168) 20%, rgb(69,69,69)); background : -moz-linear-gradient(top, rgb(168,168,168) 20%, rgb(69,69,69)); border-bottom: 3px solid blue; position: relative; margin-bottom: 30px; } ul { margin: 0; padding: 0; } ul.menu { height: 40px; border-left: 1px solid rgba(0,0,0,0.3); border-right: 1px solid rgba(255,255,255,0.3); float:left; font-weight:bold; } ul.menu li { list-style: none; float:left; height: 39px; 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 40px 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; text-decoration:none; color: Gainsboro; line-height: 39px; background : -webkit-linear-gradient(top, rgb(168,168,168) 20%, rgb(69,69,69)); background : -moz-linear-gradient(top, rgb(168,168,168) 20%, rgb(69,69,69)); -webkit-transition-property: background; -webkit-transition-duration: 7ms; -moz-transition-property: background; -moz-transition-duration: 7ms; } ul li a:hover { background: transparent none; } ul li.active a{ background: -webkit-gradient(radial, 50% 50%, -100, 100% 0%, 100, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); background: -moz-radial-gradient(center 40px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); } </style>

File nya dapat dilihat hasilnya  dan dapat diunduh berikut ini :

Demo                                  Unduh