Primeiro, baixe esse modelo de site e abra um projeto com ele, se necessário, atualize o JQuery dele. Clique Aqui para Baixar.
No CSS do site, mais ou menos abaixo da div.menu, coloque esse código:
.menu-fixo {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
}
No javascript do site (no caso, script.js), coloque esse código:
$(function() {
var nav = $(".menu");
$(window).scroll(function() {
if($(this).scrollTop() > 173) {
nav.addClass("menu-fixo");
}
else {
nav.removeClass("menu-fixo");
}
});
});
Como visto, o método addClass adiciona uma classe ao elemento HTML especificado, e a removeClass remove a classe dele, integrado com CSS podemos fazer funções como essa de fixar o menu do site no topo.
PS: Podemos ver o tamanho do topo pelo inspecionar elemento do navegador.
Primeiro, baixe esse modelo de site e abra um projeto com ele, se necessário, atualize o JQuery dele. Clique Aqui para Baixar.
Para selecionarmos as imagens, coloque esse código no script do site:
$(function() {
$("#slide img:eq(0)")
.addClass("ativo")
.show();
});
No código acima, o eq(0) pega a primeira tag img filha do figure, o addClass() adicionará a classe ativo, e o show fará a imagem aparecer.
PS: Se necessário, ajuste o tamanho do figure para exibir direito as imagens.
Para adicionar texto ao figure, usaremos o método prepend(), que jogara o texto da imagem, pego do alt pelo attr(), dessa forma:
$(function() {
$("#slide img:eq(0)")
.addClass("ativo")
.show();
var texto = $(".ativo").attr("alt");
$("#slide").prepend("<p>" + texto + "</p>");
});
Para criar um temporizador, que mudará a imagem do slide, usamos o setInverval(), dessa forma:
$(function() {
$("#slide img:eq(0)")
.addClass("ativo")
.show();
var texto = $(".ativo").attr("alt");
$("#slide").prepend("<p>" + texto + "</p>");
setInterval(slide, 3000);
function slide() {
if($(".ativo").next().length) {
$(".ativo")
.fadeOut()
.removeClass("ativo")
.next()
.fadeIn()
.addClass("ativo");
}
else {
$(".ativo")
.fadeOut()
.removeClass("ativo");
$("#slide img:eq(0)")
.fadeIn()
.addClass("ativo");
}
}
});
No caso acima, o next() verifica o próximo elemento, e o length se existe algo. Dentro desse if, o fadeOut() esconderá a imagem, o removeClass() removerá a classe ativo, o next() passará para o próximo, o fadeIn() mostrará essa outra imagem e o addClass() adicionará a classe nela.
Só que as legendas não funcionam, então devemos adicionar o encapsulamento da tag p com id slide assim (código completo abaixo):
$(function() {
$("#slide img:eq(0)")
.addClass("ativo")
.show();
var texto = $(".ativo").attr("alt");
$("#slide").prepend("<p>" + texto + "</p>");
setInterval(slide, 3000);
function slide() {
if($(".ativo").next().length) {
$(".ativo")
.fadeOut()
.removeClass("ativo")
.next()
.fadeIn()
.addClass("ativo");
}
else {
$(".ativo")
.fadeOut()
.removeClass("ativo");
$("#slide img:eq(0)")
.fadeIn()
.addClass("ativo");
}
texto = $(".ativo").attr("alt"); // Nova atribuição
$("#slide p")
.hide()
.html(texto)
.delay(500)
.fadeIn();
}
});
Primeiro, baixe esse modelo de site e abra um projeto com ele, se necessário, atualize o JQuery dele. Clique Aqui para Baixar.
Para abrirmos as opções, entenda que em cada sessão, temos uma div com class caixa, dentro delas uma div com class titulo e dentro delas outra div, a primeira com as classes conteudo show e a segunda com classes conteudo hide, estas últimas definidas como ocultas.
$(function() {
$(".titulo").click(function() {
var conteudo = $(this).parent().find(".conteudo");
});
});
O parent() faz ele voltar na ancestral da nossa tag (no caso da titulo, volta pra caixa), e a find() procurará descendentes com a clase conteudo.
O método hasClass() seleciona uma classe de HTML especificada, no nosso exemplo, usaremos uma condição que fará a negação desse método, para ocultar as sessões, assim:
$(function() {
$(".titulo").click(function() {
var conteudo = $(this).parent().find(".conteudo");
if(!conteudo.hasClass("show")) {
$(".caixa").find(".show").slideUp("fast", function() {
$(this).addClass("hide").removeClass("show");
});
}
});
});
No código acima, o slideUp() define a velocidade de ocultação das sessões, e invocará outra função que mudará as classes.
Para exibir as sessões, basta completarmos o código dessa forma, onde usamos o slideDown():
$(function() {
$(".titulo").click(function() {
var conteudo = $(this).parent().find(".conteudo");
if(!conteudo.hasClass("show")) {
$(".caixa").find(".show").slideUp("fast", function() {
$(this).addClass("hide").removeClass("show");
});
conteudo.slideDown("fast", function() {
$(this).addClass("show").removeClass("hide");
});
}
});
});