MY CODES

VERTICAL AUTO MENU-2

VECTRICAL-AUTO-MENU-1VERTICAL AUTO MENU-2

.

.

.

.

.

<script src="https://github-codes.github.io/mycodes/javascripts/archive-page-1p.js"></script>
<style>
.onclick-menu1 {position: relative; width:234px;height:16px; background:#532000;color:#FFFFFF; font: 13px arial;margin:0;padding:4px;border-radius:5px; 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:-55px;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-radius:5px;border:1px solid #FFFF00;}
</style>
<div tabindex="0" class="onclick-menu1"><ul class="onclick-menu1-content">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/TEXT BOXES?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div><BR>

<style>
.onclick-menu2 {position: relative; width:234px;height:16px; background:#00FF00;color:#000000; font: 13px arial;margin:0;padding:4px;border-radius:5px;
display: inline-block;}
.onclick-menu2:before {content: "BACKGROUNDS"; font: 13px arial; background:#00FF00;color:#000000; }
.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:-85px;width:570px;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-radius:5px;border:1px solid #FFFF00;}
</style>
<div tabindex="0" class="onclick-menu2"><ul class="onclick-menu2-content">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/BACKGROUNDS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div><BR>

<style>
.onclick-menu3 {position: relative; width:234px;height:16px; background:#FBA3F4;color:#000000; font: 13px arial;margin:0;padding:4px;border-radius:5px;display: inline-block;}
.onclick-menu3:before {content: "IMAGE EFFECTS"; font: 13px arial; background:#FBA3F4;color:#000000;}
.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:-110px;width:500px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#A11111; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px;border-radius:5px;border: 1px solid #FFFF00;}
</style>
<div tabindex="0" class="onclick-menu3"><ul class="onclick-menu3-content">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/IMAGE EFFECTS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div><BR>

<style>
.onclick-menu4 {position: relative; width:234px;height:16px; background:#FBBB22;color:#000000; font: 13px arial;margin:0;padding:4px;border-radius:5px;display: inline-block;}
.onclick-menu4:before {content: "ΕΝΣΩΜΑΤΩΣΕΙΣ"; font: 13px arial; background:#FBB22;color:#000000;}
.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:-130px;width:520px;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-radius:5px;border: 1px solid #FFFF00;}
</style>
<div tabindex="0" class="onclick-menu4"><ul class="onclick-menu4-content">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div><BR>

<style>
.onclick-menu5 {position: relative; width:234px;height:16px; background:#333333;color:#FFFFFF; font: 13px arial;margin:0;padding:4px;border-radius:5px;display: inline-block;}
.onclick-menu5:before {content: "ΑΣΦΑΛΕΙΑ BLOG"; font: 13px arial; background:#333333;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:-155px;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-radius:5px;border:1px solid #FFFF00;}
</style>
<div tabindex="0" class="onclick-menu5"><ul class="onclick-menu5-content">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΑΣΦΑΛΕΙΑ BLOG?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div><BR>
Για να σχολιάσετε πρέπει να συνδεθείτε.
Προηγούμενο άρθρο
VERTICAL AUTO MENU-1
Επόμενο άρθρο
VERTICAL MENU WITH 2 SUBMENU-no1