-
23-09-2019 - |
Pergunta
Então, eu construí essa barra de navegação até agora e estou curioso se for possível alcançar o que estou pensando. Atualmente, quando você passa o mouse sobre cada um dos links, eles diminuem (o preenchimento é aumentado).
Agora, o que estou curioso em fazer é se você passar o mouse, digamos "Test1", o Test2-4 também cairá com ele, mas no preenchimento que foi criado a partir do suspenso, as informações "test1" aparecem. Permitindo que o usuário clique ou leia as informações lá. Além disso, se o usuário quiser, poderá mover o mouse para o Test2 e tudo animaria (opacidade, isso eu posso fazer) para o que estiver no campo Test2, o teste3 fazendo o mesmo e assim por diante.
Eu não tive muito sucesso com isso, criei um painel completamente separado antes, mas isso não funcionou exatamente ou não estava fazendo isso corretamente.
Aqui está o que tenho trabalhado, qualquer ajuda seria apreciada! Obrigado!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
},
function() {
$(this).stop().animate({paddingTop: "10px"}, 200);
});
});
</script>
<style type="text/css">
#nav
{
position: absolute;
top: 0;
left: 60px;
padding: 0;
margin: 0;
list-style: none;
}
#nav li
{
display: inline;
}
#nav li a
{
float: left;
display: block;
color: #555;
text-decoration: none;
padding: 10px 30px;
background-color: #d1d1d1;
border-top: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">test3</a></li>
<li><a href="">test4</a></li>
</ul>
</div>
</body>
</html>
Solução
Eu mexi com seu código, mas não obtive uma resposta completa, mas achei que postaria o que tenho de qualquer maneira. Este código adicionará uma div acima do menu e usará isso para exibir o <a>
conteúdo específico. Eu adicionei IDs ao seu <a>
Tags como você precisará de uma maneira de identificá -las ao determinar qual conteúdo mostrar. Eu não acho que você realmente deve colocar uma div
tag em um ul
, então isso não é perfeito.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#content').height(0);
$("#nav li > a").hover(function() {
var id = $(this)[0].id;
var content = 'Default content';
if (id == '1')
content = 'Test 1 content';
else if (id == '2')
content = 'Test 2 content';
else if (id == '3')
content = 'Test 3 content';
else if (id == '4')
content = 'Test 4 content';
$('#content').html(content);
},
function() { }
);
$("#nav").hover(function() {
$('#content').stop().animate({height: "100px"}, 100);
},
function() {
$('#content').html('').stop().animate({height: "0"}, 200);
}
);
});
</script>
<style type="text/css">
#nav
{
position: absolute;
top: 0;
left: 60px;
padding: 0;
margin: 0;
list-style: none;
}
#nav li
{
display: inline;
}
#nav li a
{
float: left;
display: block;
color: #555;
text-decoration: none;
padding: 10px 30px;
background-color: #d1d1d1;
border-top: none;
}
div#content
{
border: 1px solid red;
background-color: #d1d1d1;
width: 355px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="nav">
<div id="content"></div>
<li><a id="1" href="">test1</a></li>
<li><a id="2" href="">test2</a></li>
<li><a id="3" href="">test3</a></li>
<li><a id="4" href="">test4</a></li>
</ul>
</div>
</body>
</html>
Eu pensei então que você quis dizer que queria que seu conteúdo específico do link aparecesse diretamente sobre seus links quando você passa o mouse e criou algo diferente. Você pode usar o jQuery Preparar Para adicionar o conteúdo específico à área de 'preenchimento'. Com esta solução, você não precisa dos IDs no a
Tags, mas o menu inteiro não cai no Hover (mas, de alguma forma, eu fiquei meio preso lá e pode voltar a ele mais tarde). Para ver, basta mudar seu código jQuery para isso:
$(function() {
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
$(this).prepend('<div id="paddingMenu"><p>test1 link</p><p>test1 link2</p></div>');
},
function() {
$(this).stop().animate({paddingTop: "10px"}, 200);
$('#paddingMenu').remove();
});
});
Espero que isso forneça alguma ajuda. Boa sorte!
Editar: Claro, JQuery's html O método definirá o innerhtml do (s) elemento (s) retornado de seu seletor. Então, no primeiro exemplo, o content
A variável pode conter tudo o que a
Tags que você deseja usar como links. Aqui está um exemplo mostrando para criar alguns links para o conteúdo do Test1:
$("#nav li > a").hover(function() {
var id = $(this)[0].id;
var content = 'Default content';
if (id == '1')
content = '<a href="http://google.com">Google<a><br />' +
'<a href="http://stackoverflow.com/">Stackoverflow</a>';
else if (id == '2')
content = 'Test 2 content';
else if (id == '3')
content = 'Test 3 content';
else if (id == '4')
content = 'Test 4 content';
$('#content').html(content);
},
function() { }
);