Οριζόντια μπάρα με αναδυόμενα μενού

Όπως γράφω και στον τίτλο της ανάρτησης, με αυτό το τέχνασμα θα μπορέσετε να βάλετε στο ιστολόγιό σας μια οριζόντια μπάρα (μενού) με συνδέσμους που επιθυμείτε, όπως αυτό που έχω στο ιστολόγιό μου, με την ιδιαιτερότητα ότι στο μενού αυτό ο τίτλοι του μπορούν να γίνουν και αναδυόμενοι και να έχουν μέσα τους άλλα "υπομενού".

Η αλήθεια είναι ότι δυσκολεύτηκα αρκετά μέχρι να βγάλω άκρη ώστε να κάνω το κόλπο να λειτουργήσει, αλλά τελικά κατάφερα και να φτιάξω τους απαραίτητους κωδικούς και να το απλοποιήσω.

Ο τρόπος για να γίνει αυτό εχει ως εξής...

Συνδεόμαστε στο ιστολόγιό μας πηγαίνουμε στο ΔΙΆΤΑΞΗ-->ΕΠΕΞΕΡΓΑΣΊΑ HTML πατάμε ctrl+f και αναζητούμε το </head> , μόλις το βρούμε αμέσως πρίν από αυτό επικολλούμε τον παρακάτω κωδικό

<link href='http://www.mdn.fm/files/86495_23zjp/jqueryslidemenu.css' rel='stylesheet' type='text/css'/> <!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src='http://www.mdn.fm/files/86494_g5aja/slidemenu_horiz.js' type='text/javascript'/>

και έπειτα το αποθηκεύουμε.
Αφού το κάνουμε και δεν έχουμε κάποιο πρόβλημα, πηγαίνουμε στο ΣΤΟΙΧΕΊΑ ΣΕΛΊΔΑΣ-->ΠΡΟΣΘΉΚΗ GADGET-->HTML JAVASCRIPT και βάζουμε τον παρακάτω κωδικό ο οποίος ουσιαστικά είναι και το μενού που θα εμφανίζεται στη σελίδα μας

<div id="myslidemenu" class="jqueryslidemenu"><ul><li><a href="url διεύθυνση">τίτλος1</a></li> <li><a href="url διεύθυνση">τίτλος2</a></li> <li><a href="url διεύθυνση">τίτλος3</a></li> <li><a href="#">Τίτλος4</a><ul><li><a href="#">τίτλος4α</a><ul><li><a href="url διεύθυνση">τίτλος4α1</a></li> <li><a href="url διεύθυνση">τίτλος4α2</a></li> <li><a href="url διεύθυνση">τίτλος4α3</a></li> <li><a href="url διεύθυνση">τίτλος4α4</a></li> <li><a href="url διεύθυνση">τίτλος4α5</a></li> </ul></li> <li><a href="#">τίτλος4β</a><ul><li><a href="url διεύθυνση">τίτλος4β1</a></li> <li><a href="url διεύθυνση">τίτλος4β2</a></li> <li><a href="url διεύθυνση">τίτλος4β3</a></li> <li><a href="url διεύθυνση">τίτλος4β4</a></li> <li><a href="url διεύθυνση">Τίτλος4β5</a></li> <li><a href="url διεύθυνση">τίτλος4β6</a></li> <li><a href="url διεύθυνση">τίτλος4β7</a></li> <li><a href="url διεύθυνση">τίτλος4β8</a></li> <li><a href="url διεύθυνση">τίτλος4β9</a></li> </ul></li><li><a href="#">τίτλος4γ</a><ul><li><a href="url διεύθυνση">τίτλος4γ1</a></li> <li><a href="url διεύθυνση">τίτλος4γ2</a></li> <li><a href="url διεύθυνση">Τίτλος4γ3</a></li> <li><a href="url διεύθυνση">τίτλος4γ4</a></li> <li><a href="url διεύθυνση">τίτλος4γ5</a></li> <li><a href="url διεύθυνση">τίτλος4γ6</a></li> <li><a href="url διεύθυνση">τίτλος4γ7</a></li> <li><a href="url διεύθυνση">τίτλος4γ8</a></li> </ul></li> </ul></li> <li><a href="url διεύθυνση">τίτλος5</a><ul><li><a href="url διεύθυνση">τίτλος5α</a></li> <li><a href="url διεύθυνση">τίτλος5β</a></li> </ul></li> <li><a href="#">τίτλος6</a><ul><li><a href="url διεύθυνση">τίτλος6α</a></li> <li><a href="url διεύθυνση">τίτλος6β</a></li> </ul></li> <li><a href="#">τίτλος7</a><ul><li><a href="url διεύθυνση">τίτλος7α</a></li> <li><a href="url διεύθυνση">τίτλος7β</a></li> <li><a href="url διεύθυνση">τίτλος7γ</a></li> <li><a href="url διεύθυνση">τίτλος7δ</a></li> <li><a href="url διεύθυνση">τίτλος7ε</a></li> <li><a href="url διεύθυνση">τίτλος7ζ</a></li> <li><a href="url διεύθυνση">τίτλος7η</a></li> </ul></li> <li><a href="url διεύθυνση">τίτλος8</a><ul><li><a href="url διεύθυνση">τίτλος8α</a></li> <li><a href="url διεύθυνση">τίτλος8β</a></li> <li><a href="url διεύθυνση">τίτλος8γ</a></li> <li><a href="url διεύθυνση">τίτλος8δ</a></li> </ul></li> <li><a href="url διεύθυνση">τίτλος9</a></li> <li><a href="url διεύθυνση">τίτλος10</a></li> </ul><br style="clear: left" /> </div>

Αυτόν τον κωδικό ουσιαστικά τον έφτιαξα για τη δική μου σελίδα. Αν κάποιος θέλει μπορεί να αφερέσει ή να προσθέσει κάποια στοιχεία. Αν δυσκολευτείτε σε αυτό (αφαίρεση ή προσθήκη στοιχείων) πείτε μου να σας βοηθήσω.

Καλή προσπάθεια!