Πρώτα όμως θα σας δώσω 2-3 tips για τους κώδικες css...
1...ένας κώδικας css μπαίνει πάντα ΠΑΝΩ/ΠΡΙΝ από τη φράση </head> (το κλείσιμο του <head>....), η ΠΑΝΩ/ΠΡΙΝ τη φράση
]]></b:skin>
2...ένας κώδικας css ξεκινά συνήθως και πάντα με τη λέξη <style> και τελειώνει με τη λέξη </style>.(όταν τον βάζουμε αναλυτικά πάνω από το </head>)+(εκφράζει πάντα τη σχεδίαση-εμφάνιση ενός gadget η widget).
3...πολλές φορές μπορείτε να ενώσετε όλα τα μέρη του κώδικα (css-js-div) που σας δίνω από ένα μενού, και να τα βάλετε σαν gadget => HTML/JavaScript ...μπορεί όμως να "συγκρουστούν" 2 κώδικες css, και να αλλάξει η εμφάνιση του ενός script...σε αυτή τη περίπτωση, καλό είναι να βγάλετε τον ένα κώδικα από το blog σας...βέβαια όσοι ξέρουν μπορούν να τον αλλάξουν και να διαφοροποιήσουν την εμφάνιση του ενός κώδικα...αυτό κάνω πολλές φορές όταν σε μία σελίδα με πολλά demo, συγκρούονται οι κώδικες css..!!!!
4...ένας κώδικας css, μπορεί να μπει στο HTML του blog σας, αναλυτικά, η να τον "ανεβάσουμε" σε μια "host" σελίδα δική μας, και να βάλουμε στο blog μας , μόνο τη διεύθυνση url του...(αυτό το κάνουμε όταν ο κώδικας css είναι πολύ μεγάλος...)
5...όταν έχουμε στο blog μας πολλούς κώδικες css (μέσα στο HTML), καλό είναι να τους ξεχωρίζουμε !!!Πως; γράφουμε στην αρχή και στο τέλος (που αρχίζει και που τελειώνει) κάποιες φράσεις που δείχνουν τις ιδιότητές του ...πχ <!-- Start Hover Vertical Menu --> η <!-- End Hover Vertical Menu -->
Οτι γράφουμε ανάμεσα στη φράση <!-- ΠΕΡΙΕΧΟΜΕΝΟ ΜΗΝΥΜΑ -->, δεν εμφανίζεται στη σελίδα μας (μένει αθέατο στην εμφάνιση του blog μας)....
Αυτά τα πολύ σημαντικά πράγματα, καλό είναι να τα έχετε πρόχειρα κάπου, μήπως σας χρειαστούν...
Να λοιπόν και ο κώδικας που σας δίνω, για να έχετε ένα όμορφο και πρακτικό μενού σε μια πλαϊνή στήλη....
Ο ΚΩΔΙΚΑΣ CSS:
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: none;
}
#container {
margin: auto;
width: 490px;
}
#header {
background-image: url();
background-repeat: no-repeat;
height: 42px;
width: 490px;
margin-bottom: 20px;
}
#button {
height: 32px;
width: 284px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
margin-bottom: -4px;
}
.the_menu {
display:none;
width:184px;
border: 1px solid #1c1c1c;
}
.the_menu li {
background-color: #302f2f;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>
<script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/sliding_menu/js/jquery.js"></script>
<script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/sliding_menu/js/slider.js"></script>
Και το div , που το βάζετε σαν gadget => HTML/JavaScript ...
<div id="button">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI-7rHHMF4OKBPbYbORyunLCREDTY4ANwNbBlwQbkynfz2wQHPVfWQI63AcZy8GCxXoQ-XoWu8i2FwQtMOlnN5wtm5HfR2sDfui8UV07HBWBkc9-L_lOsRMO0vtmXVg6tSaL5z_Fa3x46v/s184/OPEN-CLOSE.png" width="184" height="32" border="0" class="menu_class">
<ul class="the_menu" style="display: none; ">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
</div>
(βάλτε όλα τα μέρη του κώδικα στο demo-blog μου http://demobloghtml.blogspot.com/ και δοκιμάστε το, να δείτε πως φαίνεται)
***όπου # θα βάλετε τη διεύθυνση - url
*** όπου A Link #1 η A Website #3 θα βάλετε την ονομασία του λινκ
***φυσικά το μενού αναπτύσσεται όταν πατήσετε στην εικόνα η βελάκι στη κορυφή του μενού
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(αν κολλήσετε κάπου, στείλτε email η σχόλιο)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}