Tech Time: menu

Εμφάνιση αναρτήσεων με ετικέτα menu. Εμφάνιση όλων των αναρτήσεων

Δευτέρα 1 Ιουλίου 2019

Css Bevel Vertical Menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
κάθετο vertical menu για το blog μας!Μπαίνει στην αριστερή η δεξιά sidebar
του blog μας, η και στο footer της σελίδας μας, εάν υπάρχει χώρος!Διαθέτει και
Hover effect στο mouseover του κέρσορα μας όπως θα

δείτε στο DEMO

Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτό...

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->

..................................................................................................................................................................

<style type="text/css">

.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}

.bevelmenu li a{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
}

.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}

</style>
<ul class="bevelmenu"><li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL" >ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>

................................................................................................................................................................

ΑΛΛΑΓΕΣ

ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!

ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to dynamicdrive.com

Edit by

Παρασκευή 10 Μαΐου 2019

3D flying book navigation menu bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα οριζόντιο
menu για τα blog μας!Είναι αρκετά μεγάλο σε κατηγορίες, διαθέτει ένα
πολύ ωραίο 3d flying effect και είναι ιδανικό για blogs που διαθέτουν
πολλές κατηγορίες θεμάτων!

Δείτε εδώ το DEMO

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει κάντε

επικόλληση τον ακόλουθο κώδικα:-->

......................................................................................................................................................

<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Αρχική</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">Γενικές ειδήσεις</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">Ποδόσφαιρο</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Επικοινώνια</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Αθλητικά</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Πιλότος</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Κίνηση</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">Εσωτερικά</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Καιρός</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

............................................................................................................................................................
ΑΛΛΑΓΕΣ

#url--> Αντικαταστήστε όλα τα #url με τα urls (links) των δικών

σας διευθύνσεων!

Αρχική--> Εδώ βάζετε τις δικές σας ονομασίες που

θέλετε να φαίνονται στις ετικέτες του menu!

Mόλις τελειώσετε από όλα Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to avdhootblogger.com

Edit by

Τετάρτη 6 Μαρτίου 2019

CSS3 animated vertical menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
κάθετο vertical menu για το blog μας!Μπαίνει στην αριστερή η δεξιά sidebar
του blog μας, η και στο footer του blog μας, και είναι με κώδικα Css3 ο οποίος
του δίνει ένα πολύ ωραίο animated slanted menu!

Δείτε το DEMO

Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->

..................................................................................................................................................................

...................................................................................................................................................................

ΑΛΛΑΓΕΣ

ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!

ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to dynamicdrive.com

Edit by

Παρασκευή 15 Ιουνίου 2018

Grey Side Menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα κάθετο (vertical)
big menu για την
αριστερή η δεξιά sidebar του blog μας!Χωρίζεται σε 2 μέρη με
αρκετές κύριες κατηγορίες,
απλό μενού χωρίς υποκατηγορίες και με hover effect
στο mouseover του κέρσορα μας!

Δείτε εδώ το DEMO

Η εγκατάσταση του είναι απλή..

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
..............................................................................................................................................................

<style type="text/css">

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>

<div class="urbangreymenu">

<h3 class="headerbar">ΤΙΤΛΟΣ 1</h3>
<ul><li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>

<h3 class="headerbar">ΤΙΤΛΟΣ 2</h3>
<ul><li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>

</div>

...............................................................................................................................................................

ΑΛΛΑΓΕΣ

ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!

ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to dynamicdrive.com

Edit by

Δευτέρα 11 Ιουνίου 2018

CSS3 menu with social bar and Google Custom search box

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
οριζόντιο widget menu με κώδικα CSS3 το οποίο εκτός από τα γνωστά Links -κατηγορίες-
που έχουν όλες οι μπάρες μενού
(menu bars)
διαθέτει επιπλέον και social
network tabs
αλλά και ενσωματωμένη φόρμα αναζήτησης!

Δείτε εδώ το DEMO

και για το εγκαταστήσετε και εσείς

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
............................................................................................................................................................

<style>
#bsCSSmenu{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
width:960px;
margin: 0 0 0 0px;
padding: 12px 0 8px 0;
clear: both;
background: #111111 left bottom no-repeat;
}
#bsCSSmenu .catList{
padding: 4px 0 0 35px;
float: left;
    margin-top:-3px;
}
#bsCSSmenu .pageList{
padding: 8px 0px 0 0;
float: right;
}
#bsCSSmenu ul li{
float: left;
margin: 0 18px 0 0 ;
}
#bsCSSmenu a{
color: #fff;
    list-style:none;
    text-decoration: none;
}
#bsCSSmenu a:hover{
color: #919191;
}
#bsCSSmenu li {
list-style:none;
text-decoration:none;
}
#bssearch{
margin: -2px 20px 0 0;
float: right;
}
#bssocial{
margin-left: 100px;
}

</style>
<div class="bsmenustart" id="bsCSSmenu">
<ul class="catList">
<li class="bscat-item-1"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-2"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-3"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-4"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-5"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-6"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-7"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
<li class="bscat-item-8"><a href="ΔΙΕΥΘΥΝΣΗ URL">TITΛΟΣ</a></li>
</ul>
<div id="bssearch">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUs3qPoDZhh_Wcx2L_lKIuifip8S1Mm9FYnU574NQAcocHnPLy0YljVFdiZy8ytSSLCLGqT-Szzucrrd9mlNIz339Z3Xp7mCRS9oB4Kp5Qy84Bf-33FjLSW1m1T6hR5cObeqVcugtUnL9J/s1600/BS+Google+Custom+Search.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggerspice.com/" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script>
    </div>
<div id="bssocial">
<a alt="Subscribe to RSS" class="bssocialicon" href="http://feeds.feedburner.com/USERNAME FEED" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDadXdOhDr8t5EJVC_E5VuT3Ez8Y7dthNLSOeiJqjuj-rA7WzNesXazQxt9vBX6djc5he59LO-bFp1G1QKPabp_ePt6CnNseL-pUfRGLA1yZTR9PHmMcSetMu1YhciPL8Z2kgBF-bAMbDI/s1600/BS+RSS-icon+Menu.png" style=""></a>
<a alt="Follow Us" class="bssocialicon" href="http://twitter.com/ USERNAME TWITTER " target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ6K0WQov7Sv_4J0WgR5CIsQRtlO-C7OKpaWTFHBqZXJegdcNPdiU1toFc_whtPnrHkXJKGm1XpcLou6JvqqV47dUc2wYNlJ41rFoRA5NbnlVmw31L16rBgrCoYnV0gVRjtFazWGxWbsLm/s1600/BS+twitter-icon+menu.png" /></a>
<a alt="Become a Fan" class="bssocialicon" href="http://www.facebook.com/ USERNAME FACEBOOK " target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHAQDUOBPVyPLVyLTE-D5nVVm9Zr1lWIUDHwA_RSqdAtnKKO7YnSVUkZ8sST4xDF9qTcGhLFMRDW69fiWd-jRhkpDwgInx3lTVZeaXlVnlv5J_nzH7HQRc3YbhF-9mIBlUbJyzRNDEjNW/s1600/BS+facebook-icon+menu.png" /></a></div>
</div>

.................................................................................................................................................................
ΑΛΛΑΓΕΣ

ΔΙΕΥΘΥΝΣΗ URL --Εδώ βάζετε το link της διεύθυνσης σας!

TITΛΟΣ --Εδώ βάζετε τον τίτλο που θέλετε!

Αντικαταστήστε και όλα τα USERNAMES με τα αντίστοιχα δικά σας που έχετε
στα social networks!

Μόλις τελειώσετε Αποθήκευση και είστε έτοιμοι!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to bloggerspice.com

Edit by

Πέμπτη 19 Απριλίου 2018

Horizontal Iconic Menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο και
πρωτότυπο οριζόντιο menu για τα blog μας!Η πρωτοτυπία του και η διαφορά του
με άλλα παρόμοια widgets είναι ότι στην αρχική του μορφή του, το menu
φαίνεται σαν κουμπί και μόλις "κλικάρετε" το κουμπί, αναπτύσσεται η μπάρα
με τις κατηγορίες!Σε αριστερή η δεξιά sidebar είναι δύσκολο να τοποθετηθεί
λόγω μεγέθους όταν αναπτύσσεται, εκτός αν έχετε μεγάλη sidebar η αφαιρέσετε
κατηγορίες από το menu!

Δείτε εδώ το DEMO

Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
..............................................................................................................................................................

<style>

.iconicmenu {
    position: relative;
    height: 45px;
    overflow: hidden;
    }

.iconicmenu, .iconicmenu * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    }

.iconicmenu > label { /* Main label icon to toggle menu state */
    z-index: 1000;
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    float: left;
    top: 0;
    left: 0;
    background: white;
    text-indent: -1000000px;
    border: 6px solid black; /* border color */
    border-width: 6px 0;
    cursor: pointer;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; /* transition for flipping label */
    }

.iconicmenu > label::after { /* inner stripes inside label */
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 18%;
    top: 19%;
    left: 0;
    border: 6px solid black; /* border color */
    border-width: 6px 0;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; /* transition for flipping label */
    }

.iconicmenu ul { /* UL menu inside container */
    margin: 0;
    padding: 0;
    position: absolute;
    margin-left: 40px;
    background: #eee;
    left: -100%; /* hide menu intially */
    height: 40px; /* height of menu */
    font: bold 14px Verdana;
    text-align: center;
    list-style: none;
    opacity: 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    -moz-perspective: 10000px;
    perspective: 10000px;
    -moz-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in; /* transition for animating UL in and out */
    }

.iconicmenu li {
    display: inline;
    margin: 0;
    padding: 0;
    }

.iconicmenu ul label { /* label button inside UL to close menu */
    cursor: pointer;
    position: relative;
    height: 100%;
    text-align: center;
    }

.iconicmenu ul label::after { /* label button x */
    content: "x";
    display: inline-block;
    line-height: 14px;
    color: white;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    background: black;
    font-size: 18px;
    margin: 5px;
    margin-top: 10px;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }

.iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {
    -moz-transform: rotatey(180deg);
    -ms-transform: rotatey(180deg);
    -webkit-transform: rotatey(180deg);
    transform: rotatey(180deg); /* flip labels vertically onMouseover */
    }

.iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="
checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {
    border-color: darkred; /* highlight color of main menu label onMouseover */
    }

.iconicmenu input[type="checkbox"]:checked ~ ul {
    left: 8px; /* Animate menu into view */
    opacity: 1;
    -moz-box-shadow: 1px 1px 5px gray;
    -webkit-box-shadow: 1px 1px 5px gray;
    box-shadow: 1px 1px 5px gray;
    }

.iconicmenu li a {
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    color: black;
    margin: 0;
    padding: 10px;
    padding-right: 15px;
    height: 100%;
    }

.iconicmenu li a:hover {
    background: black;
    color: white;
    }

/* ----------------------------- CSS Media Queries ----------------------------- */

/*
These rules control which portions of the menu gets shown when the screen size is below a certain width.
By default 2 stages are defined depending on browser screen width.
*/

@media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */
    .iconicmenu input[type="checkbox"]:checked ~ label {
        display: none;
        }
    .iconicmenu input[type="checkbox"]:checked ~ ul {
        margin-left: 0;
        }
    }

@media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */
    .iconicmenu {
        overflow: visible;
        }
    .iconicmenu ul {
        height: auto;
        }
    .iconicmenu ul li {
        min-width: 200px;;
        display: block;
        }
    .iconicmenu ul li a {
        float: none;;
        text-align: left;
        }
    }

</style>


<div class="iconicmenu">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>

<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><label for="togglebox"></label></li>
</ul>
<label class="toggler" for="togglebox">Menu</label>
</div>

...............................................................................................................................................................
ΑΛΛΑΓΕΣ

ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!

ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!

Εάν θέλετε να αφαιρέσετε Link για να μικρύνει το μενού η δεν θέλετε τόσες
κατηγορίες, τότε από τον κώδικα αφαιρείτε αυτήν την σειρά:

<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li> .Για κάθε κατηγορία και μία σειρά!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to dynamicdrive.com

Edit by

Δευτέρα 22 Ιανουαρίου 2018

CSS3 Dropdown Menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε μία οριζόντια
μπάρα μενού(menu bar) για τα blog μας!
Έχει drop down submenus
για αρκετές
κατηγορίες και διαθέτει και ένα απλό hover effect!Είναι με κώδικα Css3 κάνει
Load γρήγορα και δεν καθυστερεί το άνοιγμα του blog μας!

Δείτε εδώ το DEMO

<center><style>
/* The CSS Code for the menu starts here bloggerspice.com */
#BloggerSpiceSimpleMenu {
width:800px;
background:#005C91;
border-bottom: 5px solid #1A1A1A;
border-top: 1px solid #1A1A1A;
clear: both;
overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
}
#BloggerSpiceSimpleMenu ul {
float: left;
width: 100%;
}
#BloggerSpiceSimpleMenu li {
float: left;
list-style-type: none;
}
#BloggerSpiceSimpleMenu li a {
background:#005C91;
color: #fff;
display: block;
font-size: 14px;
padding: 5px 17px 5px 15px;
position: relative;
text-decoration: none;
}
#BloggerSpiceSimpleMenu li a:hover {
background:#000000;
color: #fff;
}
#BloggerSpiceSimpleMenu li li a {
background: none;
background-color: #111111;
border: 1px solid #1A1A1A;
border-top-width: 0;
color: #fff;
font-size: 14px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 130px;
}
#BloggerSpiceSimpleMenu li li a:hover {
background: none;
background-color: #005C91;
}
#BloggerSpiceSimpleMenu li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 160px;
z-index: 9999;
}
#BloggerSpiceSimpleMenu li:hover ul {
left: auto;
}

</style>
<div id="BloggerSpiceSimpleMenu">
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Home</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Sub Menu 1</a>
<ul>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"> Menu 1</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"> Menu 2</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"> Menu 3</a></li>
</ul>
</li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Sub Menu 2</a>
<ul>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"> Menu 1</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"> Menu 2</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL"> Menu 3</a></li>
</ul>
</li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Menu 1</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Menu 2</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Menu 3</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Menu 4</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Menu 5</a></li>
</div>

</center>

..............................................................................................................................................................

ΑΛΛΑΓΕΣ

ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!!