Menu Blog dengan Membentuk Pita

Menu Blog dengan Membentuk Pita

Menu Blog dengan tampilan seperti tali pita dan jika saat disentuh mouse pita tersebut akan nampak terlihat melipat sendiri keatas dan pokoknya keren gan.. anda bisa mencobanya di blog agan. berikut ini saya share cara membuat menu tersebut, dengan menggunakan tag CSS dan HTML. 

Tag HTML nya

<div class='menu'> <a href='#'><span>Home</span></a> <a href='#'><span>Menu 1</span></a> <a href='#'><span>Menu 2</span></a> <a href='#'><span>Menu 3</span></a> <a href='#'><span>Menu 4</span></a> </div>

Tag CSSnya

<div id="sliderSK"> <style type="text/css"> .menu:after, .menu:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #00BFFF;} .menu:after { border-right-color:transparent;} .menu:before { border-left-color:transparent;} .menu a:link, .menu a:visited { color:#fff; text-decoration:none; float:left; height:3.5em; overflow:hidden;} .menu span { background: #00BFFF; display:inline-block; line-height:3em; padding:0 1em; width:80px; font-weight:bold; margin-top:0.5em; position:relative; text-align:center; -webkit-transition: background, margin 0.2s; -moz-transition: background, margin 0.2s; -o-transition: background-color, margin-top 0.2s; transition: background, margin 0.2s;} .menu a:hover span { background:#1E90FF; margin-top:-3;} .menu span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );} .menu span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );} </style>

File nya dapat dilihat hasilnya  dan dapat diunduh berikut ini :

Demo                                  Unduh