Doctor blogger : ΟΡΙΖΟΝΤΙΟ DROP DOWN MENU

Τρίτη 2 Απριλίου 2013

ΟΡΙΖΟΝΤΙΟ DROP DOWN MENU

Σας αρέσει το οριζόντιο menu που ταυτόχρονα περιέχει και το drop down menu με τους ΑΓΩΝΕΣ του Blog μου και θέλετε να το φτιάξετε και εσείς? Δεν είναι ιδιαίτερα δύσκολο. Απαιτείτε η εισαγωγή λίγου CSS και λίγου HTML κώδικα.Πάμε λοιπόν:

Κατ'αρχήν εισάγετε τον παρακάτω CSS κώδικα πάνω από την ετικέτα ]]></b:skin> στο πρότυπο σας . Πως θα βρείτε που είναι? Εύκολο. Πηγαίνετε Πινακας Ελέγχου--Σχεδίαση--
Επεξεργασία HTMLAλλαγες στην επεξεργασία HTML στο blogger

ctrl F λειτουργεί μόνον όταν ο κέρσορας είναι μέσα στο πρότυπο, και ανοίγει ένα κουτάκι, οπου γράφετε τη λέξη κλειδί η τη φράση που ψάχνετε, και αμέσως χρωματίζονται οι αντίστοιχες φράσεις

]]></b:skin> .

#topnav {
margin: 0px;
padding: 5px 5px 5px 5px;
float: left;
z-index:8;
background-color:#000;
}
#topnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#topnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#topnav li a, #topnav li a:link {
color: #FFFFFF;
display: block;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
font-weight: bold;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
text-transform: uppercase;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}
#topnav li a:hover {
background-color: #F76C10;
color: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}
#topnav li li a, #topnav li li a:link, #topnav li li a:visited {
background-color:#000;
width: 150px;
color: #FFFFFF;
float: none;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
border-bottom: 1px dashed #222;
border-left: 1px dashed #222;
border-right: 1px dashed #222;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
#topnav li li a:hover {
background:#f08c34;
color: #FFFFFF;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-khtml-border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
#topnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0px;
padding: 0px;
}
#topnav li li {
}
#topnav li ul a { 
width: 150px;
}
#topnav li ul a:hover, #topnav li ul a:active { 
}
#topnav li ul ul {
margin: -30px 0 0 171px;
}

#topnav li:hover ul ul, #topnav li:hover ul ul ul{
left: -999em;
}
#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul{
left: auto;
}
#topnav li:hover {
position: static;
}
#topnav .current_page_item a {
background-color: #F76C10;
color: #FFFFFF;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

Μετά από αυτό νομίζεται ότι τελειώσατε? Λάθος αλλά μην απελπίζεστε. Ακολουθήστε ακριβώς τα παρακάτω βήματα και θα τελειώσετε σε λίγο. Τώρα πρέπει να βάλετε και λίγο HTML κώδικα

Πηγαίνετε πάλι στο γνωστό Πίνακας ελέγχου--Σχεδίαση--Προσθήκη gadget (Στο σημείο που θέλετε να φαίνεται το Menu)--HTML/JavaScript και γράψε τον παρακάτω κώδικα.

<ul id="topnav">
<li><a href="http://orfeasalexandroupolis.blogspot.com/">ABOUT ME</a>

<li><a>ΑΓΩΝΕΣ</a>

<ul>
<li><a href="http://orfeasalexandroupolis.blogspot.com" target="_blank">ΑΓΩΝΙΣΤΙΚΑ ΚΑΛΕΝΤΑΡΙΑ</a></li>
<li><a href="http://orfeasalexandroupolis.blogspot.com" target="_blank">ΑΓΩΝΕΣ ΕΠΙΣΗΜΟΙ</a></li>
<li><a href="http://orfeasalexandroupolis.blogspot.com" target="_blank">ΑΓΩΝΕΣ ΦΙΛΙΚΟΙ</a></li>
<li><a href="http://orfeasalexandroupolis.blogspot.com" target="_blank">ΑΠΟΤΕΛΕΣΜΑΤΑ</a></li>
<li><a href="http://orfeasalexandroupolis.blogspot.com"target="_blank">ΕΠΙΔΕΙΞΕΙΣ</a></li>
</ul>

</li></ul>

Ο κώδικας με τα κίτρινα γράμματα δημιουργεί το κουμπί ABOUT ME που ταυτόχρονα είναι και Link που φαίνεται στην εικόνα. Για να δημιουργήσετε επί πλέον κουμπιά στο Menu (όπως το chat room, video, ΑΝΑΚΟΙΝΩΣΕΙΣ κ.λ.π που έχω στο blog) προσαρμόστε ανάλογα τον κίτρινο κώδικα και προσθέστε τον.
Ο κώδικας με τα κόκκινα γράμματα δημιουργεί το drop down menu ΑΓΩΝΕΣ που φαίνεται στην εικόνα. Προσαρμόστε τον ανάλογα για να φτιάξετε το δικό σας drop down menu

yiannisblogtipsandtricks.blogspot