Summer Vertical Menu

Πλαϊνό καλοκαιρινό μενού

ένα πλαϊνό μενού, στατικό, όμορφο, και εύκολο…το τροποποίησα, και σας το δίνω για να το βάλετε, εάν το blog σας έχει περιεχόμενο σχετικά με καλοκαίρι, παραλίες, διακοπές, Τουριστικά μέρη!!! DEMO θα βρείτε στο demo blog μου.


 
Το τροποποίησα επίτηδες για τέτοιου είδους περιεχόμενο.
Ο ΚΩΔΙΚΑΣ CSS: (Ο κώδικας που σας δίνω χρησιμοποιεί CSS3…οπότε το πρώτο μέρος μπαίνει ΠΑΝΩ από το ]]></b:skin> η βάλτε το εκεί που εγκαθιστούμε τους κώδικες css (δείτε φωτό)….

<!-- summer menu -->

#ballmenu body{
 font-size:14px;
 color:#666;
 background:#111 no-repeat;
 /* CSS3 Radial Gradients */
 background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
 background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
 }

#ballmenu li{
 list-style:none;
 height:39px;
 padding:2px;
 width:40px;
 }

#ballmenu span{
 /* Container properties */
 width:0;
 left:38px;
 padding:0;
 position:absolute;
 overflow:hidden;

/* Text properties */
 font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
 font-size:18px;
 font-weight:bold;
 letter-spacing:0.6px;
 white-space:nowrap;
 line-height:39px;

/* CSS3 Transition: */
 -webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
 -moz-transition: 0.25s;
 transition: 0.25s;
 }

#ballmenu a{
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgppMWzzKCIhkcuib9y5iFoJRfMnwNsDgig8s-79VuJDGvI8dJOE6llFFQ7K40eXx0pjayVzcYLK5InXBod5xCkb2ZXHiUL47ylq2J0zHe-9w3hJGtWRWHZoTQ1Hq9pB7ITCs2lLeuzPEk4/s190/summer%2520menu.gif') no-repeat;

height:39px;
 width:38px;
 display:block;
 position:relative;
 }

/* General hover styles */

#ballmenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
 #ballmenu a:hover{
 text-decoration:none;

/* CSS outer glow with the box-shadow property */
 -moz-box-shadow:0 0 5px #9ddff5;
 -webkit-box-shadow:0 0 5px #9ddff5;
 box-shadow:0 0 5px #9ddff5;
 }

/* Green shadow */

#ballmenu .boys { background-position:0 0;}
 #ballmenu .boys:hover { background-position:0 -39px;}
 #ballmenu .boys span{
 background-color:#ffffff;
 color:#3d4f0c;
 text-shadow:1px 1px 0 #99bf31;
 }

/* Blue shadow */

#ballmenu .about { background-position:-38px 0;}
 #ballmenu .about:hover { background-position:-38px -39px;}
 #ballmenu .about span{
 background-color:#ffffff;
 color:#223a44;
 text-shadow:1px 1px 0 #44a8d0;
 }

/* Orange shadow */

#ballmenu .services { background-position:-76px 0;}
 #ballmenu .services:hover { background-position:-76px -39px;}
 #ballmenu .services span{
 background-color:#ffffff;
 color:#5a3517;
 text-shadow:1px 1px 0 #d28344;
 }

/* Yellow shadow */

#ballmenu .portfolio { background-position:-114px 0;}
 #ballmenu .portfolio:hover{ background-position:-114px -39px;}
 #ballmenu .portfolio span{
 background-color:#ffffff;
 color:#604e18;
 text-shadow:1px 1px 0 #d8b54b;
 }

/* Purple shadow */

#ballmenu .contact { background-position:-152px 0;}
 #ballmenu .contact:hover { background-position:-152px -39px;}
 #ballmenu .contact span{
 background-color:#ffffff;
 color:#460f35;
 text-shadow:1px 1px 0 #d244a6;
 }

<!--end of summer menu -->

Ο ΚΩΔΙΚΑΣ Html/Javascript gadget :

 <!-- summer menu -->

<div style='position: fixed; top: 20%; left: 0%;'/>
 <ul id="ballmenu">
 <li>
 <a class="boys" title="ΑΡΧΙΚΗ" href="#">
 <span>Αρχική</span>
 </a>
 </li>

<li>

<a class="about" title="ΠΑΡΑΛΙΕΣ" href="#">
 <span>Παραλίες</span>
 </a>
 </li>

<li>
 <a class="services" title="ΔΙΑΣΚΕΔΑΣΗ" href="#">
 <span>Διασκέδαση</span>
 </a>

</li>

<li>
 <a class="portfolio" title="ΠΡΟΑΣΤΙΑ" href="#">
 <span>Προάστια</span>
 </a>
 </li>

<li>
 <a class="contact" title="ΤΟΥΡΙΣΜΟΣ" target="_blank" href="#">
 <span>Τουρισμός</span>
 </a>
 </li>
 </ul>
 </div>

ΕΠΕΞΗΓΗΣΕΙΣ:
1)ΟΠΟΥ  href=»#»  ΑΝΤΙΚΑΤΑΣΤΕΙΣΤΕ ΤΟ # ΜΕ ΤΗ ΔΙΕΥΘΥΝΣΗ URL ΤΗΣ ΕΤΙΚΕΤΑΣ Η ΣΕΛΙΔΑΣ
2)ΑΛΛΑΞΤΕ ΤΙΣ ΟΝΟΜΑΣΙΕΣ  «ΠΑΡΑΛΙΕΣ,  ΤΟΥΡΙΣΜΟΣ  κλπ»  ΜΕ ΤΙΣ ΔΙΚΕΣ ΣΑΣ
3)Φυσικά μπορείτε να βάλετε όλο το κώδικα σαν Html/Javascript gadget : ΟΜΩΣ ΠΡΟΣΕΞΤΕ: Τον κώδικα CSS θα τον βάλετε ανάμεσα στις φράσεις <style> …(ΚΩΔΙΚΑΣ CSS)…</style> (αλλιώς δεν θα λειτουργήσει)
4)ο κώδικας CSS, μπορεί να συγκρουστεί με τις ρυθμίσεις άλλου κώδικα css που έχετε στο blog σας, και να μη δουλέψει σωστά…αν συμβεί αυτό, μη το βάλετε…οι πιθανότητες είναι λίγες, αλλά υπάρχουν πάντα !!!