Λαμπερό οριζόντιο μενού με CSS3


Βάλτε στο blog σας ένα όμορφο μενού.

Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα μπλε και τα πορτοκαλί γράμματα με αυτά της επιλογής σας και πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("http://1.bp.blogspot.com/-R88ZAal-aM4/UTzJEpxNAGI/AAAAAAAAN5c/vIn-YCJjTpA/s320/menu-blogger.PNG") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://tetsitech.blogspot.com" style="position: absolute;z-index:-11;"><img src="http://3.bp.blogspot.com/-X7crs70iwiI/UTzJEsPJOaI/AAAAAAAAN5U/BqBwshCw8Z0/s320/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://tetsitech.blogspot.gr/">Αρχική</a></li>
        <li><a href="http://tetsitech.blogspot.gr/search/label/Blogger">Blogger</a></li>
        <li><a href="http://tetsitech.blogspot.gr/search/label/Sites">Ιστοσελίδες</a></li>
        <li><a href="http://tetsitech.blogspot.gr/search/label/Widget">Widget</a></li>
        <li><a href="http://tetsitech.blogspot.gr/search/label/Template">Template</a></li>
        <li><a href="http://tetsitech.blogspot.gr/search/label/Lessons">Μαθήματα</a></li>
        <li><a href="http://tetsi.blogspot.gr/">About</a></li>
    </ul>
</div>

0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ