• 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 ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET No 1

ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ
ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ 2 ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET No 1
Αυτό είναι ένα απλό κάθετο μενού με 2 υπομενού το οποίο τοποθετήται σαν gadget σε όποια πλευρική μπάρα θέλετε. Είναι αυτό που βλέπετε σε λειτουργία σε αυτήν την ανάρτηση. Για να το βάλετε πηγαίνετε στη διάταξη / προσθήκη gadget  / HTML/Javascript  και κάντε επικόλληση τον παρακάτω κώδικα. Μην ξεχάσετε να αλλάξετε τα links μου με τα δικά σας links. Έχω χρωματίσει ότι μπορεί να αλλαχτεί, ύψος & πλάτος μενού, μέγεθος γραμματοσειράς, χρώματα backround και κειμένου, κατηγοριές και τίτλοι των μενού.


<style type='text/css'>
body {font-family:Arial;font-size:12px;}
#menuwrapper ul, #menuwrapper ul li{margin:0;padding:0;list-style:none;}
#menuwrapper ul li{background-color:#333333;border-bottom:solid 1px white;width:240px; cursor:pointer;}
#menuwrapper ul li:hover{background-color:#661111;position:relative;}
#menuwrapper ul li a{padding:5px 5px;color:#ffffff;display:inline-block;text-decoration:none;}
#menuwrapper ul li ul{position:absolute;display:none;}
#menuwrapper ul li:hover ul{left:240px;top:0px;display:block;}
#menuwrapper ul li ul li{background-color:#105105;}
#menuwrapper ul li:hover ul li:hover{background-color:#661111;}
#menuwrapper ul li ul li a{color:#FFFFFF;display:inline-block;width:240px;}
#menuwrapper ul li:hover ul li ul{position:absolute;display:none;}
#menuwrapper ul li:hover ul li:hover ul{display:block;left:240px;top:0;}
#menuwrapper ul li:hover ul li:hover ul li{background:#115595;}
#menuwrapper ul li:hover ul li:hover ul li:hover{background:#661111;}
#menuwrapper ul li:hover ul li:hover ul li a{color:#ffffff;}
.clear{clear:both;}
</style>

<div id="menuwrapper">
<ul>
<li><a href="http://the-best-widgets.blogspot.gr">HOME</a></li>
<li><a href="#">ΟΡΙΖΟΝΤΙΑ & ΚΑΘΕΤΑ ΜΕΝΟΥ ►</a>
<ul>
<li><a href="http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ%20ΚΑΙ%20ΚΑΘΕΤΑ%20ΜΕΝΟΥ">ΟΡΙΖΟΝΤΙΑ ΜΕΝΟΥ</a>
<ul>
<li><a href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ-3</a></li>
</ul>
</li>
<li><a href=" http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ%20ΚΑΙ%20ΚΑΘΕΤΑ%20ΜΕΝΟΥ">ΚΑΘΕΤΑ ΜΕΝΟΥ</a>
<ul>
<li><a href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ ΜΕΝΟΥ-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2015/01/buttons.html">ΚΑΘΕΤΟ ΜΕΝΟΥ-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ ΜΕΝΟΥ-3</a></li>
</ul>
</li>
<li><a href="http://the-best-widgets.blogspot.gr/search/label/SOSIAL%20BUTTONS">SOSIAL BUTTONS ►</a>
<ul>
<li><a href="http://the-best-widgets.blogspot.gr/2014/06/follow-sosial-buttons.html">SOSIAL BUTTONS-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2015/02/share-buttons.html">SOSIAL BUTTONS-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2015/02/radio-buttons-pop-up-window.html">SOSIAL BUTTONS-3</a></li>
</ul>
</li>
<li><a href="http://the-best-widgets.blogspot.gr/search/label/FACEBOOK%20WIDGETS">FACEBOOK WIDGETS</a></li>
</ul>
</li>
<li><a href="http://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS">SLIDESHOWS & GALERIES ►</a>
<ul>
<li><a href="http://the-best-widgets.blogspot.gr/2015/03/posts-slider.html">SLIDESHOW-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2015/02/7-slideshows.html">SLIDESHOW-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/2015/02/slideshow.html">SLIDESHOW-3</a></li>
</ul>
</li>
<li><a href="http://the-best-widgets.blogspot.gr/p/my-posts.html">ALL MY POSTS</a>
</ul>

</div>

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

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

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

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