• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigations Umsetzung - Hilfe

P

ProblemUser

Mitglied
Hallo, ich möchte mir nun eine Anständige Navigation basteln, ich weiß jedoch nicht wie. Ich hab hier mal ein kleines Bild:
Navigationsumsetztungsproblem.png


Dieses soll zeigen wie ich mir die Navigation Vorstelle!
Also Ich habe mehrere Kategorien, welche in normaler Schriftgröße angezeigt werden!
Klicke ich nun aber auf eine Kategorie (hier im Beispiel Kat3) dann soll sich die Schriftgröße & Farbe ändern sowie auch eine weitere Navigation öffnen.
Klicke ich hier wiedrum auf eine Seite, soll diese sich auch vergößern (Beispiel Site3).
Die Navigation ist ja kein Problem sind ja nur Links aber wie ich diese dann mit Schriftfabe, Größe Untermenü etc. erstelle weiß ich nicht wie ich das umsetzten soll.
Bin um eure Hilfe dankbar!
 
Die Navigation machst du als Liste (<ul>), in den Listenelementen der Kategorien (<li>) machst du auch Listen, die du mit display:none; ausblendest. Dann benutzt du JavaScript, um diese Listen anzeigen zu lassen, wenn du auf die Kategorie klickst. Dafür gibts Tonnen von Tutorials, einfach mal in Google suchen, mit den richtigen Suchbegriffen eine Sache von max. 10 Sekunden bis zu einem guten Tutorial ^^
 
Du könntest den einzelnen Kategorien das Attribut "onclick" geben und dann auf eine Funktion verweisen, die die jeweilige Kategorie identifiziert und ihre Unterpunkte aufdeckt.
Beispiel (funzt vllt nicht im IE):
HTML: 
<script type="text/javascript">
<!--
  function ToggleSubMenu( ) {
    // IE wird mit this wahrscheinlich an window denken, alle anderen Browser nicht...
    // Verstecken der Sub Menus
    for( var i = 0; i < document.getElementById( "navigation" ).children.length; i++ ) {
      var currElem = document.getElementById( "navigation" ).children[ i ].children[ 1 ];
      currElem.style.display = "none";
      // Sollte das nicht funktionieren, probiere das richtige Child zu finden, da das aus
      // dem Kopf etwas kompliziert ist... ;)
    }
    this.children[ 1 ].style.display = "block";
  }
// --></script>
<!-- ... -->
<div id="navigation">
  <ul>
    <li>
      <div onclick="ToggleSubMenu();">Men&uuml;punkt 1</div>
      <ul>
        <li>
          <div>Men&uuml;punkt 1.1</div>
        </li>
      </ul>
    </li>
    <li>
      <div onclick="ToggleSubMenu();">Men&uuml;punkt 2</div>
      <ul>
        <li>
          <div>Men&uuml;punkt 2.1</div>
        </li>
        <li>
          <div>Men&uuml;punkt 2.2</div>
        </li>
      </ul>
    </li>
  </ul>
</div>
this entspricht immer dem aufrufenden Objekt. Lediglich im IE ist dies das window-Objekt bei Events, glaube ich. Die restlichen Browser nehmen hierfür das Objekt, dem das Event zugeordnet wird.
Die <div>-Tags um die Menüpunkte sind nicht notwendig, sie sollen lediglich verdeutlichen, dass this.children[ 0 ] der Menüpunkt wären. Nun dürfte this.children[ 0 ].children[ 0 ] dein Text sein... Da auch Texte Elemente in HTML sind.
 
Das ist nicht das was ich suche.
Ich suche eine möglichkeit die Schriftgröße & Farbe zu verändern und ein Menü zu öffnen (das man vorher nicht sieht)
 
Ich suche eine möglichkeit die Schriftgröße & Farbe zu verändern und ein Menü zu öffnen (das man vorher nicht sieht)
Zum Vergrößern anklicken....
Mein Ansatz ist davon nun echt nicht weit entfernt... wir haben this, this repräsentiert ein Menüpunkt. Bisher wird jeder Menüpunkt zuerst geschlossen, der ausgewählte dann wieder geöffnet. Zunächst setzen wir dann this.style.color auf den gewünschten hex-Farbwert und this.style.fontSize auf die gewünschte Höhe...

Zu jQuery: Ich persönlich habe ein Problem mit Libraries, da ich gerne wissen möchte, wie genau die Autoren diesen Code zum Laufen gebracht haben. Daher nehme ich Libraries für gewöhnlich auseinander... :D Aber das ist mein Problem.
 
Naja, das ist doch das selbe wie mit PHP Frameworks usw. =) Wenn man sich noch nicht so mit JavaScript auskennt, ist jQuery ein guter Einstieg (jedenfalls war das bei mir der Fall)
 
Also mit jQuery möchte ich nicht arbeiten es sollte auch so möglich sein.
Ja Dark das Menü hat ähnlichkeit mit dem Bild oben nicht aber den Effekt den ich erzeugen will. Und das steht eindeutig nicht bei dir drin!
Also Ich möchte eine Navigation die Anfangs 'normal' aussieht also:
Seite1
Seite2
Seite3...
Klick ich nun auf z.b. Seite1 Wird Seite1 Groß und erhält eine andere Farbe der Rest der Links bleibt Normal.
Gibt es nun ein Menü soll das geöffnet werden.

Ich verstehe nicht wießo ich hier in diesem Forum tausendmal erklären muss wie ich mir das vorstelle.
PS: Ich erwarte kein Code mir reichen auch die Funktionen, aber dann bitte mit Informationen dazu.
 
ProblemUser, das, was DarkDragon gepostet hat, IST das, was du willst! Und reagier nicht so arrogant, wenn du nicht das zu lesen bekommst, was dir gerade so vorschwebt. Wenn du die Lösung von DarkDragon nicht meinst, dann erklär bitte ganz genau, was passieren soll. Die Schrift soll groß werden, und eine andere Farbe bekommen. Gut. Das Menü soll aufgehen, wenns eins gibt. Das Ganze mit Animation oder sofort beim Klicken?

PS: Es gibt auch Google. Ändern kannst du sachen mit this.style.[attribut] = [wert]
 
Also
wenn ich mir Das Script angucke dann sehe ich das es eine Punkt Liste ist, welche schon eingerückt ist (möchte ich erst wenn ich drauf klicke.
Wenn ich nun auf Menüpunkt 1 oder 2 klicke verschwindet alles (möchte ich nicht)
Ich möchte das alles geschlossen ist und wenn ich draufdrücke es dann so erscheint wie im Beispiel von Dark.
Das Problem ist das was Dark gepostet hat kann ich auch (gut das mit dem ausblenden war mir neu aber da hätte ich einfach onklick() und display:none genutzt hätte den gleichen effekt.
Ich möchte aus einer ganz normalen Liste den auf Post#1 gezeigten Bild.
Also auf ein Link klicken der Link Text wird groß und bekommt eine andere Farbe. Dann sollte es evntl. eine weitere Linkliste öffnen.
@Timmer woher weißt du was ich will? Wenn ich was anderes will musst du mir das nicht sagen. Ich reagier hier nicht arrogant sondern das ist eine Tatsache die ich festgestellt habe.
Auf Google finde ich bloß Links zu Foren in denen gesagt wird ich soll google benutzten :rolleyes:
 
ProblemUser schrieb:
Also
wenn ich mir Das Script angucke dann sehe ich das es eine Punkt Liste ist, welche schon eingerückt ist (möchte ich erst wenn ich drauf klicke.
Zum Vergrößern anklicken....

Wie genau meinst du das denn? Wenn du die Liste erst beim klicken einrücken möchtest, musst du ins DOM.

ProblemUser schrieb:
@Timmer woher weißt du was ich will? Wenn ich was anderes will musst du mir das nicht sagen. Ich reagier hier nicht arrogant sondern das ist eine Tatsache die ich festgestellt habe.
Zum Vergrößern anklicken....
Du hast also festgestellt, dass du nur speziell in diesem Forum alles tausend mal erklären musst, wie du dir etwas vorstellst. Du solltest eher feststellen, dass das dann vielleicht an deiner Beschreibung liegt, dass das die Leute hier reihenweise nicht verstehen.

Ganz ehrlich, ich habe keine Lust mehr, in diesem Thread weiterzuposten. Ich würde dir gerne helfen, aber ich will mir nicht mehr die Mühe machen, dich zu verstehen. Weiterhin noch viel Glück mit deinem Problem...
 
Also ich verstehe nicht was daran nicht zu verstehen ist..
Ich klick auf einen Link dieser wird groß und bekommt eine Farbe. (PUNKT!)
Dann soll ein weitres Menü erscheinen unterhalb des geklickten Links. (PUNKT!)
Das wars. (PUNKT!)
 
Ohne jQuery könnt ihr selber machen. ;)

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

        <style type="text/css">
        /* <![CDATA[ */
        #navigation .title {
            cursor: pointer;
        }

        #navigation .hidden {
            display: none;
        }

        #navigation .open-category {
            margin-left: 2em;
        }

        /* "#navigation .open-category > .title" doesn't work in IE6 */
        #navigation .open-title {
            color: #f00;
            font-size: 1.5em;
        }
        /* ]]> */
        </style>

        <script type="text/javascript">
        /* <![CDATA[ */
        $(document).ready(function () {
            $('#navigation ul').addClass('hidden');
            $('#navigation li').click(function (event) {
                // Entry has children?
                if ($(this).children('ul').length > 0) {
                    $(this).toggleClass('open-category');
                    $(this).children('.title').toggleClass('open-title');
                    $(this).children('ul').toggleClass('hidden');
                }
                event.stopPropagation();
            });
        });
        /* ]]> */
        </script>
    </head>

    <body>

        <ul id="navigation">
            <li><span class="title">Menüpunkt 1</span>
                <ul>
                    <li><span class="title">Menüpunkt 1.1</span></li>
                </ul>
            </li>
            <li><span class="title">Menüpunkt 2</span>
                <ul>
                    <li><span class="title">Menüpunkt 2.1</span>
                        <ul>
                            <li><span class="title">Menüpunkt 2.1.1</span></li>
                            <li><span class="title">Menüpunkt 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="title">Menüpunkt 2.2</span></li>
                </ul>
            </li>
        </ul>

    </body>

</html>
 
Zuletzt bearbeitet:
Mit „Ohne jQuery könnt ihr selber machen.“ meinte ich, dass es ein Krampf ist, das ohne jQuery browserübergreifend umzusetzen. Das ist meines Erachtens den Aufwand nicht wert. Die 26-80 kb jQuery-Code werden ohnehin gecacht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben