Likadan meny som på bygghemma.se

[ramo_and]

Hej!

 

jag skulle vilja göra en likadan meny som det är på bygghemma.se. Dvs när man hovrar på en länk så öppnas en stor undermeny under länken.

 

Problemet är att jag får inte till js-koden så att detta funkar. Jag hittade lite kod från bygghemmas källkod:

 

$(".liSiteNavi").each(function(){var a=$(this).attr("id");$(this).hovering({container:"#megaMenu_"+a,triggers:".megaMenuOuter",showdelay:200,hidedelay:400})})}};

 

Men när jag lägger in detta (och ändrar klasser och id så det passar min sida) så funkar det inte alls. Sidan laddas inte ens.

 

Hur skall man göra för att åstadkomma detta? Borde ju inte vara så himla svårt egentligen..

[Jonas__B]

De verkar gjort en egen plugin/extension som finns någonstans i deras javascriptfil.

 

Hittar inte alla funktioner som används riktigt men mouseover/mouseout är inte så svårt men det finns flera funktioner man måste använda/skapa:

 

1. mouseover på li: visar önskat lager

2. mouseout på li eller det tända lagret startar en setTimeout på 1 sekund (ca) på nedanstående funktion "v = setTimeout("showmeny('menuid')",1000)" "v" måste vara global för att kunna nås (se 4)

3. Funktionen som gömmer önskat lager function showmeny("menuid")

4. Funktion som avbryter setTimeout ( "clearTimeout(v)" - används när man hovrar över det tända lagret

 

Det är kanske något jag glömt men i stora drag är det det du behöver göra.

Inte så svårt

[Jonas__B]

Det var inte så svårt. Jag gjorde som jag själv beskrev och gjorde en lösning som håller - utan att skriva någon extension.

Koden (html + lite css + javascript + jquery) är din för rätt pris

hemlig länk

[ramo_and]

Kanon! Dock så gör ju jag nåt fel så de funkar inte på min sida...

 

så här ser min htmlkod ut:

<td id="topField">
<table>
<tr>
<td class="topnavcell">
 <!--Sökfält-->
</td>
<td class="twstop">
 <div class="object_vertical object_customcontent">
   <div class="customcontent">
     <div id="main_nav">
    <ul>
	  <li class="main_nav_link1"><a class="selected" href="startsidan">HEM</a></li>
	  <li class="main_nav_link2"><a id="B00" href="#">LÄNK 1</a></li>
	  <li class="main_nav_link3"><a id="B01" href="#">LÄNK 2</a></li>
	  <li class="main_nav_link4"><a id="B02" href="#">LÄNK 3</a></li>
	  <li class="main_nav_link5"><a id="B03" href="#">LÄNK 4</a></li>
	</ul>
  </div>
</div>
 </div>
</td>
<td class="topnavcell">
 <div class="object_horizontal object_shopwindow">
   <div id="main_menu_B00" class="embedded_shopwindow">
  <!-- Innehåll meny 1 -->
</div>
 </div>
</td>
<td class="topnavcell">
 <div class="object_horizontal object_shopwindow">
<div id="main_menu_B01" class="embedded_shopwindow">
  <!-- Innehåll meny 2 -->
</div>
 </div>
</td>
</tr>
</table>
</td>

 

Det kanske blir lite annorlunda om inte html-strukturen e samma? Det bästa vore om jag kunde behålla denna html-strukturen för då kommer innehållet i menyerna att importeras automatiskt.