nav hoover

Status
Niet open voor verdere reacties.
R

revange1

Gebruiker
Lid geworden
9 jan 2012
Berichten
41
hallo.

Ik heb hier een script.

[JS] <script type="text/javascript">
$(document).ready(function()
{
$('.active').css('background', 'url(img/navHovers/'+$('.active').attr('id')+'.png)');

$('#navigation ul li a').hover(function()
{
if($(this).hasClass('active'))
{
return false;
}
$(this).css('background', 'url(img/navHovers/'+$(this).attr('id')+'.png)');
}, function()
{
if($(this).hasClass('active'))
{
return false;
}
$(this).css('background', 'none');
});

$('.rFoto').hover(function()
{
$(this).children(":first").show();
}, function()
{
$(this).children(":first").hide();
});
});
</script>[/JS]

maar als ik dan op de linken gaan staan verschuift mijn nav hoover wel zegmaar, maar als ik erop druk blijft ie er niet op staan. moet ik er wat aan veranderen ofzo? hij blijft op home staan.

gr.
 
Ja denk het wel. Heb de site via site deals gekocht, en de bestanden di ik kreeg had alleen index.html. Dus ik heb die gekopieert 4 keer zeg maar en die de andere link namen genoemd.
Maar als ik de site kijk dan staat alleen het wolkje op index. En als ik met de muis op de andere linken gaat staan verschuift het wolkje wel. Maar als ik er dan op klik staat ie gewoon op de index. En niet op de link waar ik op gedrukt heb.
 
[js]* { margin: 0; padding: 0; }
a { text-decoration: none; }
img { outline: none; border: none; }

h1 { position: relative; width: 100%; height: 37px; font-size: 18px; font-weight: bold; line-height: 37px; color: #090909; }
h1.border { border-bottom: 6px solid #090909; }

html, body { width: 100%; height: auto; background: #f4f4f4; font-family: Arial, Helvetica, sans-serif; }
body { position: relative; border-top: 17px solid #e2e2e2; }

#wrapper { position: relative; width: 960px; height: auto; margin: 0 auto; }
#navigation { position: relative; width: 100%; height: 138px; border-bottom: 1px solid #c0c0c0; }
#headerLogo { position: relative; top: 23px; left: 1px; }
#navigation ul { position: absolute; top: 51px; right: -30px; }
#navigation ul li { position: relative; list-style: none; float: left; }
#navigation ul li a { display: inline-block; font-size: 12px; color: #acacac; font-weight: bold; height: 42px; line-height: 42px; text-align: center; }
#navigation ul li a:hover { color: #ffffff; }
#navigation ul li .active { color: #ffffff; }
#navigation ul li #home { width: 96px; }
#navigation ul li #over-ons { width: 123px; }
#navigation ul li #diensten { width: 120px; }
#navigation ul li #fotos { width: 104px; }
#navigation ul li #leveranciers { width: 154px; }
#navigation ul li #contact { width: 117px; }

#header { position: relative; width: 100%; height: 305px; border-bottom: 1px solid #c0c0c0; margin-top: 19px; }
#bekijkPortfolio { position: absolute; display: block; width: 282px; height: 51px; top: 49px; left: 619px; border: 1px solid #ffffff; border-radius: 10px; font-family: "Myriad Pro", Helvetica, sans-serif; font-size: 20px; color: #ffffff; text-align: center; line-height: 50px;
background: #5f91ce;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7eb4f7', endColorstr='#3c69a0');
background: -webkit-gradient(linear, left top, left bottom, from(#7eb4f7), to(#3c69a0));
background: -moz-linear-gradient(top, #7eb4f7, #3c69a0); }
#bekijkPortfolio:hover {
background: #abc4e3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9d4f6', endColorstr='#98aeca');
background: -webkit-gradient(linear, left top, left bottom, from(#b9d4f6), to(#98aeca));
background: -moz-linear-gradient(top, #b9d4f6, #98aeca); }

#content { position: relative; margin-top: 21px; border-bottom: 1px solid #c0c0c0; padding-bottom: 50px; }
#content p { font-size: 12px; color: #5d5d5d; width: 940px; margin: 25px 0 0 13px; line-height: 20px; }

#recenteFotos { position: relative; border-bottom: 1px solid #c0c0c0; padding-bottom: 30px; margin-top: 11px; }
.rFoto { position: relative; cursor: pointer; float: left; margin: 30px 45px 0 18px; width: 180px; height: 134px; -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.75); }
.rFoto.last { margin-right: 20px; }
.rFoto img { z-index: 9; }
.rHover { position: absolute; display: none; width: 180px; height: 134px; z-index: 10; }
.rHoverBG { position: absolute; width: 180px; height: 134px; background: #ffffff; -moz-opacity:.50; filter:alpha(opacity=50); opacity: .50; }
.rHover span { position: absolute; display: inline-block; text-align: center; line-height: 50px; margin: 44px 18px; width: 143px; height: 53px; background: url(../img/navHovers/bekijk.png) no-repeat; font-size: 16px; color: #ffffff; font-weight: bold; }

#footer { position: relative; width: 100%; height: 101px; background: #e2e2e2; margin-top: 36px; }
#footerWrapper { position: relative; width: 960px; height: 101px; margin: 0 auto; }
#footerWrapper ul { position: relative; top: 32px; }
#footerWrapper ul li { position: relative; list-style: none; float: left; font-size: 12px; color: #5d5d5d; margin-right: 8px; }
#footerWrapper ul li a { font-size: 12px; color: #5d5d5d; }
#footerWrapper ul li a:hover { text-decoration: underline; }
#footerWrapper p { position: relative; font-size: 12px; color: #5d5d5d; top: 32px; }
#footerLogo { position: absolute; right: 0; top: 12px; }[/js]
 
Laatst bewerkt:
Hoi revange1,
Hoe ziet de code van je menu er uit?
Of het je een link naar de test-site?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo.

Nee ik heb geen test site. Hoe bedoel je de code van het menu? Bedoel je de html file van de site ofzo? De bovenstaande scripts zijn van de css file en de allerbovenste script staat in elke html file tussen de head tags.
 
Hallo.

Nee ik heb geen test site. Hoe bedoel je de code van het menu? Bedoel je de html file van de site ofzo? De bovenstaande scripts zijn van de css file en de allerbovenste script staat in elke html file tussen de head tags.
 
Bedoel je de html file van de site ofzo?
Klik om te vergroten...
Ja, dat bedoel ik: het stukje html-code in de <body> waar de links staan waar je over hovert om het wolkje te laten verschuiven.
  • Dat is het keuze-menu, en zit bij jou in een <div> of ander element dat een id="navigation" heeft.

Van het hele ding met de id="navigation" wil ik graag de code even zien.

Met vriendelijke groet,
CSShunter
 
Kijk, dat maakt het een stuk makkelijker! :)

In het menu staat nu op elke pagina:
Code: 
<ul>
    <li><a href="http://www.reinhardrvs.nl/new/index.html" [COLOR="#B22222"][B]class="active"[/B][/COLOR] id="home">HOME</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/overons.html" id="over-ons">OVER ONS</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/diensten.html" id="diensten">DIENSTEN</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/portofolio.html" id="fotos">PORTFOLIO</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/halfrond.html" id="leveranciers">HALFROND</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/contact.html" id="contact">CONTACT</a></li>
</ul>
De class="active" zorgt ervoor dat een actieve pagina (= de pagina waar je op dat moment in zit) het wolkje op de goede plaats krijgt.

Nu zit die class op elke pagina dus opgehangen aan het menu-onderdeel HOME.
Dan krijgt elke pagina het wolkje onder HOME te staan.

Als je op een bepaalde pagina de class="active" verplaatst naar het menu-onderdeel waar die pagina wordt genoemd, dan krijgt die pagina het wolkje als het een actieve pagina is (en dat is het op het moment dat je de pagina ziet). Bijvoorbeeld op de pagina OVER ONS zet je:
Code: 
<ul>
    <li><a href="http://www.reinhardrvs.nl/new/index.html" id="home">HOME</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/overons.html" [COLOR="#B22222"][B]class="active"[/B][/COLOR] id="over-ons">OVER ONS</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/diensten.html" id="diensten">DIENSTEN</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/portofolio.html" id="fotos">PORTFOLIO</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/halfrond.html" id="leveranciers">HALFROND</a></li>
    <li><a href="http://www.reinhardrvs.nl/new/contact.html" id="contact">CONTACT</a></li>
</ul>

PS: Om een simpele css-hover via jQuery te laten lopen vind ik nogal omslachtig; met alleen wat css kan het toch ook? :)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan