Ir para conteúdo
Fórum Script Brasil

Eltonjack

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    3

  • Registro em

  • Última visita

Sobre Eltonjack

Eltonjack's Achievements

0

Reputação

  1. Eltonjack
    Nesse tutorial você vai aprender a criar um menu de navegação em html,css e JQuery.Antes de começarmos veja aqui (http://janielton.comteudo.com/menus/abas/index.html)um exemplo do que eu estou falando.Pronto então vamos comerçar. Crie um novo documento e salve com a extensão html(Nomeaq.html). agora copie o código abaixo e cole dentro do documento html e salve o arquivo. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Navegação em Abas CSS & jQuery</title> <link href="style.css" rel="stylesheet" type="text/css" /> &lt;script type="text/javascript" src="jquery.js"></script> &lt;script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> </head> <body> <div class="container"> <h1>Navegação em Abas CSS & jQuery</h1> <ul class="tabs"> <li><a href="#tab1">Inicio</a></li> <li><a href="#tab2">Sobre</a></li> <li><a href="#tab3">Links</a></li> <li><a href="#tab4">Contato</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>Pagina inicial</h2> <a href="http://1tudo.blogspot.com/"><img'>http://1tudo.blogspot.com/"><img src="http://janielton.comteudo.com/menus/abas/img/img.gif" alt="" /></a> <h3></h3> <p>Pagina............................................... .................................................................... .................................................................... .................................................................... ....................................inicial</p> <p>.......................................................................... ......................................................................................... ......................................................................................... ............................................... </p> <p>.......................................................................... ........................................................................................... ...............................................</p> </div> <div id="tab2" class="tab_content"> <h2>Sobre</h2> <a href="http://1tudo.blogspot.com/"> <img src="http://janielton.comteudo.com/menus/abas/img/img2.gif" alt="" /></a> <h3></h3> <p>Sobre................................................................. ............................................................................................ .. ............................................................................................ ............................................................................................ . ................................ </p> <p>Pagina ................................................................... ...............................................................</p> <p>................................................................ ............................................................................................ .................................................................................... </p> </div> <div id="tab3" class="tab_content"> <h2>Links</h2> <a href="http://1tudo.blogspot.com/"><img'>http://1tudo.blogspot.com/"><img src="http://janielton.comteudo.com/menus/abas/img/img3.gif" alt="" /></a> <h3><a href="http://1tudo.blogspot.com">D'tudo--</a><a href="http://comteudo.com">--Comteudo.com</a></h3> <p><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a><a'>http://comteudo.com">comteudo.com</a><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a><a'>http://comteudo.com">comteudo.com</a><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a><a'>http://comteudo.com">comteudo.com</a><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a> </p> <p><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a><a'>http://comteudo.com">comteudo.com</a><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a><a'>http://comteudo.com">comteudo.com</a><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a><a'>http://comteudo.com">comteudo.com</a><a href="http://1tudo.blogspot.com">D'tudo</a> <a href="http://comteudo.com">comteudo.com</a> ho</p> </div> <div id="tab4" class="tab_content"> <h2>Contato</h2> <a href="http://1tudo.blogspot.com/"> <img src="http://janielton.comteudo.com/menus/abas/img/img4.gif" alt="" /></a> <h3><a href="http://1tudo.blogspot.com">D'tudo</a></h3> <p>E-mail=eltonjeck@gmail.com </p> <p>MSN=eltonjecki@hotmail.com </p> <p>+Mais</p> </div> </div> </div> <div style="clear: both; display: block; padding: 10px 0; text-align:center;"><a href="http://comteudo.com/">Comteudo </a> by <a href="http://1tudo.blogspot.com">Blog D'tudo</a></div> </body> </html> Agora crie um novo documento e salve com a extensão .CSS(Nome.css) dentro da mesma pasta do arquivo html e coloque o código abaixo dentro do documento e salve novamente. body { background: #fff; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 {font-size: 3em; margin: 20px 0;} .container {width: 500px; margin: 10px auto;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 31px; border-bottom: 0px solid #999; border-left: 0px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; width: 100px; line-height: 31px; border: 0px solid #999; border-left: none; margin-bottom: 0px; background: url(http://janielton.comteudo.com/menus/abas/img/aba.png); overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #fff; display: block; font-size: 14px; padding: 0 20px; border: 0px solid #fff; outline: none; text-align: inherit; } ul.tabs li a:hover { background: url(http://janielton.comteudo.com/menus/abas/img/aba2.png); height: 31px; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: url(http://janielton.comteudo.com/menus/abas/img/aba3.png); height: 32px; } .tab_container { border: 1px solid #ccc; border-top: none; clear: both; float: left; width: 100%; background: #ccc; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 0px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 0px solid #ddd; padding: 5px; } Se você ainda não baixou a biblioteca jQuery(http://jquery.com/) baixe e salve com o nome jquery.js Salve dentro das mesmas pastas que esta os outros arquivos . Pronto seu menu está pronto,agora só é visualizar. baixar arquivos http://www.2shared.com/file/11710911/7a8faa0f/abas.html
  2. Eltonjack
    Aqui estão 7 dos menus mais elegantes e bonitos da internet de sites muitos famosos,você pode ver e se quiser pode baixar todos os menus com todos os arquivos de imagens,html,css,javascript e ver como eles são feitos,ver o que tem por tras dessa elegancia. E o 1º é o menu do site de menus ( http://apycom.com) Visualizar <a href="http://janielton.comteudo.com/menus/apycom/%5b/url" target="_blank"> Baixar menu http://www.2shared.com/file/117</a> O 2º é do site ("http://www.shop.puma.com) Visualizar <a href="http://janielton.comteudo.com/menus/puma/%5b/url" target="_blank"> Baixar menu [url=http://www.2shared.com/file/11786531/69d80c44/puma.html</a> O 3º é do site ([url=http://themeforest.net)</a> Visualizar <a href="http://janielton.comteudo.com/menus/foresttheme/%5b/url" target="_blank"> Baixar menu [url=http://www.2shared.com/file/11786342/bb1db78b/foresttheme.html</a> O 4º é do site (<a href="http://www.conectandopessoas.com.br)%5b/url" target="_blank"> Visualizar [url=http://janielton.comteudo.com/menus/conectandopessoas/</a> Baixar menu <a href="http://www.2shared.com/file/11786230/1b902a57/conectandopessoas.html%5b/url" target="_blank"> O 5º é do site ([url=http://www.typolight.org)</a> Visualizar <a href="http://janielton.comteudo.com/menus/typolight/%5b/url" target="_blank"> Baixar menu [url=http://www.2shared.com/file/11786741/251d4eed/typolight.html</a> Fonte: [url=http://1tudo.blogspot.com/2010/03/os-menus-mais-elegantes-da-internet.html://http://www.2shared.com/file/117<...a-internet.html
  3. Eltonjack
    <a href="http://4.bp.blogspot.com/_pdz1rV_HAkk/S4z7K-9ex1I/AAAAAAAAB-s/MAeLqjxmQHU/s1600-h/Visualizar.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="68" src="http://4.bp.blogspot.com/_pdz1rV_HAkk/S4z7K-9ex1I/AAAAAAAAB-s/MAeLqjxmQHU/s200/Visualizar.jpg" width="200" /></a>Aqui estão 7 dos menus mais elegantes e bonitos da internet&nbsp; de sites muitos famosos,você pode ver e se quiser pode baixar todos os menus com todos os arquivos de imagens,html,css,javascript e ver como eles são&nbsp; feitos,ver o que tem por tras dessa elegancia.<br /> <br /> <!-- more --><br /> <br /> <div style="text-align: center;"> E o 1º é o menu do site de menus ( http://apycom.com)</div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/_pdz1rV_HAkk/S4z7K-9ex1I/AAAAAAAAB-s/MAeLqjxmQHU/s1600-h/Visualizar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="http://4.bp.blogspot.com/_pdz1rV_HAkk/S4z7K-9ex1I/AAAAAAAAB-s/MAeLqjxmQHU/s400/Visualizar.jpg" width="400" /></a></div> <div style="text-align: center;"> <a href="http://janielton.comteudo.com/menus/apycom/">Visualizar</a>&nbsp;&nbsp; ||<a href="http://www.2shared.com/file/11786099/9b27ae17/apycom.html">Baixar menu</a></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> O 2º é do site (http://www.shop.puma.com)</div> <div style="text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/_pdz1rV_HAkk/S4z7CFzUeSI/AAAAAAAAB-M/-zgZ07PGeFM/s1600-h/Visualizar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="121" src="http://3.bp.blogspot.com/_pdz1rV_HAkk/S4z7CFzUeSI/AAAAAAAAB-M/-zgZ07PGeFM/s400/Visualizar.jpg" width="4
×
×
  • Criar Novo...