.

sexta-feira

Textual description of firstImageUrl

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

ACESSOS:
Deixe seu comentário


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!!!


RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}


 
.