Daisy Lea na propaganda
da 138 Water (+18) - FireLink
Candidata a 'Musa do MMA' é vascaína
e foi vencedora em lutas
Bella da Semana
Beatriz Fida
Sites que vocês adultos
Vão Gostar - Link Fixo

Menu CSS Simples Com Botão "Mais Informações" Com Efeito JQuery

Nesta postagem compartilho com vocês este tutorial mostrando mais um menu bem diferente. Esse contém um botão no canto direito; e ao clicar sobre ele se abre automaticamente uma nova aba de forma deslizante, e nessa parte você pode escrever o que você quiser passar aos seus visitantes.

O menu é esse abaixo:






Torne-se membro do site, basta clicar no botão abaixo e em seguida clicar em Seguir:


Para colocar no blogger...


Entre em "layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código
<style>
#Menu-DicasHot{height:50px;width:100%;position:relative}
#menu{background:#666;color:#eee;height:50px}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:50px}
#menu li{float:left;display:inline;position:relative;font:15px Oswald;text-transform:uppercase}
#menu li a{color:#eee}
#menu a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#eee}
#menu li:hover > a,#menu li a:hover{color:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:50px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#ddd;position:absolute;z-index:99;display:none;color:#555;text-transform:none}
#menu ul.menus a{color:#555}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#bbb;color:#fff}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:23px;right:9px}
#menu ul.menus a:hover{background:#bbb;color:#fff}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:20px;right:9px}
#menu a.trigger2:hover::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #333 ;position:absolute;top:20px;right:9px}

.plus-menu{float:right;position:absolute;background:#333;font-size:24px;color:#eee;width:50px;text-align:center;top:0;right:0;padding:15px 0 13px;cursor:pointer;border-radius:0 2px 0 0}
#search,.box-plusmenu {background: #ececec;text-align:center}
#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:0 0 10px;border:1px solid #ccc;border-radius:2px}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
#box,#box2{display:none;position:relative}
.close,.close2{float:right;position:absolute;font-size:18px;color:red;width:45px;text-align:center;top:0;right:0;padding:13px 0 10px;cursor:pointer}
</style>
<script type='text/javascript'>
//<![CDATA[
$(function() { 
    $('#run').click(function () {
    $('#box').slideDown()
});
    $('#run2').click(function () {
    $('#box2').slideDown()
});
    $('.close').click(function() {
    $('#box').slideUp()
    $('#box2').slideUp()
});
    $('.close2').click(function() {
    $('#box2').slideUp()
});
    $("#run3").click(function () { 
    $("#box3").toggle("slow") 
}); 
 });
//]]>
</script>
<div id='Menu-DicasHot'>
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a class='prett' href='#' title='Drop Menu'>Drop Menu</a>
<ul class='menus'>
<li><a href='#' title='Drop Menu1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a class='prett' href='#' title='Drop Menu1'>Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=id%7cen&amp;hl=en&#39;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
<span class='plus-menu' id='run2'>&#10010;</span>
</div>
<div id='box'>
<div id='search'>
<form action='/search' id='searchform' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Search here ...'/>
<button class='search-button' title='Search' type='submit'><img alt='search button' height='21' src='http://2.bp.blogspot.com/-2jHjDZuQt-Q/Uluj1K7q-AI/AAAAAAAAaPE/k2uOoGDyrjw/s1600/search.png' title='Search' width='21'/>
</button>
</form>
<div class='close'>&#10006;</div>
</div>
</div>
<div id='box2'>
<div class='box-plusmenu'>
<div class='content-box2' style='text-align:center'>
<span style='text-align:center;font:18px Oswald'>AQUI VOCÊ ESCREVE MAIS INFORMAÇÕES QUE VOCÊ QUERIA PASSAR AOS SEUS VISITANTES</span><br/>
<span style='text-align:center;font:16px &#39;PT Sans Narrow&#39;;'>Escreva aqui<br/>
  o que você deseja passar aos visitantes do seu site!<br/>
  DicasHot.</span>
<div style="text-align: right;">
<span style="font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/2014/05/menu-css-simples-com-botao-mais.html" target="_blank">DicasHot</a></span></div>

<div class='close2'>&#10006;</div>
</div>
</div>
</div>
Faça as alterações nas partes destacadas.

Tendo colado o código, basta salvar e pronto!!!

Menu CSS Simples Com Botão "Mais Informações" Com Efeito JQuery Menu CSS Simples Com Botão "Mais Informações" Com Efeito JQuery Reviewed by Muca on 5/23/2014 07:44:00 PM Rating: 5