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

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

• τίτλος1
• τίτλος2
• τίτλος3
• Τίτλος4
  • τίτλος4α
    • τίτλος4α1
    • τίτλος4α2
    • τίτλος4α3
    • τίτλος4α4
    • τίτλος4α5
  • τίτλος4β
    • τίτλος4β1
    • τίτλος4β2
    • τίτλος4β3
    • τίτλος4β4
    • Τίτλος4β5
    • τίτλος4β6
    • τίτλος4β7
    • τίτλος4β8
    • τίτλος4β9
  • τίτλος4γ
    • τίτλος4γ1
    • τίτλος4γ2
    • Τίτλος4γ3
    • τίτλος4γ4
    • τίτλος4γ5
    • τίτλος4γ6
    • τίτλος4γ7
    • τίτλος4γ8
• τίτλος5
  • τίτλος5α
  • τίτλος5β
• τίτλος6
  • τίτλος6α
  • τίτλος6β
• τίτλος7
  • τίτλος7α
  • τίτλος7β
  • τίτλος7γ
  • τίτλος7δ
  • τίτλος7ε
  • τίτλος7ζ
  • τίτλος7η
• τίτλος8
  • τίτλος8α
  • τίτλος8β
  • τίτλος8γ
  • τίτλος8δ
• τίτλος9
• τίτλος10

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

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

Συνδεόμαστε στο ιστολόγιό μας πηγαίνουμε στο ΔΙΆΤΑΞΗ-->ΕΠΕΞΕΡΓΑΣΊΑ HTML πατάμε ctrl+f και αναζητούμε το </head> , μόλις το βρούμε αμέσως πρίν από αυτό επικολλούμε τον παρακάτω κωδικό <link href='http://s2.sigmirror.com/files/70036_dphq3/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://s2.sigmirror.com/files/70035_fmxfj/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> <br /> <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><br /> <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>

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

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