Ir para conteúdo
Fórum Script Brasil

Leo Sales

Membros
  • Total de itens

    2
  • Registro em

  • Última visita

Sobre Leo Sales

Últimos Visitantes

O bloco dos últimos visitantes está desativado e não está sendo visualizado por outros usuários.

Leo Sales's Achievements

0

Reputação

  1. Fala rapaziada beleza, sou novo no fórum e novo na área também, e preciso muito de ajuda! Estou desenvolvendo um site www.restauranteflorida.com.br e no miolo da página tem um slide que fiz com imagens e usei o cycle.js. Acontece que o cara que fez o layout quer que eu faça o slide com texto e imagens, não somente uma imagem com tudo! Então estou refazendo essa parte com divs e css e travei agora no final kkkkkk Eu não consigo fazer com que o primeiro item dos botões (pratos do dia) já venha selecionado quando carregar a página, é também não consigo fazer as setas de next e prev funcionarem. Segue o código HTML: <section id="img-animada"> <div class="conteudo-slider2"> <nav id="menu-slide"> <ul> <li><a href="#wall-1">Pratos do dia</a></li> <li><a href="#wall-2">Sobremesas</a></li> <li><a href="#wall-3">Cardápio</a></li> </ul> <div class="clear"></div> </nav> <div class="wall wall-1" id="wall-1"> <div class="slide-left"> <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Pratos do dia <img src="images/linha_slides2.png" alt="#"></h3> <h4 class="tlt-slides-v">Acompanhe as <br> opções do dia</h4> <p>Entre e confira o prato, o risoto do dia <br> e a sugestão do Chef<p> <button class="vermais"><a href="prato_dia.html">Veja mais</a></button> </div> <div class="slide_right"><img src="images/foto_pratodia.png" alt="#"></div> </div> <div class="wall wall-2" id="wall-2"> <div class="slide-left"> <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Sobremesas <img src="images/linha_slides2.png" alt="#"></h3> <h4 class="tlt-slides-v">Delícias <br> da Casa</h4> <p>Entre e confira nossas sobremesas. <br> Experimente nosso campeão de pedidos há <br> mais de 10 anos: o bolo do Tio!<p> <button class="vermais"><a href="#">Veja mais</a></button> </div> <div class="slide_right"><img src="images/foto_sobremesa.png" alt="#"></div> </div> <div class="wall wall-3" id="wall-3"> <div class="slide-left"> <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Cardápio <img src="images/linha_slides2.png" alt="#"></h3> <h4 class="tlt-slides-v">Especialidades <br> da Casa</h4> <p>Nosso cardápio foi elaborado para agradar <br> diferentes paladares. Entre e confira!<p> <button class="vermais"><a href="#">Veja mais</a></button> </div> <div class="slide_right"><img src="images/foto_especialidades.png" alt="#"></div> </div> <div id="next-prev"> <a href="#wall-2" id="prev"><img src="images/seta-left.png"></a> <a href="#" id="next"><img src="images/seta-right.png"></a> </div> <div class="clear"></div> </div> </section> - CSS: section#img-animada{ padding-top:30px; margin-bottom:30px; position:relative; } .conteudo-slider2{ width:800px; margin:auto; } .conteudo-slider2 nav#menu-slide{ position:relative; margin:auto; width:405px; } nav#menu-slide ul{ list-style:none; } nav#menu-slide ul li{ float:left; margin:0px 20px; } nav#menu-slide ul li a{ width:95px; height:32px; display:block; background:url(../images/back_menu_cinza.png) no-repeat; color:#fff; text-decoration:none; text-align:center; padding:5px 0px; font-family:"Maven Pro Light 300"; font-size: 11pt ;} nav#menu-slide ul li a:hover{ background:url(../images/back_menu.png) no-repeat; } nav#menu-slide ul li.active a{ background:url(../images/back_menu.png) no-repeat; } .wall{ display: none; width: 700px; margin:auto; margin-top:30px; } .wall:target{ display: block; } section#img-animada #next-prev{ position:absolute; bottom:90px; z-index:999;} #next-prev #prev{ margin-left:0px;} #next-prev #next{ margin-left:750px;} - SCRIPT USADO NOS BOTOES E OUTRO PARA CARREGAR A PRIMEIRA DIV AO ENTRAR NO SITE.(unica maneira que achei na net!): <script language="JavaScript"> window.location="#wall-1"; </script> <script> $(document).ready(function() { $('li').click(function() { $('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado $(this).addClass("active"); //aqui adicionamos a class ao item clicado }); }); </script> ------------------------------------------------- Bom é isso rapaziada, não sei se deu para entender, mais se alguém tiver alguma sugestão ou críticas estou disposto a aprender! =) Obrigado
  2. Fala galera blz, sou novo no Fórum e tenho pouco conhecimento na área. Estou desenvolvendo um site www.restauranteflorida.com.br/index2.html e na página inicial contém 3 divs que se alternam conforme clicado no respectivo botão. Até ai blz, o problema é que como as divs estão com display:none, não estou conseguindo fazer a primeira div (pratos do dia) já vir selecionada ao carregar a página, o mesmo com o botão. Eu fiz com que a div carregasse com: <script language="JavaScript"> window.location="#wall-1"; </script> Mais além da página já carregar em cima da div, a classe do botão ativo não vem selecionada! Segue código html: <script> $(document).ready(function() { $('li').click(function() { $('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado $(this).addClass("active"); //aqui adicionamos a class ao item clicado }); }); </script> <section id="img-animada"> <div class="conteudo-slider2"> <nav id="menu-slide"> <ul> <li><a href="#wall-1">Pratos do dia</a></li> <li><a href="#wall-2">Sobremesas</a></li> <li><a href="#wall-3">Cardápio</a></li> </ul> <div class="clear"></div> </nav> <div class="wall wall-1" id="wall-1"> <div class="slide-left"> <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Pratos do dia <img src="images/linha_slides2.png" alt="#"></h3> <h4 class="tlt-slides-v">Acompanhe as <br> opções do dia</h4> <p>Entre e confira o prato, o risoto do dia <br> e a sugestão do Chef<p> <button class="vermais"><a href="prato_dia.html">Veja mais</a></button> </div> <div class="slide_right"><img src="images/foto_pratodia.png" alt="#"></div> </div> <div class="wall wall-2" id="wall-2"> <div class="slide-left"> <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Sobremesas <img src="images/linha_slides2.png" alt="#"></h3> <h4 class="tlt-slides-v">Delícias <br> da Casa</h4> <p>Entre e confira nossas sobremesas. <br> Experimente nosso campeão de pedidos há <br> mais de 10 anos: o bolo do Tio!<p> <button class="vermais"><a href="#">Veja mais</a></button> </div> <div class="slide_right"><img src="images/foto_sobremesa.png" alt="#"></div> </div> <div class="wall wall-3" id="wall-3"> <div class="slide-left"> <h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Cardápio <img src="images/linha_slides2.png" alt="#"></h3> <h4 class="tlt-slides-v">Especialidades <br> da Casa</h4> <p>Nosso cardápio foi elaborado para agradar <br> diferentes paladares. Entre e confira!<p> <button class="vermais"><a href="#">Veja mais</a></button> </div> <div class="slide_right"><img src="images/foto_especialidades.png" alt="#"></div> </div> <div id="next-prev"> <a href="#" id="prev"><img src="images/seta-left.png"></a> <a href="#" id="next"><img src="images/seta-right.png"></a> </div> <div class="clear"></div> </div> </section> ----------------------------------------------------------------------------------- CSS: nav#menu-slide ul{ list-style:none; } nav#menu-slide ul li{ float:left; margin:0px 20px; } nav#menu-slide ul li a{ width:95px; height:32px; display:block; background:url(../images/back_menu_cinza.png) no-repeat; color:#fff; text-decoration:none; text-align:center; padding:5px 0px; font-family:"Maven Pro Light 300"; font-size: 11pt; } nav#menu-slide ul li a:hover{ background:url(../images/back_menu.png) no-repeat; } nav#menu-slide ul li.active a{ background:url(../images/back_menu.png) no-repeat; } .wall{ display: none; width: 700px; margin:auto; margin-top:30px; } .wall:target{ display: block; } Desde já agradeço e fiquem a vontade para dicas ou críticas para que melhore meu código! Abraços
×
×
  • Criar Novo...