HORIZONTAL MENU-6

HOME
MY POSTS ▼
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- BEST POSTS ►
  - MY BEST POSTS
MY LINKS ▼
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- BEST LINKS ►
  - MY BEST LINKS
MY FILES ▼
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- BEST FILES ►
  - MY BEST FILES
MY PHOTOS ▼
MY VIDEOS ▼
MY PRESENTATIONS ▼
MY E-BOOKS ▼
MY MUSIC ▼
MY E-MAGAZINES ▼
- LINK-1
- LINK-2
- LINK-3
- LINK-4
- LINK-5
- LINK-6
MY PRODUCTS ▼
MY FORUM ▼
RSS

ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ 2 ΥΠΟΜΕΝΟΥ ΣΑΝ GADGET Νο 6.

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

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

/* 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>

<li class="topmenu"><a href="http://the-best-widgets.blogspot.gr/p/my-posts.html" style="height:18px;line-height:18px;">MY POSTS ▼</a>

<ul>

<li><a href="#">BEST POSTS ►</a>

<ul>

<li><a href="#">MY BEST POSTS</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY LINKS ▼</a>

<ul>

<li><a href="#">BEST LINKS ►</a>

<ul>

<li><a href="#">MY BEST LINKS</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY FILES ▼</a>

<ul>

<li><a href="#">BEST FILES ►</a>

<ul>

<li><a href="#">MY BEST FILES</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY PHOTOS ▼</a>

<ul>

<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY VIDEOS ▼</a>

<ul>

<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY PRESENTATIONS ▼</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;">MY E-BOOKS ▼</a>

<ul>

<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY MUSIC ▼</a>

<ul>

<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY E-MAGAZINES ▼</a>

<ul>

</ul></li>

<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">MY PRODUCTS ▼</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;">MY FORUM ▼</a>

<ul>

<li><a href="#">LINK-5 AUTO RESIZE COLUMNS</a></li>

</ul></li>

</ul>