Ads 468x60px

Παρασκευή, 5 Φεβρουαρίου 2016

CSS Arrow Underline Menu

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα οριζόντιο bar menu για τα
blog μας!Είναι καθαρό (clean) χωρίς borders και διαθέτει ένα πολύ απλό hover 
underline effect όταν κάνουμε mouseover.Όταν πηγαίνουμε πάνω σε έναν τίτλο
του μενού υπογραμμίζεται αυτομάτως!




Δείτε εδώ το DEMO


Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτό

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--
.............................................................................................................................................................

<style>

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:3px solid purple; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent purple transparent; /* create up arrow */
}

</style>
<ul class="arrowunderline">
<ul><li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>
..............................................................................................................................................................
ΑΛΛΑΓΕΣ 

ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!
ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!
Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to dynamicdrive.com


Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog