ACCORDION MENU

ΠΩΣ ΒΑΖΩ ACCORDION MENU

ΠΩΣ ΒΑΖΩ ACCORDION MENU

Αυτό είναι ένα απλό accordion menu με ένα υπομενού. Μπάνει απλά σαν gadget. Το πλάτος του μενού το ρυθμίζετε αλλάζοντας το width: 240px; το ύψος του αλλάζοντας τοheight:21px; την γραματοσειρά και το μέγεθός της τη ρυθμίζετε αλλάζοντας το font:13px arial; Το background και το χρώμα κειμένου του μενού το ρυθμίζετε αλλάζοντας το background: #173377; και το color: #FFF; Το background του υπομενού το ρυθμίζετε αλλάζοντας το background: #333333; τρείς φορές.

Τέλος το πλάτος του υπομενού το ρυθμίζετε αλλάζοντας το width:500px; δύο φορές. Εννοείται πως πρέπει να βάλετε τα δικά σας link και περιγραφές αντικαθιστώντας τα δικά μου γαλάζια και πράσινα links και τις κίτρινες και πορτοκαλί περιγραφές των τίτλων.

ALL MY POSTS ▼

• Όλα τα άρθρα (μόνο τίτλοι)
• Όλα τα άρθρα (τίτλοι και εικόνες)
• Text boxes
• Backgrounds
• Image effects
• Ενσωματώσεις
• Ασφάλεια blog
• Σχόλια Blogger
• Συμβουλές SEO
• Facebook widgets
• Μορφοποίηση blog
• Άλλα widgets για blogs
• Ταξινόμηση αναρτήσεων
• Οριζόντια και κάθετα μενού
• Kυλιομενα links text images
• Buttons & pop up windows
• Galleries, Sliders & Slideshows

MY LINKS ▼

• My links
• My Forum
• My demo blog-1
• My demo blog-2
• My demo blog-3
• My demo blog-4
• My demo blog-5
• My demo blog-6
• My demo blog-7
• My friendly blogs

MY PHOTOS ▼

• Imgur slideshow
• Flickr slideshow
• Picasa slideshow
• Panoramio slideshow
• Pinterest photo gallery
• Photobucket slideshow
• My photo gallery-1
• My photo gallery-2

MY VIDEOS ▼

• Video gallery-1
• Video gallery-2
• My videos on youtube

MY FILES ▼

• Annimated Gifs
• Blogger backrounds
• Ringtones
• Free programs

<style>

#accordion .item {width: 240px;height:21px;overflow:hidden;border-radius: 5px;margin-bottom: 2px;font:13px arial;}

#accordion a {display:block;background: #173377;color: #FFF;padding:4px;

text-decoration: none; font:13px arial;}

#accordion ul {background: #333333;width:500px;height: auto;padding: 4px; font:13px arial;}

#accordion div:hover {background: #333333;width:500px;height: auto; font:13px arial;}

#accordion div:hover a {background: #333333;border-bottom: 1px solid #FFFF00;font:13px arial;}

</style>

<div id="accordion">

<div class="item">

<a href="http://the-best-widgets.blogspot.gr/p/my-posts.html">ALL MY POSTS ▼</a>

<ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts.html'> Όλα τα άρθρα (μόνο τίτλοι)</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts_19.html'>Όλα τα άρθρα (τίτλοι και εικόνες)</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/TEXT BOXES'>Text boxes</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS'>Backgrounds</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/IMAGE EFFECTS'>Image effects</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ'>Ενσωματώσεις</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG'>Ασφάλεια blog</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΣΧΟΛΙΑ BLOGGER'>Σχόλια Blogger</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/SEO'>Συμβουλές SEO</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS'>Facebook widgets</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG'>Μορφοποίηση blog</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS'>Άλλα widgets για blogs</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ'>Ταξινόμηση αναρτήσεων</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ'>Οριζόντια και κάθετα μενού</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES'>Kυλιομενα links text images</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/SOSIAL NETWORKS BUTTONS'>Buttons & pop up windows</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS'>Galleries, Sliders & Slideshows</a></li> </ul>

</div>

<div class="item">

<a href="http://the-best-widgets.blogspot.gr/p/blog-page_11.html">MY LINKS ▼</a>

<ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html'>My links</a></li>

<li><a href='http://widgets.freeforums.net'>My Forum</a></li>

<li><a href='http://gadgetsforblogs1.blogspot.gr'>My demo blog-1</a></li>

<li><a href='http://gadgetsforblogs2.blogspot.gr'>My demo blog-2</a></li>

<li><a href='http://gadgetsforblogs3.blogspot.gr'>My demo blog-3</a></li>

<li><a href='http://gadgetsforblogs4.blogspot.gr'>My demo blog-4</a></li>

<li><a href='http://gadgetsforblogs5.blogspot.gr'>My demo blog-5</a></li>

<li><a href='http://gadgetsforblogs6.blogspot.gr'>My demo blog-6</a></li>

<li><a href='http://gadgetsforblogs7.blogspot.gr'>My demo blog-7</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/friendly-blogs.html'>My friendly blogs</a></li>

</ul></li>

</div>

<div class="item">

<a href="http://the-best-widgets.blogspot.gr/p/photo-gallery-1.html">MY PHOTOS ▼</a>

<ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/imgur-slideshow.html'>Imgur slideshow</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/flickr-slideshow.html'>Flickr slideshow</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/picasa-slideshow.html'>Picasa slideshow</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/panoramio-slideshow.html'>Panoramio slideshow</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html'>Pinterest photo gallery</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/photobucket-slideshow.html'>Photobucket slideshow</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/photo-gallery-1.html'>My photo gallery-1</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/photo-gallery-2.html'>My photo gallery-2</a>

</ul></li>

</div>

<div class="item">

<a href="http://the-best-widgets.blogspot.gr/p/wigdets.html">MY VIDEOS ▼</a>

<ul>

<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets.html'>Video gallery-1</a></li>

<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_31.html'>Video gallery-2</a></li>

<li><a href='https://www.youtube.com/user/WIDGETSFORBLOGS'>My videos on youtube</a>

</ul></li>

</div>

<div class="item">

<a href="http://the-best-widgets.blogspot.gr/p/widgets_26.html">MY FILES ▼</a>

<ul>

<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsX0RKYzZOemtwOWM&usp=sharing'>Annimated Gifs</a></li>

<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsT3VPRkpOYmUwSVU&usp=sharing'>Blogger backrounds</a></li>

<li><a href='https://app.box.com/s/chdfmak9du0v6hlg0h5b'>Ringtones</a></li>

<li><a href='https://app.box.com/s/if98ihmj6bs15f69bro2'>Free programs</a></ul></li>

</div>

</div>

http://the-best-widgets.blogspot.gr/2015/11/accordion-menu.html?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent