Vários menus para o seu Blogger

Olá amigos Mult-focos!

Este é o primeiro poste de uma serie que vai se chamar: “Vários menus para o seu Blogger”.

Vamos postar vários menus e um deles vai combinar com o seu blog.

São menus fáceis de adicionar, pois serão todos adicionados feito gadget.

Os três  primeiros são lindíssimos, vou disponibilizar uma DEMO de todos na sequência é só você seguir nossos posts e terá a oportunidade de decidir qual combinará mais com seu template.

Bem como disse você vai adicionar como se adiciona um gadget fazendo antes as devidas modificações onde tem # é só substituir pelo link e onde esta escrito Produto, etc  é só substituir pelo nome correspondente ao link.

Abaixo tem o botão DEMO que te levará a uma visualização prévia do menu e logo depois o código  do mesmo.

Espero que gostem e se quiser ser avisado sempre que sair o post de outros menus da serie é só clicar AQUI e assinar nosso FEED. Obrigado!

Menu Black da Apple

DEMO

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{color:#fff;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #333}#cssmenu ul{list-style:none}#cssmenu > ul > li{float:left}#cssmenu > ul > li.active a{background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB8z4Xpvoatf410ZkG8UadZ3gJyf71mDNJdDtLKZR_mPcDSwIoAnHHDU7iHt0ywH3t6wfa12vJSN9Bwf6ymDmhPb065tu3CNRNfg2MtwnazgdYRfkhzMwWkCAdQTWODmRnFwrI2U1yc5-/s1600/grad_dark.png) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-moz-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-webkit-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;filter:none}#cssmenu > ul > li.active a:hover{background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);filter:none}#cssmenu > ul > li a{box-shadow:inset 0 0 0 1px #8a8a8a;-moz-box-shadow:inset 0 0 0 1px #8a8a8a;-webkit-box-shadow:inset 0 0 0 1px #8a8a8a;background:#4a4a4a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB8z4Xpvoatf410ZkG8UadZ3gJyf71mDNJdDtLKZR_mPcDSwIoAnHHDU7iHt0ywH3t6wfa12vJSN9Bwf6ymDmhPb065tu3CNRNfg2MtwnazgdYRfkhzMwWkCAdQTWODmRnFwrI2U1yc5-/s1600/grad_dark.png) repeat-x left top;background:-moz-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#626262),color-stop(100%,#787878));background:-webkit-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-o-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-ms-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:linear-gradient(to bottom,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);border-bottom:1px solid #5d5d5d;border-top:1px solid #5d5d5d;border-right:1px solid #5d5d5d;line-height:34px;padding:0 35px;filter:none}#cssmenu > ul > li a:hover{background:#8a8a8a url(http://goo.gl/X41IBq) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(50%,#4a4a4a),color-stop(51%,#3b3b3b),color-stop(100%,#525252));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);filter:none}#cssmenu > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #5d5d5d}#cssmenu > ul > li:last-child a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0}#cssmenu .has-sub:hover ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;/* IE7 */ *width:100%}#cssmenu .has-sub ul li{text-align:center}#cssmenu .has-sub ul li a{border-top:0 none;border-left:1px solid #5d5d5d;display:block;line-height:120%;padding:9px 5px;text-align:center}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="http://goo.gl/wAuWz3" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://goo.gl/NguXbL" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="http://goo.gl/wAuWz3" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://goo.gl/NguXbL" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="http://goo.gl/wAuWz3" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Não edite este código CSS Drop Down Menu ou não vai funcionar --><br /> <br /> <br /> <br /> <br /> <!-- Personalize seus links --><br /> <br /> <br /> <div id="cssmenu"> <ul> <li class="active"><a href="index.html"><span>Página Inicial</span></a></li> <li class="has-sub"><a href="#"><span>Produto</span></a><br /> <ul> <li><a href="#"><span>Produto 1</span></a></li> <li><a href="#"><span>Produto 2</span></a></li> <li class="last"><a href="#"><span>Produto 3</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Produto </span></a><br /> <ul> <li><a href="#"><span>Produto 1</span></a></li> <li class="last"><a href="#"><span>Produto 2</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contato</span></a></li> </ul> </div>



Menu Apple CSS3

DEMO

<style type="text/css">#cssmenu ul{margin:0;padding:7px 6px 0;background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvENm0InOQgGJJM_091OsH6r7PZQu9Lq5dmeaZkLmB3pqkwhBxKvIlb9Dxk6ZDrVSmCf5qzy1H2DkHAby05AlUHKSUDXScsEQfh_IpY-7HdSFg1W7b5XQyZtUGlrxP5zoa_Nq97MqnudIO/s1600/overlay.png) repeat-x 0 -110px;line-height:100%;border-radius:1em;font:normal 0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0 8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-decoration:none;display:block;padding:8px 20px;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenu a:hover{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover > a{background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvENm0InOQgGJJM_091OsH6r7PZQu9Lq5dmeaZkLmB3pqkwhBxKvIlb9Dxk6ZDrVSmCf5qzy1H2DkHAby05AlUHKSUDXScsEQfh_IpY-7HdSFg1W7b5XQyZtUGlrxP5zoa_Nq97MqnudIO/s1600/overlay.png) repeat-x 0 -40px;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvENm0InOQgGJJM_091OsH6r7PZQu9Lq5dmeaZkLmB3pqkwhBxKvIlb9Dxk6ZDrVSmCf5qzy1H2DkHAby05AlUHKSUDXScsEQfh_IpY-7HdSFg1W7b5XQyZtUGlrxP5zoa_Nq97MqnudIO/s1600/overlay.png) repeat-x 0 -40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul li:hover a,#cssmenu li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none}#cssmenu ul ul a:hover{background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvENm0InOQgGJJM_091OsH6r7PZQu9Lq5dmeaZkLmB3pqkwhBxKvIlb9Dxk6ZDrVSmCf5qzy1H2DkHAby05AlUHKSUDXScsEQfh_IpY-7HdSFg1W7b5XQyZtUGlrxP5zoa_Nq97MqnudIO/s1600/overlay.png) repeat-x 0 -100px !important;color:#fff !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}#cssmenu li:hover > ul{display:block}#cssmenu ul ul{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvENm0InOQgGJJM_091OsH6r7PZQu9Lq5dmeaZkLmB3pqkwhBxKvIlb9Dxk6ZDrVSmCf5qzy1H2DkHAby05AlUHKSUDXScsEQfh_IpY-7HdSFg1W7b5XQyZtUGlrxP5zoa_Nq97MqnudIO/s1600/overlay.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}#cssmenu ul ul li{float:none;margin:0;padding:3px}#cssmenu ul ul a,#cssmenu ul ul a:link{font-weight:normal;font-size:12px}#cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}* html #cssmenu ul{height:1%}</style><a href="http://mult-focos.blogspot.com.br/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="http://goo.gl/wAuWz3" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://mult-focos.blogspot.com.br/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="http://goo.gl/wAuWz3" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://mult-focos.blogspot.com.br/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="http://goo.gl/wAuWz3" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Não edite este código CSS Drop Down Menu ou não vai funcionar --><br /> <br /> <br /> <br /> <br /> <!-- personalizar seus links menus --><br /> <br /> <br /> <div id="cssmenu"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Produto</span></a><br /> <ul> <li><a href="#"><span>Widgets</span></a></li> <li><a href="#"><span>Menus</span></a></li> <li class="last"><a href="#"><span>Produto</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Produto</span></a><br /> <ul> <li><a href="#"><span>Sobre</span></a></li> <li class="last"><a href="#"><span>Produto</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contato</span></a></li> </ul> </div>




Red & Grey Rough Drop Down Menu 

DEMO

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/highlight-bg_zps05cf52e7.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/menu-bg_zpsa18431d5.png) repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #9e3825;text-shadow:0 -1px 0 rgba(116,37,2,0.7);line-height:18px}#cssmenu > ul > li:hover > a{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/hover_zpse8322f20.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/active_zps9cea2baf.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(http://i1316.photobucket.com/albums/t609/Multfocos/highlight-bg_zps05cf52e7.png) repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu > ul ul li a{padding:18px 26px;display:block;color:#393939;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;text-shadow:0 1px 0 white}#cssmenu > ul ul li a:hover{border-left:4px solid #de553b;background:url(http://i1316.photobucket.com/albums/t609/Multfocos/hover_zpse8322f20.png) repeat;color:white;text-shadow:0 1px 0 black}#cssmenu > ul ul li a:active{background:url(http://i1316.photobucket.com/albums/t609/Multfocos/menu-bg_zpsa18431d5.png) repeat}</style><a href="http://mult-focos.blogspot.com.br/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="http://i1316.photobucket.com/albums/t609/Multfocos/blank_zps1d71c95b.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://mult-focos.blogspot.com.br/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="http://i1316.photobucket.com/albums/t609/Multfocos/blank_zps1d71c95b.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="http://i1316.photobucket.com/albums/t609/Multfocos/blank_zps1d71c95b.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Não edite este código CSS Drop Down Menu ou não vai funcionar --><br /> <br /> <br /> <br /> <br /> <br /> <!-- personalizar seus links menus --><br /> <br /> <br /> <div id="cssmenu"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Produto</span></a><br /> <ul> <li><a href="#"><span>Widgets</span></a></li> <li><a href="#"><span>Menus</span></a></li> <li class="last"><a href="#"><span>Produto</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Produto</span></a><br /> <ul> <li><a href="#"><span>Sobre</span></a></li> <li class="last"><a href="#"><span>produto</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contato</span></a></li> </ul> </div>