Just nu i M3-nätverket
Gå till innehåll

Statisk Meny javascript


Admini

Rekommendera Poster

Hej

Jag har en horisontell meny med ackardeon "beteende" och det funkar fint.

Men den visar alltid första menyn utav 5-6 när man kommer till den sidan

Jag vill även att den visar/öppnar den meny som förra sidan har klickat på.

Man kan säga att den är statisk, men jag vill ha den dynamisk

Här är javascript-koden:

$(document).ready(function(){
 
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active');
 
    $("#accordion").delegate('.panel', 'click', function(e){
         if( ! $(this).is('.active') ){
			$(activePanel).animate({width: "54px"}, 300);
			$(this).animate({width: "550px"}, 300);
			$('#accordion .panel').removeClass('active');
			$(this).addClass('active');
			activePanel = this;
		 };
    });
});

Vilken del är det som avgör vilken meny ska öppnas?

Det finns såklart en Style-kod också som jag kan klistra här vid behov.

Tacksam för hjälp

Länk till kommentar
Dela på andra webbplatser

ChromaWoods

Du kan styra det i HTML:en. Är det statiska HTML-sidor eller använder du något ramverk? PHP?

 

Det som koden triggar på är 

activePanel = $("#accordion div.panel:first");

Så om du i din HTML t.ex sätter en CSS-klass (t.ex active-panel) så den panel som motsvarar den aktiva sidan så kan du trigga på den istället, t.ex:

activePanel = $("#accordion .active-panel");

Sen så finns det några punkter i den koden som kan optimeras, men det är lite off-topic.. vi kan ta det i ett nästa steg. :)

Länk till kommentar
Dela på andra webbplatser

 

 



Du kan styra det i HTML:en. Är det statiska HTML-sidor eller använder du något ramverk? PHP?

Det som koden triggar på är
activePanel = $("#accordion div.panel:first");
Så om du i din HTML t.ex sätter en CSS-klass (t.ex active-panel) så den panel som motsvarar den aktiva sidan så kan du trigga på den istället, t.ex:
activePanel = $("#accordion .active-panel");
Sen så finns det några punkter i den koden som kan optimeras, men det är lite off-topic.. vi kan ta det i ett nästa steg. :)

HTML-koden ser ut så här:
<div class="panel"> <div class="pink dark0"> <div class="rotation"> Asiatisk </div></div><div class="panelContent p1"><img src="tisk_kok.jpg" border="0"></div> </div>
och här är en del av CSS:
.panel { float:left; display:block; height:180px; width:54px; overflow:hidden; color:#666666; text-decoration:none; font-size:26px; line-height:1.5em}.panel.active { width:550px}.panelContent { padding:0px 0px 0px 0px; height:170px; width:868px;}.pink { width:52px; height:180px; float:left; background:url(images/accordionSprite.png) no-repeat 4px 85px #d8d8d8; border-right:2px solid #ffffff; cursor:pointer}

Jag använder ASP


Med denna kod ("#accordion .active-panel") så stänger alla menyer, så det är ett steg i rätt riktning.
Nu gäller det bara att trigga "rätt" meny
Länk till kommentar
Dela på andra webbplatser

ChromaWoods

Hej igen

Hur löser jag det här nu?

Tack

 

JavaScriptet borde funka nu. Det du måste göra är att se till att varje sida, förutom CSS-klassen "panel", även har "active-panel" på den panel som du vill ska vara öppen just då. Så om vi säger att du är på en sida som handlar om Kalle Anka:

<div class="panel">Musse Pigg</div>
<div class="panel active-panel">Kalle Anka</div>
<div class="panel">Långben</div>
Länk till kommentar
Dela på andra webbplatser

 

JavaScriptet borde funka nu. Det du måste göra är att se till att varje sida, förutom CSS-klassen "panel", även har "active-panel" på den panel som du vill ska vara öppen just då. Så om vi säger att du är på en sida som handlar om Kalle Anka:

<div class="panel">Musse Pigg</div>
<div class="panel active-panel">Kalle Anka</div>
<div class="panel">Långben</div>

TACK! Det funkar :thumbsup:

Vad du kan :)

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...