Menu drop down LightBlue para Blogger

Menu drop down LightBlue
Olá amigos Mult-focos, veremos neste post um lindo menu drop down LightBlue,este menu tem muitas opções de abas suas cores  são neutras e podem ser mudadas para melhor se adaptar em seu blog.

Menu arco-íris para Blogger

Veja um demo clicando no botão abaixo ou em Result no box de códigos.
DEMO

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.


ex de configuração
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.



Postado por Mairink Oemes

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!

free website hit counter