MENU LATERAL PARA BLOGGER COM EFEITO HOVER

Por favor, siga as instruções abaixo para adicionar o código html ao seu blog:

1. Copie o código HTML fornecido abaixo.
2. Acesse a seção ‘Layout’ do seu blog.
3. Selecione a opção ‘Adicionar um Gadget’.
4. Escolha a opção ‘Adicionar HTML/JavaScript’.
5. Cole o código na área de ‘Conteúdo’. Deixe o campo ‘Título’ vazio.

CÓDITO HTML/GADGET:

<ul class="acorh">

  <li><a href="#">OPÇÃO 1</a>

    <ul>

      <li><a href="URL11">OPÇÃO  1.1</a></li>

      <li><a href="URL12">OPÇÃO  1.2</a></li>

    </ul>

  </li>

  <li><a href="#">OPÇÃO  2</a>

    <ul>

      <li><a href="URL21">OPÇÃO  2.1</a></li>

      <li><a href="URL22">OPÇÃO  2.2</a></li>

      <li><a href="URL23">OPÇÃO  2.3</a></li>

    </ul>

  </li>

  <li><a href="#">OPÇÃO  3</a>

    <ul>

      <li><a href="URL31">OPÇÃO  3.1</a></li>

      <li><a href="URL32">OPÇÃO  3.2</a></li>

    </ul>

  </li>

</ul>

Se quisermos outra seção, adicionamos:

  <li><a href="#">OPÇÃO  4</a>

    <ul>

      <li><a href="URL31">OPÇÃO  3.1</a></li>

      <li><a href="URL32">OPÇÃO  3.2</a></li>

    </ul>

  </li>

 

antes do último </ul> (que fica no final do código) e se quisermos outro submenu adicionamos:

      <li><a href="URL32">OPÇÃO 3.2</a></li>

Abaixo do mesmo código

################################################

Por favor, siga as instruções abaixo para adicionar o código CSS ao seu blog:

1. Copie o código CSS fornecido abaixo.
2. Acesse a seção ‘Tema’ do seu blog.
3. Selecione a opção ‘PERSONALIZAR’.
4. Escolha a opção ‘AVANÇADO’.
5. Procure por ADICIONAR CSS e cole o código no campo vazio. Faça as mudanças que achar necessárias. Antes de sair salve no icone de Disquete

CÓDIGO CSS:

ul.acorh,

ul.acorh * {

margin: 0;

padding: 0;

border: 0;

}

ul.acorh {

margin: 5px auto;

padding: 0;

list-style: none;

width: 100%;

font-size: 18px;

}

ul.acorh li {

list-style: none;

}

ul.acorh li a {

display: block;

padding: 10px 10px 10px 20px;

background: #ff3300;

color: #ffffff;

border-bottom: 5px solid #3c3c3d;

border-top: 3px solid #ffffff;

text-decoration: none;

box-sizing: border-box;

}

ul.acorh li ul {

max-height: 0;

margin: 0;

padding: 0;

list-style: none;

overflow: auto;

transition-duration: 20000ms;

}

ul.acorh li li a {

padding: 10px 10px 10px 40px;

background: #60ddfc;

color: #000000;

font-size: 16px;

border: 0;

border-bottom: 1px solid #fffafa;

box-sizing: border-box;

}

ul.acorc li li:last-child a {

border-bottom: 0;

}

ul.acorh li:hover ul {

max-height: 300px;

transition: .3s all ease-in;

}

ul.acorh li a:hover {

background: #000000;

color: #fff;

}

Este código (CSS) irá configurar o nosso menu, para modificá-lo alteraremos apenas os valores, para explicar melhor deixarei para vocês um vídeo tutorial.