Meny i ajax

Finns det något liknande denna meny: http://dynamicdrive.com/dynamicinde...abmouseover.htm

Alltså att man ska föra musen över en länk och under den länken i en div ska en submeny visas? Jag tänkte ifall det finns något sådant i ajax som tillexempel vid onclick hämtar värdet ur en gömd div och visar den i en annan? Och isåfall hur?

Eller finns det andra ungefär lika dana koder fast inte den från dynamic drive? Nån artikel om hur man gör en liknande meny?

Varför vill du just ha AJAX? I JavaScript så behöver du inte några större kunskaper för att få en sån meny att fungera. Gör bara en funktion som döljer alla divs och sen tar fram den som tillhör den man har klickat på.

Vill du ha när man klickar eller när man håller musen över knappen?

Jaha okej:p Spelar ingen roll ifall det är med ajax eller inte. Jag vill ha onmouseover på länkarna.

Då kan du klara dig med bara CSS ;) Ladda ner ASPKolls förra design och kolla hur de har gjort menyn. Det är samma princip.

Jag skapade en meny med javascript, men den tycks inte fungera i Firefox. Kan någoin hjälpa mig med den för jag tror det finns massa onödig kod med och den kan nog förbättras mycket mer.

<script>
var cm=null;function getPos(el,sProp) {
 var iPos = 0
 while (el!=null) {
  iPos+=el["offset" + sProp]
  el = el.offsetParent
 }
 return iPos
}
function show(el,m) {
 if (m) {
  m.style.display='';
  m.style.pixelLeft = getPos(el,"Left")
  m.style.pixelTop = getPos(el,"Top") + el.offsetHeight
 }
 if ((m!=cm) && (cm)) cm.style.display='none'
 cm=m
}
</script>

Använder denna för att visa diven.  <a id="d1" onclick="show(this,ds1);" href="#">

<div id="ds1" style="display: none;">
Innehåll som visas vid onclick
</div>

Använd Spry istället.

Slängde ihop en liten kod.

Innanför head elementet

<script src="SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function updateContent(el,url) {
    try {
        Spry.Utils.updateContent(el, url);
    } catch(e) { 
        alert(e);
    }
}
-->
</script>

    
<div id="menu">
        <ul>
            <li><a href="javascript:void(0);" onmouseover="updateContent('submenu', 'submenus.php?id=news'); return false;">Foo Bar</a></li>
            <li><a href="javascript:void(0);" onmouseover="updateContent('submenu', 'submenus.php?id=sports'); return false;">Hello World</a></li>
        </ul>
    </div>
    <div id="submenu"></div>

<?php $do = strval($_GET['id']); ?>

<?php if(isset($do)) : ?>
<?php switch($do) {
    case "news":
    echo "<ul class=\"submenu_items\">
        <li><a href=\"javascript:void(0);\">Aftonbladet</a></li>
        <li><a href=\"javascript:void(0);\">Expressen</a></li>
        <li><a href=\"javascript:void(0);\">Dagens Nyheter</a></li>
    </ul>";
    break;     
    case "sports":
    echo "<ul class=\"submenu_items\">
        <li><a href=\"javascript:void(0);\">Rally</a></li>
        <li><a href=\"javascript:void(0);\">Golf</a></li>
        <li><a href=\"javascript:void(0);\">Friidrott</a></li>
    </ul>";
    break; 
} ?>
<?php endif; ?>

Du kan inte visa hur det ser ut om man inte använder php? Med endast html?

Du skapar två html filer som ser ut så här.

sports.html

<ul class="submenu_items">
    <li><a href="javascript:void(0);">Rally</a></li>
    <li><a href="javascript:void(0);">Golf</a></li>
    <li><a href="javascript:void(0);">Friidrott</a></li>
</ul>

news.html

<ul class="submenu_items">
    <li><a href="javascript:void(0);">Aftonbladet</a></li>
    <li><a href="javascript:void(0);">Expressen</a></li>
    <li><a href="javascript:void(0);">Dagens Nyheter</a></li>
</ul>

Glöm inte att ladda ner Adobe Spry Framework först.

Okej tack. ska se efter snart

Jag testade detta men får detta felmeddelande:

Exception caught while loading page.htm: [object Error]

Jag gjorde som du sa och skapade page.htm men fungerar inte ändå.

Hur ser din kod ut?

Den där javascript koden innanför head och länken:

<a href="javascript:void(0);" onmouseover="updateContent('submenu', 'page.htm'); return false;">&nbsp;&nbsp;MY PAGE&nbsp;&nbsp;</a>

Sedan denna under:

<div id="submenu"></div>

Och sen har jag länkat sprydata.js

<script src="SpryData.js" type="text/javascript"></script>

Du måste ju ha SpryData.js innanför head också.

Har du laddat ner Spry Framework?

Ja jag lade in den i Head.. Jag har laddat ner Spry Frameworks sedan tidigare..

Här är min testsida, välj visa källa för att se koden.

Fungerar nu:) Hade bara testat med frontpage och då uppstog felet haha, Fungerar klockrent! ett tack till dig och en poäng!