Οριζόντιο μενού με κατηγορίες.

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

Το μενού μπορείτε να το δείτε εδώ.


Γκρί μπάρα

1ο βήμα
στο Πρότυπο/επεξεργασία HTML κλικάρετε το κουτάκι Επέκταση προτύπων γραφικών στοιχείω.Ακολούθως με CNTRL+F ψάξτε για ]]></b:skin>
Πρίν από αυτό επικολλήστε τον παρακάτω κώδικα: 

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2ο βήμα.Ακολούθως πάλι με CNTRL+F ψάξτε για </head>

και πριν από αυτό επικολλήστε τον ακόλουθο κώδικα:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

3ο βήμα
Πηγαίντε τώρα στη Διάταξη/προσθήκη gadget ΗΤΜL επικολλήστε και σώστε τον εξής κώδικα:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>

</ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="http://symvl.blogspot.gr/2013/03/blog-post_11.html</a></li>
  </li></ul>
Έτοιμο!Τέλος, το μόνο που έχετε να κάνετε είναι να αντικαταστήσετε τις λέξεις Menu και Drop με αυτές που επιθυμείτε.Το σύμβολο #  αναντικαταστήστε το με το url της κατηγορίας σας.




Κόκκινη μπάρα

Για να κάνετε την μπάρα κόκκινη βάλτε στο 1ο βήμα τον παρακάτω κώδικα.

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #440909;
background: -webkit-gradient(linear, left top, left bottom, from(#F75A5A), to(#440909));
background: -moz-linear-gradient(top, #F75A5A, #440909);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #F1B6B6;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #861717;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #863D3D;
}

#jsddm li ul li a:hover {
background: #863D3D;

Αυτά για σήμερα.Για απορίες και δυσκολίες στην εγκατάσταση κάντε σχόλιο.

@Πνευματικά δικαιώματα ανάρτησης symvl.blogspot.com Επιτρέπεται η αντίγραφη με υποχρεωτικό ενεργό backlink πίσω στην πηγή με ένα κλικ.