Ads 468x60px

Τετάρτη, 21 Ιουνίου 2017

Dashed Rich Navigation Menu Bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε και πάλι μια
παραλλαγή ενός widget  με navigation bar σε τρία χρώματα!Διαθέτει hover tooltip effect
όταν κάνουμε mouseover με τον κέρσορα μας, μπαίνει οριζόντια στην σελίδα μας, και
είναι και αυτό ελαφρύ με κώδικα Css!










Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

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

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

..............................................................................................................................................................
<style type="text/css">
#menu2 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.2em;
border:1px solid #000;
border-left:none;
float:left;
clear:both;
margin:20px;
border:5px dashed #fff;
}
#menu2 ul li{
float:left;
}
#menu2 ul li a{
display:block;
text-decoration:none;
background-color:#f0f0f0;
padding:5px 10px;
color:#666;
width:140px;
}
#menu2 ul li a span{
display:block;
text-align:center;

}
#menu2 ul li a span.title{
}
#menu2 ul li a:hover span.title{
color:#000;
}
#menu2 ul li a span.text{
font-size:12px;
font-style:italic;
padding:0px 5px;
border:1px solid #f0f0f0;
}
#menu2 ul li a:hover span.text{

}
#menu2 ul li a:hover span.text{
border:1px inset #ccc;
background-color:#fff;
}

</style>


<div id="menu2">
<ul><li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
<li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
<li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
<li><a href="URL">
<span class="title">ΤΙΤΛΟΣ</span>
<span class="text">ΚΕΙΜΕΝΟ</span>
</a>
</li>
</ul>
</div>
...........................................................................................................................................
ΑΛΛΑΓΕΣ
URL -- Εδώ βάζετε το λινκ της διεύθυνση σας
ΤΙΤΛΟΣ --Εδώ βάζετε τον τίτλο του εικονιδίου
ΚΕΙΜΕΝΟ -- Εδώ βάζετε την λέξη που θα φαίνεται στο αναδυόμενο εφέ  

Αποθήκευση και έτοιμοι!


Καλή επιτυχία!!!


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




 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog