ROLL DOWN MENU ΜΕ STYLE

ΚΑΘΕΤΟ ROLL DOWN MENU ΜΕ STYLE

Αυτό το roll down menuέχει 2 διαφορές από το προηγούμενο. Πρώτον έχει στρογγυλεμένες γωνίες και δεύτερον ανοίγει στο ίδιο παράθυρο. Πηγαίνουμε στην διάταξη του blogμας και πατάμε προσθήκη gadget στην αριστερή πλαϊνή πλευρική μπάρα. Μετά επίλέγουμε το gadget HTML/JAVASCRIPTκαι επικολλάμε τον παρακάτω κώδικα. Μπορείτε να αλλάξετε τις κατηγορίες των συνδέσμων αντικαθιστώντας τα πορτοκαλί γράμματα. Επίσης μπορείτε να αλλάξετε και τους συνδέσμους μέσα στις κατηγορίες με τα κίτρινα γράμματα, καθώς και την περιγραφή τους με τα πράσινα γράμματα. 

Το πλάτος και το ύψος του μενού το ρυθμίζετε αλλάξοντας τα γαλάζια νούμερα.
Το backround του μενού το αλλάζετε με αυτό της αρεσκείας σας, αλλάζοντας τον έχρωμο κωδικό χρώματος μετά την λέξη BACKROUNDκαι το σύμβολο #. Το χρώμα κειμένου του μενού το αλλάζετε με αυτό της αρεσκείας σας, αλλάζοντας τον κωδικό μετά τη λέξη colorκαι το σύμβολο #. Τους κωδικούς των χρωμάτων μπορείτε να τους βρείτε στο υποσέλιδο αυτού του ιστολογίου σε ένα ειδικό widget που υπάρχει τέρμα κάτω δεξιά.

 

<style>

.demo select {

border: 0 !important;  /*Removes border*/

-webkit-appearance: none;  /*Removes default chrome and safari style*/

-moz-appearance: none; /* Removes Default Firefox style*/

background: #207907 url(img/select-arrow.png) no-repeat 90% center;

width: 100px; /*Width of select dropdown to give space for arrow image*/

text-indent: 0.01px; /* Removes default arrow from firefox*/

text-overflow: "";  /*Removes default arrow from firefox*/

color: #FFF;

border-radius: 8px;

padding: 4px;

box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);

}

.demo select.balck {

background-color: #000;

}

.demo select.option3 {

border-radius: 8px 0;

}

</style>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px;  BACKGROUND:#760991; color:#FFFFFF"name="menu"><option/> ΚΥΛΙΟΜΕΝΑTEXT LINK IMAGES<!-- change the links with your own -->

<optionvalue="http://the-best-widgets.blogspot.gr/2013/12/blog-post.html"/>ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΟ ΚΕΙΜΕΝΟ

<option value="http://the-best-widgets.blogspot.gr/2014/05/links.html"/>ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΑ LINKS

<optionvalue="http://the-best-widgets.blogspot.gr/2013/04/gif.html"/>ΠΩΣ ΒΑΖΩ ΜΙΑ ΚΙΝΟΥΜΕΝΗ ΕΙΚΟΝΑ GIF

<optionvalue="http://the-best-widgets.blogspot.gr/2014/05/blog-post.html"/>ΚΥΛΙΟΜΕΝΟ ΚΕΙΜΕΝΟ ΜΕ ΓΝΩΜΙΚΑ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/11/links.html"/>ΚΥΛΙΟΜΕΝΑ LINKS ΜΕ ΠΡΟΤΕΙΝΟΜΕΝΑ ΑΡΘΡΑ

<option value="http://the-best-widgets.blogspot.gr/2014/05/link.html"/>ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΕΣ ΕΙΚΟΝΕΣ ΜΕ LINKS</select></form>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px; BACKGROUND:#207907; color:#FFF" name="menu"><option/> ΟΡΙΖΟΝΤΙΑΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ<!-- change the links with your own -->

<optionvalue="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html"/>ΠΩΣ ΒΑΖΩ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ

<option value="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html"/>ΠΩΣ ΒΑΖΩ ROLL DOWN MENU

<optionvalue="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html"/>ΠΩΣ ΒΑΖΩ ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ SCROL BAR

<optionvalue="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html"/>ΠΩΣ ΒΑΖΩ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html"/>ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΣΑΝ GADGET

<option value="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html"/>ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ</select></form>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px;  BACKGROUND:#33FFFF; color:#000000" name="menu"><option/>SOSIAL BOOKMARKS BUTTONS<!-- change the links with your own -->

<option value="http://the-best-widgets.blogspot.gr/2014/04/tv-buttons.html"/>ΠΩΣ ΒΑΖΩ TV BUTTONS

<option value="http://the-best-widgets.blogspot.gr/2014/04/radio-buttons.html"/>ΠΩΣ ΒΑΖΩ RADIO BUTTONS

<option value="http://the-best-widgets.blogspot.gr/2014/06/follow-sosial-buttons.html"/>ΠΩΣ ΒΑΖΩ SOSIAL NETWORKS BUTTONS

</select></form>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px;  BACKGROUND:#F4F004; color:#000000"name="menu"><option/>SLIDESHOWS & GALERIES<!-- change the links with your own -->

<option value="http://the-best-widgets.blogspot.gr/2014/04/video-gallery.html"/>ΠΩΣ ΒΑΖΩ VIDEO GALLERY

<option value="http://the-best-widgets.blogspot.gr/2013/09/photo-gallery.html"/>ΠΩΣ ΒΑΖΩ PHOTO GALLERY

<option value="http://the-best-widgets.blogspot.gr/2014/04/slide-show.html"/>ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΟ SLIDE SHOW

</select></form>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px;  BACKGROUND:#0F4094; color:#FFFFFF"name="menu"><option/>FACEBOOK WIDGETS<!-- change the links with your own -->

<option value="http://the-best-widgets.blogspot.gr/2013/12/facebook-id.html"/>ΠΩΣ ΒΡΙΣΚΩ ΤΟ FACEBOOK PAGE ID

<option value="http://the-best-widgets.blogspot.gr/2013/04/facebook-pop-up-like-box.html"/>ΠΩΣ ΒΑΖΩ POP UP FACEBOOK LIKE BOX

<option value="http://the-best-widgets.blogspot.gr/2013/04/facebook-floating-like-box.html"/>ΠΩΣ ΒΑΖΩ FACEBOOK FLOATING LIKE BOX

<option value="http://the-best-widgets.blogspot.gr/2014/11/facebook-blog-moy.html"/>ΠΩΣ ΒΑΖΩ ΣΧΟΛΙΑ FACEBOOK ΣΤΟ BLOG ΜΟΥ</select></form>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px;  BACKGROUND:#9D600A; color:#FFFFFF" name="menu"><option/>ΑΛΛΑ WIDGETS ΓΙΑ BLOGS<!-- change the links with your own -->

<option value="http://the-best-widgets.blogspot.gr/2013/07/widgets-for-all.html"/>ΛΙΣΤΑ ΜΕ ΠΑΝΩ ΑΠΟ 150 WIDGETS

<optionvalue="http://the-best-widgets.blogspot.gr/2014/04/widget_13.html"/> WIDGET ΜΕ ΤΑ ΠΙΟ ΠΡΟΣΦΑΤΑ ΣΧΟΛΙΑ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/04/widget_14.html"/> WIDGET ΜΕΤΡΗΤΗΣ ΑΝΑΡΤΗΣΕΩΝ ΚΑΙ ΣΧΟΛΙΩΝ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/04/widget.html"/>WIDGET ΜΕ ΤΙΣ ΠΙΟ ΠΡΟΣΦΑΤΕΣ ΑΝΑΡΤΗΣΕΙΣ

</select></form>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px;  BACKGROUND:#961327; color:#FFFFFF"name="menu"><option/>ΜΟΡΦΟΠΟΙΗΣΗ BLOG<!-- change the links with your own -->

<optionvalue="http://the-best-widgets.blogspot.gr/2014/04/blogger.html"/>ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ ΑΝΑΡΤΗΣΗΣ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/05/blog-post_31.html"/>ΠΩΣ ΒΑΖΩ ΑΡΙΘΜΗΣΗ ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ ΜΟΥ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/11/arxeiothiki.html"/>ΠΩΣ ΦΤΙΑΧΝΩ ΣΕΛΙΔΑ ΑΡΧΕΙΟΘΗΚΗ ΑΝΑΡΤΗΣΕΩΝ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/04/blog.html"/>ΠΩΣ ΒΑΖΩ ΚΙΝΟΥΜΕΝΟ ΤΙΤΛΟ ΣΤΟ BLOG ΜΟΥ

</select></form>

<form class="demo">

<select onchange="location = this.options[this.selectedIndex].value;" style="width:240px;  BACKGROUND:#333333; color:#FFFFFF"name="menu"><option/>ΑΣΦΑΛΕΙΑ BLOG<!-- change the links with your own -->

<optionvalue="http://the-best-widgets.blogspot.gr/2014/04/blog_28.html"/>ΠΩΣ ΒΑΖΩ ΚΩΔΙΚΟ ΠΡΟΣΒΑΣΗΣ ΣΤΟ BLOG ΜΟΥ

<optionvalue="http://the-best-widgets.blogspot.gr/2014/04/blog-post.html"/>ΠΩΣ ΚΑΝΩ ΑΠΕΝΕΡΓΟΠΟΙΗΣΗ ΣΤΟ ΔΕΞΙ ΚΛΙΚ

</select></form>

 http://gadgetsforblogs3.blogspot.gr/2015/01/roll-down-menu-style.html#more