Menu horizontal CSS

Por math;Ás 08:15 Dia 13 de fev. de 2012

2 ESTILO DE CSS
Nesse tutorial, ensinarei  colocar um menu horizontal, em seu blog, lembrando que antes, faça um backup do seu template:

1ª Parte: CSS
Procure pela linha:

]]><b:skin>

Antes dessa linha, cole o seguinte código em CSS:

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

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

#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ª Parte: Javascript
Procure pela linha:

</head>

Antes dessa linha, cole o seguinte código:

<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ª parte: Adicionando o gadget
Vá em em painel, depois em design, elementos da página, adicionar gadget, e Html/Javascript, aí cole o seguinte código:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
 <li><a href="#">Menu 2</a>
 <li><a href="#">Menu 3</a>
 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">DesignNewsOnline</a></li>
  </li></li></li></li></ul>

Demo