• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ΑΥΤΟΜΑΤΟ ΑΚΚΟΡΝΤΕΟΝ ΜΕΝΟΥ Νο 2

ACCORDION MENU
ΑΥΤΟΜΑΤΟ ΑΚΚΟΡΝΤΕΟΝ ΜΕΝΟΥ Νο 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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.