Efeito de ícones + texto

Detalhes da questão

Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Olá!

Gostaria de saber o código deste efeito:


Link do efeito: http://ismaelsd.forumeiros.com.pt/forum

Mas para a versão PhpBB3!

Código:

<ul id="vertical_slider"><li><a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Ultimele Subiecte</strong><br>Urmareste ultimele subiecte ale <br>forumului <br>&nbsp;</p></a></li><li><a href="#" class="news" style="width: 128px; overflow: hidden;"><p><strong style="font-size:24px;">Anunturi/Actualizari</strong><br>Ultimele noutati si actualizari de pe <br>forumul .<br>&nbsp;</p></a></li><li><a href="#" class="suport" style="width: 128px; overflow: hidden;"><p><strong>Suport</strong><br>Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit<br> sed do eiusmod tempor incididunt</p></a></li><li><a href="#" class="portfolio" style="width: 128px;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>

Painel de Controle > Visualização > Página inicial > Geral > Mensagem na página inicial

Parece que falta algum código de .CSS veja:
- http://master-publicitario.forumeiros.com/

Primeiramente a gente vai fazendo cada passo, okay?
Adicione este código pra ficar no vertical,

Código:

#vertical_slider li a p {
    line-height: normal;
    padding: 0 0 0 135px;
}
#vertical_slider li a {
    display: inline-block!important;
    height: 90px;
    line-height: 90px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: 128px;
}
#vertical_slider a {
    color: #999;
    text-decoration: none;
}

Até

Colocado mas desapareceu o texto.

Olá!

Aqui está:

Código:

<script type="text/javascript">
  $(function() {
      $("#vertical_slider li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450
              });
          });
      }); /*To use this you need to load jquery easing plugins*/
      $("#vertical_slider.easing li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeOutBack'
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeInBack'
              });
          });
      });
  });
</script>
<li>
  <a href="/rss" class="rss_feed">
      <p><strong>Ultimele Subiecte</strong><br />Urmareste ultimele subiecte ale <br />forumului <br>&nbsp;</p>
  </a>
</li>
<li>
  <a href="#" class="news">
      <p><strong style="font-size:24px;">Anunturi/Actualizari</strong><br />Ultimele noutati si actualizari de pe <br>forumul .<br>&nbsp;</p>
  </a>
</li>
<li>
  <a href="#" class="suport">
      <p><strong>Suport</strong><br />Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit<br> sed do eiusmod tempor incididunt</p>
  </a>
</li>
<li>
  <a href="#" class="portfolio">
      <p><strong>Portofoliu</strong><br />Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p>
  </a>
</li>
</ul>

Para que funcione corretamente, deverá aceder a Painel de Controle > Visualização > Cores > Folha de estilo CSS e adicionar o seguinte código:

Código:

#vertical_slider {
color:#999;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:1.2em;
font-style:italic;
font-variant:normal;
font-weight:400;
line-height:1.2em;
list-style:none;
margin-bottom:10px;
margin-top:4px;
text-align:center;
padding:0;
}

#vertical_slider a {
color:#999;
text-decoration:none;
}

#vertical_slider li {
display:inline;
height:90px;
list-style:none;
margin:0 15px 0 0;
padding:0;
}

#vertical_slider li a {
display:inline-block!important;
height:90px;
line-height:90px;
overflow:hidden;
text-align:left;
white-space:nowrap;
width:128px;
}

#vertical_slider li a p {
line-height:normal;
padding:0 0 0 135px;
}

#vertical_slider li a p strong {
color:#360;
font-size:24px;
}

#vertical_slider li a.rss_feed {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/rss10.png) top left no-repeat;
}

#vertical_slider li a.news {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/noutai10.png) top left no-repeat;
}

#vertical_slider li a.suport {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/suport10.png) top left no-repeat;
}

#vertical_slider li a.portfolio {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/portof10.png) top left no-repeat;
}

#specificatii {
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#765C43;
border:2px solid #401a01;
border-radius:10px;
color:#fff;
float:center;
list-style-type:none;
text-shadow:1px 1px 0 #000;
width:90%;
margin:5px 0;
padding:5px;
}

#specificatii li {
margin-bottom:15px;
text-align:left;
}

#specificatii li:last-child {
margin-bottom:0;
}

#inchide_specificatii {
cursor:pointer;
left:-30px;
position:relative;
top:-20px;
}

#portofoliu {
left:-12px;
position:relative;
}

#portofoliu img {
background:#fff;
border:1px solid #6a6a6a;
padding:2px;
}

#portofoliu td {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#fbfbfb;
border:4px solid #c9c9c9;
border-radius:7px;
padding:5px;
}

#portofoliu td:hover {
background:#ebebeb;
}

Até mais.
Fraise

Continua sem efeito amigo veja:
- http://master-publicitario.forumeiros.com/

O primeiro código é para colar na homepage certo?

Código:

<script type="text/javascript">$(function(){$("#vertical_slider li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"}, {queue:false, duration:450});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450});});});/*To use this you need to load jquery easing plugins*/$("#vertical_slider.easing li a").each(function(){$(this).hover(function(){$(this).animate({width: "405px"}, {queue:false, duration:450, easing:'easeOutBack'});},function() {$(this).animate({width: "128px"}, {queue:false, duration:450, easing:'easeInBack'});});});});</script>
<ul id="vertical_slider"><li><a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Ultimele Subiecte</strong><br>Urmareste ultimele subiecte ale <br>forumului <br>&nbsp;</p></a></li><li><a href="#" class="news" style="width: 128px; overflow: hidden;"><p><strong style="font-size:24px;">Anunturi/Actualizari</strong><br>Ultimele noutati si actualizari de pe <br>forumul .<br>&nbsp;</p></a></li><li><a href="#" class="suport" style="width: 128px; overflow: hidden;"><p><strong>Suport</strong><br>Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit<br> sed do eiusmod tempor incididunt</p></a></li><li><a href="#" class="portfolio" style="width: 128px;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>

Altere o código do homepage que te dei pra este
E adicione este código na folha de estilo:

Código:


#vertical_slider li a.rss_feed {
    background: url(http://i36.servimg.com/u/f36/11/96/49/61/rss10.png) top left no-repeat;
}
#vertical_slider li a.news {
    background: url(http://i36.servimg.com/u/f36/11/96/49/61/noutai10.png) top left no-repeat;
}
#vertical_slider li a.suport {
    background: url(http://i36.servimg.com/u/f36/11/96/49/61/suport10.png) top left no-repeat;
}
#vertical_slider li a.portfolio {
    background: url(http://i36.servimg.com/u/f36/11/96/49/61/portof10.png) top left no-repeat;
}

#vertical_slider li a {
    display: inline-block!important;
    height: 90px;
    line-height: 90px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: 128px;
}


Okey! Crie um novo JavaScript com este código e com investimento no índice:

Código:

  $(function() {
      $("#vertical_slider li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450
              });
          });
      }); /*To use this you need to load jquery easing plugins*/
      $("#vertical_slider.easing li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeOutBack'
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeInBack'
              });
          });
      });
  });

Até mais.

Obrigado a ambos ficou perfeito!! Resolvido!