Περί CSS, και ένα Vertical Hover Menu
http://www.dr-blogger.com/2011/11/css-vertical-hover-menu.html
-----------------------------------------------------------------------
Νέοι bloggers γεια σας !!!Η σημερινή ανάρτηση είναι διπλή...Θα σας πω 2-3 πράγματα για το κώδικα css, και μετά σας δίνω το κώδικα από ένα κάθετο, αναπτυσσόμενο μενού !!!Είναι αυτό που βλέπετε δίπλα στη φωτογραφία ....(UPDATED:Διορθώθηκαν τα .js)
Πρώτα όμως θα σας δώσω 2-3 tips για τους κώδικες css...
1...ένας κώδικας css μπαίνει πάντα ΠΑΝΩ/ΠΡΙΝ από τη φράση </head> (το κλείσιμο του <head>....), η ΠΑΝΩ/ΠΡΙΝ τη φράση
]]></b:skin>
2...ένας κώδικας css ξεκινά συνήθως και πάντα με τη λέξη <style> και τελειώνει με τη λέξη </style>.(όταν τον βάζουμε αναλυτικά σαν gadget : HTML/Javascript)+(εκφράζει πάντα τη σχεδίαση-εμφάνιση ενός 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: (Αν το βάλετε πάνω από τη φράση ]]></b:skin> τότε σβήστε τις φράσεις <style> και </style>)
--------------------------------------------------------------------------------------
<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>
ΧΡΕΙΑΖΕΤΑΙ ΚΑΙ ΤΑ 2 .JS: (τα βάζετε ακριβώς ΠΑΝΩ/ΠΡΙΝ τη φράση: </head>
<script type="text/javascript" src="http://pantel.googlecode.com/files/slider.js"></script>
<script type="text/javascript" src="http://pantel.googlecode.com/files/jquery.js"></script>
Και το div , που το βάζετε σαν gadget => HTML/JavaScript ...
<div id="button">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTkh1tdsGUZyW43hJIuQIjZN1tdBBOpXuS6pEBK_lyyNNDRlWDDUBWgccK0h8iwsqAZXqWjDbohk0utRnL29MIwm_5dJOONp1wrr9fL0llNFRvo76FV_JiqzOfhf21jTkTm1EL3G3iXV2/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 θα βάλετε την ονομασία του λινκ
***φυσικά το μενού αναπτύσσεται όταν πατήσετε στην εικόνα η βελάκι στη κορυφή του μενού
http://www.dr-blogger.com/2011/11/css-vertical-hover-menu.html
-----------------------------------------------------------------------
Νέοι bloggers γεια σας !!!Η σημερινή ανάρτηση είναι διπλή...Θα σας πω 2-3 πράγματα για το κώδικα css, και μετά σας δίνω το κώδικα από ένα κάθετο, αναπτυσσόμενο μενού !!!Είναι αυτό που βλέπετε δίπλα στη φωτογραφία ....(UPDATED:Διορθώθηκαν τα .js)
Πρώτα όμως θα σας δώσω 2-3 tips για τους κώδικες css...
1...ένας κώδικας css μπαίνει πάντα ΠΑΝΩ/ΠΡΙΝ από τη φράση </head> (το κλείσιμο του <head>....), η ΠΑΝΩ/ΠΡΙΝ τη φράση
]]></b:skin>
2...ένας κώδικας css ξεκινά συνήθως και πάντα με τη λέξη <style> και τελειώνει με τη λέξη </style>.(όταν τον βάζουμε αναλυτικά σαν gadget : HTML/Javascript)+(εκφράζει πάντα τη σχεδίαση-εμφάνιση ενός 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: (Αν το βάλετε πάνω από τη φράση ]]></b:skin> τότε σβήστε τις φράσεις <style> και </style>)
--------------------------------------------------------------------------------------
<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>
ΧΡΕΙΑΖΕΤΑΙ ΚΑΙ ΤΑ 2 .JS: (τα βάζετε ακριβώς ΠΑΝΩ/ΠΡΙΝ τη φράση: </head>
<script type="text/javascript" src="http://pantel.googlecode.com/files/slider.js"></script>
<script type="text/javascript" src="http://pantel.googlecode.com/files/jquery.js"></script>
Και το div , που το βάζετε σαν gadget => HTML/JavaScript ...
<div id="button">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTkh1tdsGUZyW43hJIuQIjZN1tdBBOpXuS6pEBK_lyyNNDRlWDDUBWgccK0h8iwsqAZXqWjDbohk0utRnL29MIwm_5dJOONp1wrr9fL0llNFRvo76FV_JiqzOfhf21jTkTm1EL3G3iXV2/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 θα βάλετε την ονομασία του λινκ
***φυσικά το μενού αναπτύσσεται όταν πατήσετε στην εικόνα η βελάκι στη κορυφή του μενού
