Eigentlich ganz einfach - oder auch nicht.
Als erstes, brauchst du erstmal die Struktur fuer ein Menue:
Html:
<div id="page-wrap">
   <ul class="navigation">
      <li><a href="#divEins">Menuepunkt Eins</a></li>
      <li><a href="#divZwei">Menuepunkt Zwei</a></li>
      <li><a href="#divDrei">Menuepunkt Drei</a></li>
   </ul>


So, jetzt hast du erstmal eine Navigation, mit einigen Sachen, die ich dir spaeter noch erklaeren werde.
Was du jetzt braeuchtest - denn ein Menue ohne Inhalt, ist nicht so das Wahre - waere der sog. Content.
Will heissen, deine Texte, Bilder und/oder Videos - eben alles was du dem Besucher zumuten moechtest.
Html:
   <div id="divEins">
      <h3>Meine erste Ueberschrift</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
            mollit anim id est laborum.
   </div><!-- endFirstContainer -->

   <div id="divZwei">
      <h3>Meine zweite Ueberschrift</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
            mollit anim id est laborum.

      <ul id="gallery">
         <li><img src="" alt="">
         <li><img src="" alt="">
         <li><img src="" alt="">
      </ul>
   </div><!-- endSecondContainer -->

   <div id="divDrei">
      <h3>Meine dritte Ueberschrift</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
            mollit anim id est laborum.
      <object width="640" height="385">
         <param name="movie" value="http://www.youtube.com/v/NXGgOgbRYNI&hl=de_DE&fs=1&rel=0"></param>
         <param name="allowFullScreen" value="true"></param>
         <param name="allowscriptaccess" value="always"></param>
         <embed src="http://www.youtube.com/v/NXGgOgbRYNI&hl=de_DE&fs=1&rel=0" 
                type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
                width="640" height="385">
         </embed>
      </object>
   </div><!-- endThirdContainer -->

</div><!-- endPageWrap -->



Jetzt, wenn du das genau so in deine HP uebernehmen wuerdest, waeren ziemlich viele Zeilenumbrueche da - was uns erstmal gar nicht so interessiert, wuerde die Seite schon richtig funktionieren und drueckt man auf die Menuepunkte, so wuerde man auch zu den Entsprechenden Inhalten auf deiner Seite gelangen. Du allerdingst willst ja, wenn ich dich richtig verstehe, die Illusion einer sich neu ladenden Seite schaffen. Das allerdings ist nicht so einfach, weil Knuddels keine Unterseiten zulaesst. Wir muessen uns also eines Tricks bedienen.
Wir benutzen dazu jQuery, weil es einfach zu verstehen ist.

Deine Menuepunkte haben im href-Attribut, keine gewoehnliche Verlinkten Webseiten sondern eine Sprungmarke bekommen [ href="#divEins" ]. Durch diese Sprungmarke, koennen wir zu dem Inhaltskontainer springen, zu dem sie verweist. In unserem Fall ist das der Inhaltskontainer Eins [ <div id="divEins"> ]
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
   $(function () {
      var tabInhalt = $('div#page-wrap > div');
      tabInhalt.hide().filter(':first').show();
      			
      $('div#page-wrap ul.navigation a').click(function () {
         tabInhalt.hide();
         tabInhalt.filter(this.hash).show();
         return false;
      });
   });
--></script>

In der ersten Zeile, sagen wir, dass wir fuer unsere Inhaltsdivisionen, die sich Innerhalb unseres ersten Division [ <div id="page-wrap"> ] befinden, eine Variable namens tabInhalt haben moechten ( weil es sich so einfacher Arbeiten laesst. ). In der zweiten Zeile, benutzen wir also unsere Variable und sagen, dass wir zu erst alle Inhaltsdivisionen verstecken moechten [ tabInhalt.hide() ] danach sollen die Inahltsdevisionen durchsucht werden [ .filter ] und innerhalb der Ergebnise moechten wird, dass der erste Container [ ('first') ] angezeigt wird [ .show(); ].

Jetzt kommt das eigentlich interessante, naemlich der Teil mit dem Clickevent - so nennt man es wenn irgendetwas angeklickt wird und sich danach etwas tun soll. Ich erklaer es wieder Schritt fuer Schritt.

Wir suchen alle 'Links', die sich innerhalb unseres Hauptcontainers in einer Ungeordneten Liste befinen [ $('div#page-wrap ul.navigation a') ] und weisen denen einen Event zu, hier in diesem Fall einen Clickevent, weil sich etwas nach dem Klicken auf die Links tun soll [ .click(function () { ].
Nach dem Klicken auf einen Link, sollen natuerlich erstmal alle Inhaltscontainer unsichtbar gemacht werden [ tabInhalt.hide(); ].
Natuerlich soll der Container, auf Klick des dazugehoerigen Menuepunktes, sichtbar werden [ tabInhalt.filter(this.hash).show(); ]
Damit nicht ein haesslicher Effekt entsteht, der uns beim Klicken auf die Menuepunkte, direkt an die Oberkante der Inhaltscontainer bringt, sagen wir, dass sich das ganze nicht wie eine gewoehnliche Verlinkung verhalten soll [ return false; ].

Kotzusammenfassung:
Warnung! Spoiler!

Html:
<style> #page-wrap br { display: none; }</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
   $(function () {
      var tabInhalt = $('div#page-wrap > div');
      tabInhalt.hide().filter(':first').show();
      			
      $('div#page-wrap ul.navigation a').click(function () {
         tabInhalt.hide();
         tabInhalt.filter(this.hash).show();
         return false;
      });
   });
--></script>
<div id="page-wrap">

   <ul class="navigation">
      <li><a href="#divEins">Menuepunkt Eins</a>
      <li><a href="#divZwei">Menuepunkt Zwei</a>
      <li><a href="#divDrei">Menuepunkt Drei</a>
   </ul>

   <div id="divEins">
      <h3>Meine erste Ueberschrift</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
            mollit anim id est laborum.
   </div><!-- endFirstContainer -->

   <div id="divZwei">
      <h3>Meine zweite Ueberschrift</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
            mollit anim id est laborum.

      <ul id="gallery">
         <li><img src="" alt="">
         <li><img src="" alt="">
         <li><img src="" alt="">
      </ul>
   </div><!-- endSecondContainer -->

   <div id="divDrei">
      <h3>Meine dritte Ueberschrift</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
            mollit anim id est laborum.
      <object width="640" height="385">
         <param name="movie" value="http://www.youtube.com/v/NXGgOgbRYNI&hl=de_DE&fs=1&rel=0"></param>
         <param name="allowFullScreen" value="true"></param>
         <param name="allowscriptaccess" value="always"></param>
         <embed src="http://www.youtube.com/v/NXGgOgbRYNI&hl=de_DE&fs=1&rel=0" 
                type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
                width="640" height="385">
         </embed>
      </object>
   </div><!-- endThirdContainer -->

</div><!-- endPageWrap -->

Die CSS-Formatierung am Anfang, hebt die Knuddelsumbrueche nur innerhalb des Kontainers page-wrap auf, damit man das Beispiel direkt zum Testen auf die Homepage einfuegen kann.

Fuer die lieben Klugscheisser: Listenpunkte muessen nicht unbedingt geschlossen werden, gleiches gilt fuer Absaetze und einige weitere Elemente.


Vllt. hilfts ja beim gefuehlten hundertsten mal erklaeren.


~leo
canine thoughts