ΑΥΤΟΜΑΤΟ ΑΚΚΟΡΝΤΕΟΝ ΜΕΝΟΥ Νο 2
Αυτό είναι ένα αυτόματο accordion menu με ένα
υπομενού το οποίο για να ανοίξει και να κλείσει το υπομενού του πρέπει να
πατήσετε κλίκ απάνω του. Αντί για links έχει ένα script και διαβάζει τις γενικές ετικέτες του blog σας και
εμφανίζει τους τίτλους των αναρτήσεων στο υπομενού του. Μπαίνει απλά σαν gadget. Το πλάτος του μενού το ρυθμίζετε αλλάζοντας το width: 240px; Το πλάτος του υπομενού το ρυθμίζετε αλλάζοντας το width:580px;
Την γραματοσειρά και το μέγεθός της τη ρυθμίζετε
αλλάζοντας το font:13px arial; Το
background και το χρώμα κειμένου του μενού το ρυθμίζετε
αλλάζοντας το background: #333333; και το color: #FFFFFF; Εννοείται πως πρέπει να βάλετε το δικό σας blog url μέσα
στο script αντικαθιστώντας τo δικό μου με το γαλάζιο
χρώμα. Αντικαταστήστε επίσης τις κίτρινες περιγραφές
και τις πράσινες γενικές ετικέτες που είναι
μέσα στο script.
<style>
.text-center {text-align: center;}
*, *:before, *:after {-webkit-border-sizing:
border-box; -moz-border-sizing:
border-box; border-sizing: border-box;}
.container {width: 240px;background:
#333333; margin:0;
padding:0;}
.container > ul {list-style:none; padding:0; margin:0;}
.dropdown a {text-decoration: none;}
.dropdown [data-toggle="dropdown"]
{position:relative;display:block;background: #333333;color:#FFFFFF;font:13px
Arial;border-bottom:1px solid #FBBB22;padding:5px;}
.dropdown [data-toggle="dropdown"]:hover
{background: #105105;}
.dropdown .icon-arrow {position: absolute;display:
block;font:13px Arial;color:#FFFFFF;top:5px;right:5px;}
.dropdown .icon-arrow:before {content: '\25BC';}
.dropdown .dropdown-menu {max-height:0;width:580px;background:
#333333;overflow: hidden;list-style:
none;padding:0;margin:0;}
.dropdown .dropdown-menu li {padding: 0;}
.dropdown .dropdown-menu li a {display: block;color: #FFFFFF;background:
#333333; font:13px
Arial; border-bottom:1px solid #FBBB22;padding:5px;}
.dropdown .dropdown-menu li a:hover {background: #105105;}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%; transform-origin: 50% 0%;}
.dropdown .show {display: block; max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.2s ease-in-out;
-moz-animation: showAnimation 0.2s ease-in-out;
-webkit-animation: showAnimation 0.2s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;}
.dropdown .hide {max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.2s ease-out;
-moz-animation: hideAnimation 0.2s ease-out;
-webkit-animation: hideAnimation 0.2s ease-out;
-moz-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
-webkit-transition: max-height 0.2s ease-out;
transition: max-height 0.2s ease-out;}
</style>
<script src="https://github-codes.github.io/mycodes/javascripts/archive-page-1p.js"></script>
<div class="container">
<ul>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">TEXT BOXES<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/TEXT BOXES?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">BACKGROUNDS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/BACKGROUNDS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">IMAGE EFFECTS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/IMAGE EFFECTS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΕΝΣΩΜΑΤΩΣΕΙΣ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΑΣΦΑΛΕΙΑ BLOG<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΑΣΦΑΛΕΙΑ BLOG?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΣΥΜΒΟΥΛΕΣ SEO<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/SEO?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΣΧΟΛΙΑ BLOGGER<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΣΧΟΛΙΑ BLOGGER?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ON LINE ΕΡΓΑΛΕΙΑ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ON LINE TOOLS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">FACEBOOK WIDGETS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/FACEBOOK WIDGETS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΜΟΡΦΟΠΟΪΗΣΗ BLOG<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΜΟΡΦΟΠΟΙΗΣΗ BLOG?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΑΛΛΑ WIGETS ΓΙΑ BLOGS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/WIDGETS ΓΙΑ BLOGS?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΧΡΙΣΤΟΥΓΕΝΝΙΑΤΙΚΑ GADGETS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/CHRISTMAS WIDGETS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">BUTTONS & POPUP WINDOWS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/SOSIAL BUTTONS?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">ΚΥΛΙΟΜΕΝΑ LINKS TEXT
IMAGES<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#"
data-toggle="dropdown">GALLERIES SLIDERS SLIDESHOWS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/SLIDESHOWS?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li></ul></div>
<script>
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();}};})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className
+ "(\\s|$)").test(this.className);};
</script>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.