[HTMl] Navigation mit subnavigation

Tab · 30 Oktober 2008

Moin,

ich habe ein kleines Problem. Ich habe folgende Situation:

Startseite
Service
Kontakt
Impressum

Klick man jetzt auf Service, soll in einem anderem DIV die Unetmenüs erscheinen.

Startseite
Service
Unterpunkt1
Unterpunkt2
Kontakt
Impressum

Das geht wohl mit Javascript, meine aber gehört zu haben, dass sowas auch mit HTMl geht?

Wichtig dabei ist auch, dass es in einen Div daneben soll.

Liebe Grüße

EDIT:

paddya · 30 Oktober 2008

Mit HTML allein nicht. Und mit CSS auch nur per Hover.

Greetz

paddya

Tab · 30 Oktober 2008

Achso.

Bei der Navigation muss es nicht sein, dass es beim HOVER angezeigt wird. Besser wäre es, wenn man sozusagen Service anklickt und dann ewrden die Untetrpunkte angezeigt.

Meine ich habe mal was mit # gesehen, weiß aber nicht mehr wie.

Liebe Grüße

paddya · 30 Oktober 2008

Also das geht definitiv nur mit JavaScript. Quick'n'dirty-Lösung:

PHP:

<ul id="navi">
  <li>Menüpunkt 1</li>
    <ul class="subnavi-hidden">
      <li>Unterpunkt 1</li>
      <li>Unterpunkt 2</li>
      <li>Unterpunkt 3</li>
    </ul>
    
  </li>
</ul>

<script type="text/javascript">
   var navi = document.getElementById('navi');
   var elements = navi.getElementsByTagName('li');
   for(var i = 0; i < elements.length; i++)
      elements[i].onclick = showSubMenu;

    function showSubMenu() {
        // Verstecke zunächst alles
        for(var i = 0; i < elements.length; i++) {
            var to_hide = elements[i].getElementsByTagName('ul');
            for(var j = 0; j < to_hide.length; j++)
                to_hide[j].style.display = 'none';
        }
        var to_show = this.getElementsByTagName('ul');
        // Zeige jetzt das Submenü des geklickten Menüpunkts
        for(k = 0; k < to_show.length; k++)
            to_show[k].style.display = 'block';
    }

    // Zum Vergleich: die gleiche Funktionalität mit jQuery
    $('#navi li').click(function(){
        $('#navi li ul').css('display', 'none');
        $(this).children('ul').css('display', 'block'); 
    })
</script>

Die jQuery-Lösung funktioniert auf jeden Fall. Bei der anderen Lösung ohne Framework bin ich mir nicht so ganz sicher

Greetz

paddya

Tab · 30 Oktober 2008

Boa ich danke Dir!!!

ICh habe keine Ahnung wie ich das jetzt ändern soll.

HTML:

<div class="content">

    <!-- Hauptnavigation der Seite -->
    <div id="navigation">
        <ul>
            <li><a href="#">STARTSEITE</a></li>
            <li><a href="#">AGENTUR</a></li>
            <li><a href="#">REFERENZEN</a></li>
            <li><a href="#">LEISTUNGEN</a></li>
            <li><a href="#">KUNDENLISTE</a></li>
            <li><a href="#">KONTAKT</a></li>
            <li><a href="#">IMPRESSUM</a></li>
        </ul>
    </div>
    <!-- Subnavigation der Seite -->
    <div class="subnavigation">
        <ul>
            <li><a href="#">AUSRICHTUNG</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">FAKTS</a></li>
            <li><a href="#">AKTUELLES</a></li>
        </ul>
    </div>
    <!-- Seitenheader -->
    <div class="header"><img src="images/header.jpg" alt="" /></div>
    <div class="clear"></div>
    
</div>

<div class="content">

    <div class="main">
        <p class="headline">AUSRICHTUNG</p>
        
        <div class="text">
            Text, Text
        </div>
    </div>

</div>

Wie genau, muss das JS jetzt aussehen?

paddya · 30 Oktober 2008

Bei welchem Listenpunkt soll die Sub-Navi erscheinen?

Hast du die Möglichkeit jQuery einzusetzen?

Greetz

paddya

Tab · 30 Oktober 2008

Ja subnavigation ist ein Div daneben ist wird bei den jeweiligen Punkten angezeigt.

Das heißt bei service sind andere unterpunkte wie bei Referenzen, ist klar?!

JQuery. Kenne ich persönlich nicht. Wenn es damit geht, kann ich es auch gerne benutzen. Muss ich das installieren wenn ich deine Version nehme?

paddya · 30 Oktober 2008

Gehen wir mal von folgendem Aufbau aus:

PHP:

    <!-- Hauptnavigation der Seite -->
    <div id="navigation">
        <ul>
            <li><a href="#">STARTSEITE</a></li>
            <li><a href="#" id="agentur">AGENTUR</a></li>
            <li><a href="#" id="referenzen">REFERENZEN</a></li>
            <li><a href="#">LEISTUNGEN</a></li>
            <li><a href="#">KUNDENLISTE</a></li>
            <li><a href="#">KONTAKT</a></li>
            <li><a href="#">IMPRESSUM</a></li>
        </ul>
    </div>
    <!-- Subnavigation der Seite -->
    <div class="subnavigation" id="agentur-subnavigation">
        <ul>
            <li><a href="#">AUSRICHTUNG</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">FAKTS</a></li>
            <li><a href="#">AKTUELLES</a></li>
        </ul>
    </div>
    <div class="subnavigation" id="referenzen-subnavigation">
        <ul>
            <li><a href="#">AUSRICHTUNG</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">FAKTS</a></li>
            <li><a href="#">AKTUELLES</a></li>
        </ul>
    </div>

Das JavaScript würde in etwa so aussehen.

PHP:

<script type="text/javascript">
    $(document).ready(function(){
        $('#navigation li a').click(function() {
            var id = $(this).attr('id');
            // Verstecke alle Submenüs
            $('.subnavigation').hide();
            // Blende nur das aktuelle Submenü ein
            $('#' + id + '-subnavigation').show();
        })
    })
</script>

Wichtig hierbei ist: Jeder Menüpunkt-Link erhält eine ID (z.B. agentur). Das entsprechende Submenü erhält die ID "MENÜPUNKT_ID-subnavigation".

jQuery ist eine JavaScript-Bibliothek. Du kannst sie wie jede andere JavaScript-Datei per <script src="jquery.js" type="text/javascript"></script> einbinden.

Greetz

paddya

Tab · 30 Oktober 2008

Cool

HTML:

    <div id="navigation">
        <ul>
            <li><a href="#">STARTSEITE</a></li>
            <li><a href="#" id="agentur">AGENTUR</a></li>
            <li><a href="#" id="referenzen">REFERENZEN</a></li>
            <li><a href="#" id="leistungen">LEISTUNGEN</a></li>
            <li><a href="#" id="kundenliste">KUNDENLISTE</a></li>
            <li><a href="#">KONTAKT</a></li>
            <li><a href="#">IMPRESSUM</a></li>
        </ul>
    </div>
    <!-- Subnavigation der Seite -->
    <div class="subnavigation" id="agentur-subnavigation">
        <ul>
            <li><a href="#">AUSRICHTUNG</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">FAKTS</a></li>
            <li><a href="#">AKTUELLES</a></li>
        </ul>
    </div>
    <div class="subnavigation" id="referenzen-subnavigation">
        <ul>
            <li><a href="#">AUSRICHTUNG</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">FAKTS</a></li>
            <li><a href="#">AKTUELLES</a></li>
        </ul>
    </div>
    <div class="subnavigation" id="leistung-subnavigation">
        <ul>
            <li><a href="#">AUSRICHTUNG</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">FAKTS</a></li>
            <li><a href="#">AKTUELLES</a></li>
        </ul>
    </div>
    <div class="subnavigation" id="kundenliste-subnavigation">
        <ul>
            <li><a href="#">AUSRICHTUNG</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">JOBS</a></li>
            <li><a href="#">FAKTS</a></li>
            <li><a href="#">AKTUELLES</a></li>
        </ul>
    </div>

Jetzt werden aber alle DIVs nebeneinander angezeigt? Keiner ausgeblendet?

Code:

    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <script src="jquery.js" type="text/javascript"></script>
    
    
<script type="text/javascript">
    $(document).ready(function(){
        $('#navigation li a').click(function() {
            var id = $(this).attr('id');
            // Verstecke alle Submenüs
            $('.subnavigation').hide();
            // Blende nur das aktuelle Submenü ein
            $('#' + id + '-subnavigation').show();
        })
    })
</script>

paddya · 30 Oktober 2008

Musst sie natürlich noch per CSS verstecken.

PHP:

.subnavigation {
    display: none;
}

Tab · 30 Oktober 2008

Achso, ja...

Jetzt sind alle submenus logischer Weise ausgeblendet? Aber werden beim klick auf service etc nicht eingeblendet?

EDIT: Okay geht, letztes Problem:

Jetzt ist standartmäßig die Subnavigation ausgebledent, diese gehört aber zum Design?

paddya · 30 Oktober 2008

Dann gib dem Element eine ID und sag ihm per CSS, dass es angezeigt werden soll

Tab · 31 Oktober 2008

Ja, gut klappt alles :-D

Jetzt habe ich aber ein letztes Problem. Ich habe meine Seite so aufgebaut, dass per Get Parameter und einer index.php die Seiten geleitet werden. SOmit ändert sich eigentlich immer nur der Content. Aber klicke ich jetzt auf Referenzen, wird daneben die Links angezeigt, klicke ich dann aber eines der Links an, komme ich auf die richtige Seite, jedoch ist dann das Untermenü weg. Kann man das nicht irgendwie ändern?

paddya · 31 Oktober 2008

Dann verteilst du die Klasse, die das sichtbare Untermenü zu Beginn zeigt, eben dynamisch.

PHP:

<div class="subnavigation<?php if($_GET['site'] == 'xy') : ?> active<?php endif; ?>">

Greetz

paddya

Tab · 31 Oktober 2008

PHP:

<?php if ($_GET['section'] == 'Webdesign') : ?>
    
    <div class="subnavigation" id="referenzen-subnavigation">
        <ul>
            <li><a href="index.php?section=Webdesign">Webdesign</a></li>
            <li><a href="index.php?section=Printdesign">Printdesign</a></li>
        </ul>
    </div>
    <?php  endif; ?>

So sieht mein Code gerade aus, aber angezeigt wird nur leer...

paddya · 31 Oktober 2008

Nein, nein, nein...

Du musst dem entsprechenden Submenü, das anfangs ausgeklappt sein soll, die Klasse active zuweisen.

PHP-Teil:

PHP:

<div class="subnavigation<?php if(in_array($_GET['section'], array('Webdesign', 'Printdesign')) :  ?> active<?php endif; ?>" id="referenzen-subnavigation">
  <ul>
    <li><a href="index.php?section=Webdesign">Webdesign</a></li>
    <li><a href="index.php?section=Printdesign">Printdesign</a></li>
  </ul>
</div>

Es wird geprüft, ob $_GET['section'] "Webdesign" oder "Printdesign" ist. Ist dies der Fall, wird dem Submenü die Klasse active zugewiesen.

So musst du mit jedem Submenü verfahren.

CSS-Teil:

PHP:

.active {
    display: block !important; /* überschreibe Sichtbarkeitsstatus in jedem Fall, wenn Submenü aktiv ist */
}

Greetz

paddya

Tab · 31 Oktober 2008

Ich verstehe schon was Deine Idee ist. Aber wie soll ich den DIV "manuell" wieder sichtbar machen. Habe ja kein Zugriff auf die stylesheet.css

Liebe Grüße,
Markus

paddya · 31 Oktober 2008

Das ist natürlich schlecht. Dann musst du die unsaubere Variante nehmen und das ganze via <style></style> im <head>-Bereich einbinden.

[HTMl] Navigation mit subnavigation

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member

Tab

unlimited

paddya

Well-known member