Como colocar um menu do menu maker no blogger - Parte 2

 Na primeira parte do tutorial ensinei como colocar um menu do site menu maker no blogger, hoje ensinarei como colocar mais de um menu no blogger sem que um interfira no funcionamento do outro.


 Como colocar mais de um menu do menu maker no blogger

  O problema de usar mais de um menu do site menu maker é que todos os menus usam a mesma ID, a ID é um código css que define a aparência, como as cores, as larguras, etc, ela vem escrita assim "#cssmenu". Um site ou blog não podem conter em seu código mais de uma id com o mesmo nome, isso pode gerar conflitos e no caso do blogger pode dar problema quando for salvar o template. Para resolver isso é muito simples, basta alterar o nome da id.
 No exemplo abaixo eu usei dois menus, no primeiro deixei como estava, não fiz nenhuma alteração, já no segundo menu eu alterei o nome para #cssmenu2, as alterações devem ser feitas tanto no css (o código que você coloca em modelo - personalizar) quanto no html (o código que você insere como html / javascript, como gadget).

 Abaixo está o código original do menu Flyout Menu

Código css (para colocar em modelo - personalizar, avançado - adicionar css)

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
}
#cssmenu ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
  float: left;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  top: 0;
  left: 100%;
}
#cssmenu ul li {
  float: none;
}
/* Custom Stuff */
#cssmenu span,
#cssmenu a {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
}
#cssmenu {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  font-weight: 600;
  width: 200px;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu > ul > li:first-child {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li:last-child {
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li ul ul li:first-child {
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li ul ul li:last-child {
  -moz-border-radius: 0 0 5px 0;
  -webkit-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu ul,
#cssmenu li {
  width: 100%;
}
#cssmenu li {
  background: #c0bebf url(imagem.png) repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2edea), color-stop(1, #c0bebf));
  background-image: -webkit-linear-gradient(top, #f2edea, #c0bebf);
  background-image: -moz-linear-gradient(top, #f2edea, #c0bebf);
  background-image: -ms-linear-gradient(top, #f2edea, #c0bebf);
  background-image: -o-linear-gradient(top, #f2edea, #c0bebf);
  background-image: linear-gradient(#f2edea, #c0bebf);
}
#cssmenu li:hover,
#cssmenu li.active {
  background: #606a76 url(separator.png) repeat-x;
  -moz-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4a5662), color-stop(1, #606a76));
  background-image: -webkit-linear-gradient(top, #4a5662, #606a76);
  background-image: -moz-linear-gradient(top, #4a5662, #606a76);
  background-image: -ms-linear-gradient(top, #4a5662, #606a76);
  background-image: -o-linear-gradient(top, #4a5662, #606a76);
  background-image: linear-gradient(#4a5662, #606a76);
}
#cssmenu li:hover > a,
#cssmenu li.active > a {
  color: #FFF;
}
#cssmenu a {
  color: #666666;
  line-height: 160%;
  padding: 16px 8px 16px 28px;
  width: 164px;
}
#cssmenu ul ul {
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  width: 200px;
}
#cssmenu ul ul li {
  background: #606a76;
  border-bottom: 1px solid #59636F;
  -moz-box-shadow: inset 0 1px 0 #66707c;
  -webkit-box-shadow: inset 0 1px 0 #66707c;
  box-shadow: inset 0 1px 0 #66707c;
}
#cssmenu ul ul li:hover {
  background: #4a5662;
}
#cssmenu ul ul li a {
  color: #FFF;
}
#cssmenu ul ul a,
#cssmenu ul ul a span {
  font-size: 12px;
}

Código html (para colocar como gadget, layout - adicionar gadget, escolher html / javascript)

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

 Abaixo está código original do menu Vertical Massive Blue

Código css (para colocar em modelo - personalizar, avançado - adicionar css)

#cssmenu {
  background: #333;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 12em;
}
#cssmenu li {
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}
#cssmenu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}
#cssmenu a:hover {
  background: #2580a2 url('hover.gif') left center no-repeat;
  color: #fff;
  padding-bottom: 8px;
}


Código html (para colocar como gadget, layout - adicionar gadget, escolher html / javascript)


<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

 Como podemos ver as ids dos menus Flyout e Vertical Massive Blue têm o mesmo nome, então teremos que alterar o nome de uma delas, nesse caso mudarei o nome da id do menu Vertical Massive Blue.

 Veja como ficou:

Código css:

#cssmenu2 {
  background: #333;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 12em;
}
#cssmenu2 li {
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}
#cssmenu2 a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}
#cssmenu2 a:hover {
  background: #2580a2 url('hover.gif') left center no-repeat;
  color: #fff;
  padding-bottom: 8px;
}

Código html:

<div id='cssmenu2'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

 A única alteração que fiz foi acrescentar o número 2 depois do nome, dessa forma os dois menus funcionarão perfeitamente sem que um interfira no funcionamento do outro.

leia também:


Assine nossa newsletter e seja avisado por e-mail de novos posts.
Marcadores: , , ,

2 comentários:

  1. Unknown5 de setembro de 2014 às 20:42

    ótima postagem... porém estou tendo muita dificuldade em ajustar as larguras e distancias, e para que elas fiquem fixas. É difícil de visualizar em navegadores diferentes. Será que voce poderia me ajudar?

    Meu blog é www.revistaoferro.com.br

    É sobre Fisiculturismo Natural, musculação e dietas!

    Grato,
    Gabriel Ortiz

    ResponderExcluir
    Respostas
    1. lorena10 de setembro de 2014 às 15:22

      a largura do menu esta definida para ocupar 100% da largura da página, tente declarar um valor menor, por exemplo width: 80% em #navtop, as distancias podem ser alteradas mudando o valor do padding-left e do padding-right em #navtop li, quanto menor o valor menos será a distancias entre os itens, veja se resolve

      Excluir

Assinar: Postar comentários (Atom)