Αυτήν την περίοδο αποφασίσαμε να σας παρουσιάσουμε μια ενότητα αφιερωμένη αποκλειστικά σε οριζόντια menus που μπορείτε να προσθέσετε σαν απλά gadgets στις Σελίδες σας. Αφορά 13 παραδείγματα που θα σας τα παρουσιάσουμε αναλυτικά σε μεμονωμένες αναρτήσεις.
Ας δούμε το πρώτο παράδειγμα.
DEMO
Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη Σελίδα σας:
Σύνδεση στον 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>
ΠΕΡΙΓΡΑΦΗ </span></a></li>
<li class='snippets'><a href='
LINK'>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 / Συνέχεια
Βρείτε την <body>
Επικολλήστε τον παραπάνω κώδικα ακριβώς μετά από αυτήν.
LIVE DEMO
