Floating menu – Αναπτυσσόμενο μενου
Νέοι bloggers γεια σας...βρήκα ενα πολύ όμορφο, πρακτικό και εύκολο μενου, που πιάνει λίγο χώρο, γιατί αναπτύσσεται μόλις περάσει από πάνω του το βελάκι από το ποντίκι...είναι στατικό, και όταν ρολάρει στη σελίδα σας ο επισκέπτης, αυτό είναι πάντα εμφανές και έτοιμο να ανοίξει...Δεν αργεί το άνοιγμα της σελίδας σας, γιατί αποτελείται από κώδικες CSS και HTML, και δεν περιέχει λινκ φωτογραφίας....Ο Κώδικας CSS (που μπαίνει ΠΡΙΝ ΤΟ : ]]></ b: skin> )
[ δηλαδή μπαίνουμε στο Σχεδίαση => Επεξεργασία HTML, και με crtl F βρίσκουμε τη φράση ]]></ b: skin> ]
#bmenu{
position:fixed;
left:5px;
top:5px;
background-color:#236C95;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FF0;
background-color:#95CAFF;
margin:15px 0;
padding:0 15px;}
#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#00F;
text-decoration:none;
font-size:14px;}
#bmenu li a:hover{
color:#F00;}
#bmenu:hover{
z-index:5;
height:175px;
***Αν θέλετε αλλάξτε τις τιμές με κόκκινο που ορίζουν που θα βρίσκεται το menu...με μπλε γράμματα είναι το χρώμα, και στο τελείωνα του κώδικα με μπλε γράμματα είναι το ύψος , το οποίο θα μεγαλώσετε ανάλογα με τον αριθμό των link που θα βάλετε.....!!!!
ΠΑΤΗΣΤΕ ΑΠΟΘΗΚΕΥΣΗ.....
Πηγαίνετε τώρα στο Σχεδίαση => Στοιχεία Σελίδας, και βάλτε το κώδικα html σαν HTML/Javascript...
O ΚΩΔΙΚΑΣ HTML:
<div id="bmenu"><h3> OPEN MENU </h3>
<ul><li><a href="#" title="ΑΡΧΙΚΗ" target="_blank">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</a></li>
<li><a href="#" title="......" target="_blank">******</a></li>
<li><a href="http://www.facebook.com/?ref=home/" target="_blank" title="Facebook">FACEBOOK</a></li>
</ul></div>
***Με πράσινο φόντο, σας έχω σημαδέψει το κώδικα που θα επαναλάβετε, αν πρόκειται να βάλετε πάνω από 3 link.....
***Φυσικά όπου βλέπετε το # θα βάζετε το link της σελίδας που θα ανοίγει
***Το target="_blank" το έχει για να ανοίγει το link σε νέο παράθυρο....αν θέλετε, βγάλτε το....
***Μη ξεχάσετε, αν βάλετε πολλά link να αυξήσετε το ύψος του menu στο κώδικα css
Πηγή: Thanks to : blogbego-creation.blogspot.com/
