.png "English"){kind=small}
Τετάρτη 15 Μαρτίου 2017
Tooltip navigation menu bar
πρωτότυπο navigation bar widget!Μπαίνει οριζόντια στην σελίδα μας, είναι ελαφρύ
δεν καθυστερεί το άνοιγμα της, και διαθέτει hover tooltip effect όταν
κάνουμε mouseover με τον κέρσορα μας!
Η εγκατάσταση είναι απλή και
για να το εγκαταστήσετε και εσείς:
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει
επικολλήστε τον ακόλουθο κώδικα-->
..............................................................................................................................................................
<style type="text/css">
nav {
margin : 50px auto;
width : 100%;
}
menu {
border-radius : 3px;
}
menu:after , menu:before {
display : block;
content : ' ';
}
menu:after {
clear : both;
}
li {
list-style-type : none;
background : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);
float : left;
cursor : pointer;
padding : 3px 10px;
border-top : 2px solid rgba(200,200,255,0.5);
border-bottom : 2px solid rgba(50,50,50,0.4);
}
li:first-child {
border-radius : 5px 0 0 5px;
}
li:last-child {
border-radius : 0 5px 5px 0;
}
a {
display : block;
padding : 10px 13px;
font-size : 26px;
text-decoration : none;
border-radius : 5px;
position : relative;
top : 0;
color : #FFF;
transition : all .4s;
}
li:hover a {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
li a:after {
display : block;
content : '';
position : absolute;
top : 100%;
left : 42%;
border-style : solid;
border-color : transparent;
border-width : 5px 5px 0 5px;
transition : all .4s;
}
li:hover a:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
/*************************************/
.menu2 {
width : 100%;
}
.menu2 a {
font-family : georgia;
font-size : 14px;
font-style : italic;
text-transform : capitalize;
}
.menu2 li {
border-right : 1px solid rgba(200,200,255,0.5);
border-left : 1px solid rgba(40,40,40,0.2);
}
.selected {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
.selected:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
</style>
<nav>
<menu>
<li><a href="#">☀</a></li>
<li><a href="#">✈</a></li>
<li><a href="#">❄</a></li>
<li><a href="#">☎</a></li>
</menu>
</nav>
<nav class="menu2">
<menu>
<li><a href="#">ΤΙΤΛΟΣ</a></li>
<li><a href="#">ΤΙΤΛΟΣ</a></li>
<li><a href="#">ΤΙΤΛΟΣ</a></li>
<li><a href="#">ΤΙΤΛΟΣ</a></li>
<li><a href="#">ΤΙΤΛΟΣ</a></li>
</menu>
</nav>
....................................................................................................................................................
ΑΛΛΑΓΕΣ
Αντικαταστήστε όλα τα # με τις δικές σας διευθύνσεις urls!
TΙΤΛΟΣ: Εδώ βάζετε τον τίτλο σας!
☀
✈ Αντικαταστήστε τα εικονίδια με
❄ δικά σας, η εναλλακτικά αν δεν θέλετε
☎ εικονίδια βάλτε τίτλους!
Μόλις τελειώσετε Αποθήκευση και έτοιμοι!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to avdhootblogger.com
Edit by
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου