Automatic Vertical Menu-Submenu

ΑΥΤΟΜΑΤΟ ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ Νο 2

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

Αλλάξτε το πλάτος και το ύψος του μενού αλλάζοντας τα width:234px;height:16px; Αλλάξτε τη θέση που θα εμφανίζεται το υπομενου αλλάζοντας το left:251px;top:0px; Αλλάξτε το πλάτος και το ύψος του υπομενού αλλάζοντας το width:480px; height:auto; Αλλάξτε το πράσινο link του blog μου με το link του δικού σας blog και τέλος αλλάξτε και τις ετικέτες που έχω χρωματίσει με πορτοκαλί γράμματα. Το μενού μπαίνει απλά σαν ένα gadget και θα δείχνει έτσι όπως το βλέπετε παρακάτω.

<style>

.onclick-menu1 {position: relative; width:234px;height:16px; background:#532000;color:#FFFFFF; font: 13px arial;margin:0;padding:4px; border: 1px solid #FFFF00;display: inline-block;}

.onclick-menu1:before {content: "TEXT BOXES";font: 13px arial; background:#532000;color:#FFFFFF; }

.onclick-menu1:focus {pointer-events: none;}

.onclick-menu1:focus .onclick-menu1-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu1-content {position: absolute; left:251px;top:0px;width:480px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#532000; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px; border: 1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu1"><ul class="onclick-menu1-content">

<script type="text/javascript" src="https://googledrive.com/host/0B8GeBeRdN9NscXNCbDJpS0NfcTQ"></script>

<script src="http://the-best-widgets.blogspot.gr/feeds/posts/summary/-/TEXT BOXES?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu2 {position: relative; width:234px;height:16px; background:#105105;color:#FFFFFF; font: 13px arial;margin:0;padding:4px; border: 1px solid #FFFF00;display: inline-block;}

.onclick-menu2:before {content: "BACKGROUNDS"; font: 13px arial; background:#105105;color:#FFFFFF; }

.onclick-menu2:focus {pointer-events: none;}

.onclick-menu2:focus .onclick-menu2-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu2-content {position: absolute; left:251px;top:0px;width:480px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#105105; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px; border: 1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu2"><ul class="onclick-menu2-content">

<script type="text/javascript" src="https://googledrive.com/host/0B8GeBeRdN9NscXNCbDJpS0NfcTQ"></script>

<script src="http://the-best-widgets.blogspot.gr/feeds/posts/summary/-/BACKGROUNDS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu3 {position: relative; width:234px;height:16px; background:#661111;color:#FFFFFF; font: 13px arial;margin:0;padding:4px; border: 1px solid #FFFF00;display: inline-block;}

.onclick-menu3:before {content: "IMAGE EFFECTS"; font: 13px arial; background:#661111;color:#FFFFFF; }

.onclick-menu3:focus {pointer-events: none;}

.onclick-menu3:focus .onclick-menu3-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu3-content {position: absolute; left:251px;top:0px;width:480px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#661111; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px; border: 1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu3"><ul class="onclick-menu3-content">

<script type="text/javascript" src="https://googledrive.com/host/0B8GeBeRdN9NscXNCbDJpS0NfcTQ"></script>

<script src="http://the-best-widgets.blogspot.gr/feeds/posts/summary/-/IMAGE EFFECTS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu4 {position: relative; width:234px;height:16px; background:#333333;color:#FFFFFF; font: 13px arial;margin:0;padding:4px; border: 1px solid #FFFF00;display: inline-block;}

.onclick-menu4:before {content: "ON LINE TOOLS"; font: 13px arial; background:#333333;color:#FFFFFF; }

.onclick-menu4:focus {pointer-events: none;}

.onclick-menu4:focus .onclick-menu4-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu4-content {position: absolute; left:251px;top:0px;width:480px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#333333; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px; border: 1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu4"><ul class="onclick-menu4-content">

<script type="text/javascript" src="https://googledrive.com/host/0B8GeBeRdN9NscXNCbDJpS0NfcTQ"></script>

<script src="http://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ON LINE TOOLS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu5 {position: relative; width:234px;height:16px; background:#173377;color:#FFFFFF; font: 13px arial;margin:0;padding:4px; border: 1px solid #FFFF00;display: inline-block;}

.onclick-menu5:before {content: "FACEBOOK WIDGETS"; font: 13px arial; background:#173377;color:#FFFFFF;}

.onclick-menu5:focus {pointer-events: none;}

.onclick-menu5:focus .onclick-menu5-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu5-content {position: absolute; left:251px;top:0px;width:480px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#173377; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px; border: 1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu5"><ul class="onclick-menu5-content">

<script type="text/javascript" src="https://googledrive.com/host/0B8GeBeRdN9NscXNCbDJpS0NfcTQ"></script>

<script src="http://the-best-widgets.blogspot.gr/feeds/posts/summary/-/FACEBOOK WIDGETS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

http://the-best-widgets.blogspot.gr/2015/11/automato-menu.html#more