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>≡<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('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li> </ul> </nav> <span class='plus-menu' id='run2'>✚</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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here ...'/> <button class='search-button' title='Search' type='submit'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixC9aA2KSiYHGLHD0ZqRXdFOsUMfc6ckcnm3ESIbNNwutWazwiOGMBmpZToa2Ij5agKUC3eNd-UTw5kNRxt6OYhcObYyBBKmhz67NDhGjA3QMSKnR9OXNfuIEb8W3hI8jcbjiDS7rQbK4o/s1600/search.png' title='Search' width='21'/> </button> </form> <div class='close'>✖</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 'PT Sans Narrow';'>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'>✖</div> </div> </div> </div>Faça as alterações nas partes destacadas.
Tendo colado o código, basta salvar e pronto!!!
