• 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 Νο 6

ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ
ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ 2 ΥΠΟΜΕΝΟΥ ΣΑΝ GADGET Νο 6.
Αυτό είναι ένα απλό οριζόντιο μενού με 2 υπομενού το οποίο τοποθετήται σαν gadget κάτω ακριβώς από τον τίτλο του blog σας. Θα χρειαστεί να αφαιρέσετε από το πρότυπο του blog σας, την ενότητα TABS που βρίσκεται περίπου στις γραμμές 325-373 πέντε γραμμές πάνω ή πέντε γραμμές κάτω θα τον βρήτε ανοίγωντας το πρώτο βελάκι που θα συναντήσετε μέσα στο πρότυπο σας για να επεκταθεί το κρυμένο μέρος του κώδικα της σελίδας σας. Η ενότητα TABS αρχίζει έτσι /* Tabs ----------------------------------------------- */ και έχει μήκος περίπου 50 γραμμές.


Πρέπει να την διαγράψετε αν θέλετε να λειτουργήσει το gadget του οριζοντίου μενού με 3 υπομενού που σας δίνω παρακάτω. Αφου την διαγράψετε βάλτε στη θέση της τις παρακάτω 5 γραμμές κώδικα σύν την επικεφαλίδα  /* Tabs ------ */ και σώστε το πρότυπό σας.

ΠΑΤΗΣΤΕ ΕΔΩ ΓΙΑ ΝΑ ΤΟ ΔΕΙΤΕ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ►

/* Tabs ----------------------------------------------- */
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}   
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

Μετά πηγαίνετε στη διάταξη / προσθήκη gadget  / HTML/Javascript  και κάντε επικόλληση τον παρακάτω κώδικα. Μην ξεχάσετε να αλλάξετε τα links μου με τα δικά σας links.

<style>
ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;padding:0;background:#333;color:#FFF;font:13px Arial;border:1px; solid #FBBB22; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
ul#css3menu1 ul{display:none;position:absolute;left:0;top:100%;background:#333;color:#FFF;font:13px Arial;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-color:#FBBB22;
padding:5px;}
ul#css3menu1 li:hover>*{display:block;}
ul#css3menu1 li{position:relative;display:block;white-space:nowrap;background:#333;color:#FFF;font:13px Arial;float:left;}
ul#css3menu1 li:hover{z-index:1;}
ul#css3menu1 ul ul{position:absolute;left:100%;top:0;}
ul#css3menu1{background:#333;color:#FFF;font:13px Arial;z-index:999;position:relative;display:inline-block; zoom:1;padding:0;*display:inline;}
* html ul#css3menu1 li a{display:inline-block;}
ul#css3menu1>li{margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:none;}
ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;cursor:pointer;padding:5px;background:#333;color:#FFF;font:13px Arial;}
ul#css3menu1 ul li{float:none;margin:5px;}
ul#css3menu1 ul a{text-align:left;padding:5px;background:#740777;color:#FFF;font:13px Arial;border-width:0;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{background:#740777;color:#FFF;font:13px Arial;border-color:#FBBB22;border-style:solid;}
ul#css3menu1 span{display:block;overflow:visible;}
ul#css3menu1 ul span{background-image:none;}
ul#css3menu1 > li.switch{display:none;cursor:pointer;width:40px;height:20px;padding:5px;}
ul#css3menu1 > li.switch:before {content:"";position:absolute;display:block;height:4px;width:40px;background:#333; color:#FFF;font:13px Arial;border-width:0;border-radius:5px;}
ul#css3menu1 > li.switch:hover:before{background:#333333;}
.c3m-switch-input{display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed {background:#207907;color:#FFF;font:13px Arial; border-width:0;border-style:solid;border-color:#FBBB22;text-decoration:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed{background-color:#207907;color:#FFFFFF;font:13px Arial;text-decoration:none;}
ul#css3menu1 li.topfirst>a{border-width:0;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:5px;}
ul#css3menu1 li.toplast>a{border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:5px;}
@media screen and (max-width: 1500px) {
ul#css3menu1 > li {position: initial;}
ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {left: 0;right:auto;top: 100%;}
ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 0; width: 100% !important;}}
@media screen and (max-width: 1498px) {
ul#css3menu1 {width: 100%;}
ul#css3menu1 > li {display: none;position: relative;width: 100% !important;}
ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li {display: block;}
ul#css3menu1 > li.switch > label {position:absolute;cursor:pointer;top:0;left:0;right: 0;bottom:0;}}
</style>
         
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="http://the-best-widgets.blogspot.gr" style="height:18px;line-height:18px;">HOME</a></li>
<li class="topmenu"><a href="http://the-best-widgets.blogspot.gr/p/my-posts.html" style="height:18px;line-height:18px;"><span>MY POSTS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#"><span>BEST POSTS ►</span></a>
<ul>
<li><a href="#">MY BEST POSTS</a></li>
</ul></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY LINKS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#"><span>BEST LINKS ►</span></a>
<ul>
<li><a href="#">MY BEST LINKS</a></li>
</ul></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY FILES ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#"><span>BEST FILES ►</span></a>
<ul>
<li><a href="#">MY BEST FILES</a></li>
</ul></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY PHOTOS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY VIDEOS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY PRESENTATIONS ▼</span></a>
<ul>
<li><a href="#">PRESENTATION-1</a></li>
<li><a href="#">PRESENTATION-2</a></li>
<li><a href="#">PRESENTATION-3</a></li>
<li><a href="#">PRESENTATION-4</a></li>
<li><a href="#">PRESENTATION-5</a></li>
<li><a href="#">PRESENTATION-6 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY E-BOOKS ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY MUSIC ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY E-MAGAZINES ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5</a></li>
<li><a href="#">LINK-6</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY PRODUCTS ▼</span></a>
<ul>
<li><a href="#">PRODUCT-1</a></li>
<li><a href="#">PRODUCT-2</a></li>
<li><a href="#">PRODUCT-3</a></li>
<li><a href="#">PRODUCT-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>MY FORUM ▼</span></a>
<ul>
<li><a href="#">LINK-1</a></li>
<li><a href="#">LINK-2</a></li>
<li><a href="#">LINK-3</a></li>
<li><a href="#">LINK-4</a></li>
<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>
</ul></li>
<li class="toplast"><a href="#" style="height:18px;line-height:18px;">RSS</a></li>
</ul>

5 σχόλια:

  1. Έχω αυτό το menu και στα τελευταιά στοιχεία του κύριου μενού, το υπομενού δεν έχει χώρο να αναπτυχθεί προς τα δεξιά (βγαινεί εκτός του εύρους του blog) και πρέπει να κάνεις scroll προς τα δεξιά για να τα δεις.
    Τί πρέπει να κάνω ώστε όταν το υπομενού δεν χωράει να ανοίξει προς τα δεξιά, να ανοίγει προς τα αριστερά;

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Γράψε πιο είναι το blog που το έβαλες να σου πώ.

      Διαγραφή
    2. http://theodwrapappa.blogspot.gr/

      Διαγραφή
    3. Προσπάθησε να φτιάξεις ένα ή και 2 μενού που να έχουν μόνο 1 υπομενού και να τα βάλεις τελευταία. Αλλιώς είναι αδύνατον να μην βγαίνουν έξω από το blog. Ή καλύτερα βάλε το Μέγα μενού ή το roll down menu ή αναπτυσόμενο μέγα μενού σε φύλλο ecxel όπως έχω βάλει εγώ πάνω αριστερά και γράφουν OPEN-1, OPEN-2, OPEN-3. Οταν έχεις πολλές αναρτήσεις δεν φτάνει ένα οριζόντιο μενού θέλεις σελίδα αρχειοθήκη.

      Διαγραφή
    4. Το σκέφτηκα και αυτό αλλά όπως θα είδες έχουν όλα βάθος στο menu και είναι δύσκολο να μαζευτούν περισσότερο οι κατηγορίες. Επίσης, το πιο menu είναι δεξιά τελευταίο εξαρτάται από την ανάλυση και μέγεθος της οθόνης, οπότε δεν υπάρχει κάποιο συγκεκριμένο τελευταίο menu! Τhx για την απάντησή σου! Θα προσπαθήσω κάτι από τα άλλα που πρότεινες...

      Καλό βράδυ!

      Διαγραφή

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

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