Έγχρωμο οριζόντιο CSS Menu


Αυτήν την περίοδο αποφασίσαμε να σας παρουσιάσουμε μια ενότητα αφιερωμένη αποκλειστικά σε οριζόντια menus που μπορείτε να προσθέσετε σαν απλά gadgets στις Σελίδες σας. Αφορά 13 παραδείγματα που θα σας τα παρουσιάσουμε αναλυτικά σε μεμονωμένες αναρτήσεις.
Ας δούμε το πρώτο παράδειγμα.

Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη Σελίδα σας:
  • Σύνδεση στον Blogger
  • Διάταξη / Προσθήκη gadget
  • Επιλέξτε HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:



<style>

.main-nav{list-style:none}
main-nav-wrap{margin: 19px 0 0 0
}.ie8 .main-nav-wrap{margin:0}
.main-nav li{
float:left;width:12.5%;
position:relative;
-moz-transition:background-color 0.4s ease;
-o-transition:background-color 0.4s ease;
-webkit-transition:background-color 0.4s ease;
-ms-transition:background-color 0.4s ease
}
.main-nav li:hover{
background:rgba(0,0,0,0.4);
-moz-transition:background-color 0.1s ease;
-o-transition:background-color 0.1s ease;
-webkit-transition:background-color 0.1s ease;
-ms-transition:background-color 0.1s ease
-moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 6px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;
}
.main-nav a{
border-top: 0 none;
color: black;
display: block;
font-family: Mistral,sans-serif;
font-size: 25px;
letter-spacing: 0.5px;
margin-left: -15px;
overflow: hidden;
padding: 10px;
position: relative;
text-align: center;
z-index: 2;
}
.ie8
.main-nav a:before{display:none
}.ie8
.main-nav a{padding:10px !important
}
.main-nav span{
display:block;
text-align:center;
font-size:9px;
white-space:nowrap
}
.main-nav .forums a:before{background-position:center -40px
}
.main-nav .snippets a:before{
background-position:center -80px
}
.main-nav .almanac a:before{
background-position:center -160px
}
.main-nav .videos a:before{
background-position:center -120px
}
.main-nav .gallery a:before{
background-position:center -200px
}
.main-nav .downloads a:before
{background-position:center -240px
}
.main-nav .deals a:before
{background-position:center -280px
}
.home .main-nav .articles a,.single-post .main-nav .articles a,.Vanilla .main-nav .forums a,.page-template-page-snippet-cat-php .main-nav .snippets a,.page-template-page-snippet-php .main-nav .snippets a,.page-template-video-archive-php .main-nav .videos a,.page-template-video-single-php
.main-nav .videos a,.page-template-page-almanac-group-php .main-nav .almanac a,.page-template-page-almanac-single-php .main-nav .almanac a,.post-type-archive-screenshot .main-nav .gallery a,.single-screenshot .main-nav .gallery a,.page-template-page-downloads-php .main-nav .downloads a,.page-template-page-deals-php .main-nav .deals a{color:black}
.main-nav li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px}.ie8 .main-nav li:before{display:none}.page-template-video-archive-php .main-nav .videos,.page-template-video-single-php .main-nav .videos,.main-nav .videos:hover{background:#01b0ec}.page-template-video-archive-php .main-nav .videos:before,.page-template-video-single-php .main-nav .videos:before{background:#0484b0}.home .main-nav .articles,.single-post .main-nav .articles,.main-nav .articles:hover{background:#ef7901}.home .main-nav .articles:before,.single-post .main-nav .articles:before{background:#cf7000}.Vanilla .main-nav .forums,.main-nav .forums:hover{background:#d54421}.Vanilla .main-nav .forums:before{background:#bb2904}.page-template-page-snippet-cat-php .main-nav .snippets,.page-template-page-snippet-php .main-nav .snippets,.main-nav .snippets:hover{background:#98bf0d}.page-template-page-snippet-cat-php .main-nav .snippets:before,.page-template-page-snippet-php .main-nav .snippets:before{background:#87a812}.page-template-page-almanac-group-php .main-nav .almanac,.page-template-page-almanac-single-php .main-nav .almanac,.main-nav .almanac:hover{background:#7449f1}.page-template-page-almanac-group-php .main-nav .almanac:before,.page-template-page-almanac-single-php .main-nav .almanac:before{background:#5531bf}.post-type-archive-screenshot .main-nav .gallery,.single-screenshot .main-nav .gallery,.main-nav .gallery:hover{background:#b147a3}.post-type-archive-screenshot .main-nav .gallery:before,.single-screenshot .main-nav .gallery:before{background:#922a84}.page-template-page-downloads-php .main-nav .downloads,.main-nav .downloads:hover{background:#f6b402}.page-template-page-downloads-php .main-nav .downloads:before{background:#d49b00}.page-template-page-deals-php .main-nav .deals,.main-nav .deals:hover{background:#8d8d8d}.page-template-page-deals-php .main-nav .deals:before{background:#5e5e5e}@-webkit-keyframes nav-1{50%{background:#ef7901}}@-moz-keyframes nav-1{50%{background:#ef7901}}.home .main-nav .articles{-webkit-animation:nav-1 1.5s 1s ease 1;-moz-animation:nav-1 1.5s 1s ease 1}@-webkit-keyframes nav-2{50%{background:#d54421}}@-moz-keyframes nav-2{50%{background:#d54421}}.home .main-nav .forums{-webkit-animation:nav-2 1.5s 1.1s ease 1;-moz-animation:nav-2 1.5s 1.1s ease 1}@-webkit-keyframes nav-3{50%{background:#98bf0d}}@-moz-keyframes nav-3{50%{background:#98bf0d}}.home .main-nav .snippets{-webkit-animation:nav-3 1.5s 1.2s ease 1;-moz-animation:nav-3 1.5s 1.2s ease 1}@-webkit-keyframes nav-4{50%{background:#01b0ec}}@-moz-keyframes nav-4{50%{background:#01b0ec}}.home .main-nav .videos{-webkit-animation:nav-4 1.5s 1.3s ease 1;-moz-animation:nav-4 1.5s 1.3s ease 1}@-webkit-keyframes nav-5{50%{background:#7449f1}}@-moz-keyframes nav-5{50%{background:#7449f1}}.home .main-nav .almanac{-webkit-animation:nav-5 1.5s 1.4s ease 1;-moz-animation:nav-5 1.5s 1.4s ease 1}@-webkit-keyframes nav-6{50%{background:#b147a3}}@-moz-keyframes nav-6{50%{background:#b147a3}}.home .main-nav .gallery{-webkit-animation:nav-6 1.5s 1.5s ease 1;-moz-animation:nav-6 1.5s 1.5s ease 1}@-webkit-keyframes nav-7{50%{background:#f6b402}}@-moz-keyframes nav-7{50%{background:#f6b402}}.home .main-nav .downloads{-webkit-animation:nav-7 1.5s 1.6s ease 1;-moz-animation:nav-7 1.5s 1.5s ease 1}@-webkit-keyframes nav-8{50%{background:#8d8d8d}}@-moz-keyframes nav-8{50%{background:#8d8d8d}}.home .main-nav .deals{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1}
</style>
<nav class='main-nav-wrap'>
<ul class='main-nav group'>
<li class='articles'><a href='/'>Home <span>Blogger Template</span></a></li>
<li class='snippets'><a href='http://YOURBLOG.blogspot.com/search/label?max-results=3'>Blog <span>ΠΕΡΙΓΡΑΦΗ</span></a></li>
<li class='forums'><a href='LINK'>TITLE 1<span>ΠΕΡΙΓΡΑΦΗ</span></a></li>
<li class='videos'><a href='LINK '>TITLE 2<span>ΠΕΡΙΓΡΑΦΗ</span></a></li>
<li class='almanac'><a href='LINK'>TITLE  3<span>ΠΕΡΙΓΡΑΦΗ</span></a></li>
<li class='gallery'><a href='LINK'>TITLE 4<span>ΠΕΡΙΓΡΑΦΗ</span></a></li>
<li class='downloads'><a href='LINK'>TITLE  5<span>ΠΕΡΙΓΡΑΦΗ</span></a></li>
<li class='deals'><a href='LINK'>TITLE 6<span>ΠΕΡΙΓΡΑΦΗ</span></a></li>
</ul>
</nav>
    • Συμπληρώστε τα στοιχεία που χρειάζεται και πατήστε αποθήκευση.
    Μπορείτε να το εγκαταστήσετε με τον ίδιο κώδικα και μέσα στον HTML κώδικα του προτύπου σας πάνω από τον τίτλο της Σελίδας σας ακολουθώντας τα εξής βήματα:
    • Σύνδεση στον Blogger
    • Πρότυπο / Επεξεργασία HTML / Συνέχεια 
    • Βρείτε την 
    • Επικολλήστε τον παραπάνω κώδικα ακριβώς μετά από αυτήν.
    Κατηγορίες:
    Σχόλια