Olá galera, desenvolvi um menu de navegação por abas simples e responsivo para ser usado em páginas WEB. O menu é simples, feito com HTML5, CSS3 e jQuery, espero que vocês gostem.
[button color=”orange” size=”medium” link=”https://clubedosgeeks.com.br/uploads_demos/abasjqyery/” target=”blank” ]Demo[/button] [button color=”orange” size=”medium” link=”clubedosgeeks.com.br/uploads_demos/abasjqyery/abas.rar” target=”blank” ]Download[/button]
Primeiro nós precisamos criar dois arquivos, o index.html e o estilo.css e salvar em uma só pasta, depois copiar para esta pasta o arquivo jquery.js, que deve ser baixado no site jquery.com. No arquivo index.html faça a chamada do jQuery com o seguinte código:
E a chamada da folha de estilo CSS, assim:
O seu arquivo index.html, deve ficar da seguinte forma:
- Menu 1
- Menu 2
- Menu 3
- Menu 4
- Menu 5
Texto do Conteúdo da primeira página
Texto do Conteúdo da segunda página
Texto do Conteúdo da terceira página
Texto do Conteúdo da quarta página
Texto do Conteúdo da quinta página
O seu arquivo estilo.css deve ficar assim:
.abas{width: 100%;text-align: center;margin: 0;height: auto;padding: 0;}
.item_aba{display: inline;border: 1px solid black;margin: 0;border-top-left-radius:10px;border-top-right-radius:10px;background: white;padding:5px 30px 5px 30px}
.ativo{border-bottom: none; background:#D1D1D1; }
.conteudo{width: 80%; height: 100px; display: table;background: #D1D1D1;margin: 0 auto;}
.conteudo p{margin: 20px;}
E como faz para exibir o conteúdo do blog, com várias postagens separadas por tags, tipo esse site > http://johny-movieprett.blogspot.com.br/ < lá embaixo na parte dos gêneros de filmes
Olá Cris.. Olha este post aqui: http://clubedosgeeks.com.br/web-design/plugin-slider-jquery-para-blogspot
E baixa e estuda este arquivo aqui:
http://www.clubedosgeeks.com.br/uploads_demos/SlideJayr/blog/slide.js
Em breve farei um post tirando sua dúvida.
Faltou fechar a ul no seu html.
Tem razão Renato, corrigido! Obrigado!
e como faço para colocar um link em uma palavra para uma das abas do site?
Use bootstrap: http://getbootstrap.com/
Muito obrigado! Era isso que eu queria! 😀
O link do jquery esá off