Menu arco-íris para Blogger
Veja um demo clicando no botão abaixo ou em Result no box de códigos.Como adicionar em seu blog.
Copie o código HTML no Box de códigos e siga os procedimentos necessários de adicionar um gadget, se não sabe como aprenda AQUI.
Configurações basicas.
OBS: Caso queira mudar as cores do menu, é aconselhável ter um pouco de conhecimento.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav li').find('.sub_nav').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
$(this).find('.sub_nav').fadeIn(100);
}
, function() {
//Do the same again, only fadeOut this time.
$(this).find('.sub_nav').fadeOut(50);
}
);
}
);
</script>
<style>
#dropdown_nav a {
font-family:Arial, Sans-Serif;
font-size:15px;
font-weight:bold;
color:#68838B;
text-decoration:none;
}
#dropdown_nav {
width:960px;
padding:0px;
display:inline-block;
list-style:none;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border:1px solid #68838B;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#9AC0CD;
background:-moz-linear-gradient(#B2DFEE, #9AC0CD);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#B2DFEE), to(#9AC0CD));
}
#dropdown_nav li {
padding:10px 0px 10px 0px;
float:left;
position:relative;
display:inline-block;
}
#dropdown_nav li a {
padding:10px 15px 10px 15px;
text-shadow:-1px 1px 0px #f6f6f6;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border-right:1px solid #68838B;
}
#dropdown_nav li a:hover {
background:#B4CDCD;
background:-moz-linear-gradient(#B4CDCD, #D1EEEE);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#B4CDCD), to(#D1EEEE));
}
#dropdown_nav li a:active {
background:#9AC0CD;
background:-moz-linear-gradient(#9AC0CD, #B2DFEE);
background:-webkit-gradient(linear, 0 0, 0 100%, from#9AC0CD), to(#B2DFEE));
}
#dropdown_nav li a.first {
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
}
/*#dropdown_nav li a.last {
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
}
*/
/* Sub-Nav styling */
#dropdown_nav .sub_nav {
width:160px;
padding:0px;
position:absolute;
top:38px;
left:0px;
border:1px solid #68838B;
background:#9AC0CD;
}
#dropdown_nav .sub_nav li {
width:160px;
padding:0px;
}
#dropdown_nav .sub_nav li a {
display:block;
border-bottom:1px solid #68838B;
background:-moz-linear-gradient(#B2DFEE, #9AC0CD);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#B2DFEE), to(#9AC0CD));
}
#dropdown_nav .sub_nav li a:hover {
background:#B4CDCD;
background:-moz-linear-gradient(#B4CDCD, #D1EEEE);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#B4CDCD), to(#D1EEEE));
}
#dropdown_nav .sub_nav li a:active {
background:#9AC0CD;
background:-moz-linear-gradient(#9AC0CD, #B2DFEE);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#9AC0CD), to(#B2DFEE));
}
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
<li><a class="first" href="URL DO BLOG">Página Inicial</a></li>
<li><a href="URL">PRODUTO 1 </a>
<ul class="sub_nav">
<li><a href="URL">SUB PRODUTO 1</a></li>
<li><a href="URL">SUB PRODUTO 2</a></li>
<li><a href="URL">SUB PRODUTO 3</a></li>
<li><a href="URL">SUB PRODUTO 4</a></li>
<li><a href="URL">SUB PRODUTO 5</a></li>
<li><a href="URL">SUB PRODUTO 6</a></li>
<li><a href="URL">SUB PRODUTO 7</a></li>
</ul>
</li>
<li><a href="URL">PRODUTO 2</a>
<ul class="sub_nav">
<li><a href="URL">SUB PRODUTO 1</a></li>
<li><a href="URL">SUB PRODUTO 2</a></li>
<li><a href="URL">SUB PRODUTO 3</a></li>
<li><a href="URL">SUB PRODUTO 4</a></li>
</ul>
</li>
<li><a href="URL">PRODUTO 3</a>
</li>
<li><a class="last" href="URL">PRODUTO 4</a>
<ul class="sub_nav">
<li><a href="URL">SUB PRODUTO 1</a></li>
<li><a href="URL">SUB PRODUTO 2</a></li>
<li><a href="URL">SUB PRODUTO 3</a></li>
<li><a href="URL">SUB PRODUTO 4</a></li>
</ul>
</li>
</ul>
See the Pen CHqhf by Mairink (@Oemes) on CodePen.
0 comentários:
Postar um comentário
Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!