Ergebnis 1 bis 5 von 5

Thema: div navigation

  1. #1
    HTML Newbie
    Registriert seit
    30.11.2013
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage div navigation

    Hallo, ich bin nach 1 1/2 Jahren wieder dazu gekommen mich mit HTML / CSS etc. zu beschäftigen.
    Dementsprechend bin ich auch stark eingerostet ^^

    Ich übe gerade an einer kostenlosen Website, jetzt steh ich vor einen Problem:

    Ich möchte mich durch die Seite klicken können ohne Ladezeiten.

    Ich habe damals "div" und "onclick" mit diesen Code
    HTML-Code:
    document.getElementById(blabla).style.display='none';
    verwendet.

    Ich versuch mal kurz zu beschreiben was ich genau meine:

    Man geht auf die Seite und sieht oben die Navigationsleiste.

    Wenn man auf Home klickt soll das Layout für Home kommen, wenn man auf z.B Musik klickt soll das Layout Home verschwinden und Musik erscheinen usw.

    Ich hoffe das war ansatzweise verständlich ^^
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: div navigation

    Hallo,

    für solche Animationen eignet sich die jQuery Bibliothek sehr.
    http://api.jquery.com/

    Ein Beispiel dafür wäre bei folgendem HTML diese:
    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="deinjscode.js"></script></head>
    <body>
    <div id="deinmenue">
    <div class="menue-item" data-layout="home">Home</div>
    <div class="menue-item" data-layout="music">Musik</div>
    <div class="menue-item" data-layout="...">...</div>
    </div>
    <div id="deinlayout">...</div>
    </body>
    </html>
    deincode.js:
    Code:
    $(document).ready(function() { // wenn document geladen
    $('.menue-item').each(index, obj) { // für alle elemente mit der klasse menue-item
    $(this).on('click', function() { // wenn object angeklickt
       $.get($(this).attr('data-layout') + '.html', function(layout) { // hole html datei mit namen aus dem attribut data-layout
          $("#deinlayout").html(layout); // layout in dein element schreiben
       }
    });
    }
    }
    Das ist nur ein Beispiel. Man sollte dann auch darauf achten, welche Datein über das .get geholt werden können.
    Bzw. Dateischutz anzulegen per .htaccess o.s.
    Und wie du das mit jQuery implementierst, kannst du auch selber entscheiden.

    Ist eigentlich recht simpel, wenn man es verstanden hat.
    jQuery nimmt dir also schon gut was an Arbeit ab.

    Wenn du direkt alle Elemente lädst, kannst du auch in der Click-Funktion vom div-Element,
    ein .fadeIn(1000); beispielsweise machen und ein .fadeOut(1000); auf das andere.
    Alternativ kannst du mit jQuery auch sehr einfach CSS Änderungen vornehmen:
    $(obj).css({
    prop: value
    });
    Geändert von Bleistift (30.11.2013 um 23:50 Uhr)


  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: div navigation

    das ist aber nicht, was er will... keine ladezeiten heisst er hat mehrere container absolut positioniert und schaltet nur durch die ansichten.
    was du ihm da zeigst ist sehr wohl mit ladezeiten verbudnen, weils ajax ist => schon ne recht fortgeschrittene technik bei eingerostetem wissen

    nach dazu ist der code auch alles andere als performant

    aber ich zerpflück das jetzt nicht peux á peux.

    katzenkumpel, zeich ma mehr code von dir, damit man dir genauer sagen kann, wie man dir da helfen könnte.
    generell wäre sowas bestimmt schon mit css möglich, aber mit javascript ist es etwas schöner
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: div navigation

    Hatte ich ja auch noch gesagt. Wie man das mit dem schönen jQuery löst, bleibt ja jedem so überlassen.
    Auf Performance hab ich bei dem Beispiel jetzt auch nicht groß geachtet. Sollte auch nicht 1-1 übernommen werden.

    Wenn du direkt alle Elemente lädst, kannst du auch in der Click-Funktion vom div-Element,
    ein .fadeIn(1000); beispielsweise machen und ein .fadeOut(1000); auf das andere.
    Alternativ kannst du mit jQuery auch sehr einfach CSS Änderungen vornehmen:
    $(obj).css({
    prop: value
    });

    #edit:
    gut das hatte ich etwas überlesen, desswegen das mit dem $.get so hervorgehoben.
    Mensch Jedenfalls ist jQuery dafür wahrscheinlich das Beste,
    auch für einen mit etwas eingerostetem wissen.
    Geändert von Bleistift (01.12.2013 um 12:08 Uhr)


  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: div navigation

    nuja, wenn du ERST das ajaxbeispiel nennst und dann was von "alle elemente laden" schreibst, liegt ja die vermutung nahe, dass du die inhalte alle mit ajax laden willst und es ging ja darum das laden zu vermeiden
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. CSS Navigation
    Von Tarsuinn im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.11.2010, 08:02
  2. Navigation - IE 6
    Von canyon112 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.04.2009, 21:42
  3. Navigation
    Von gget-crunk im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.04.2008, 16:25
  4. Navigation
    Von Gast im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 4
    Letzter Beitrag: 20.09.2007, 12:21
  5. Navigation auf HP
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 11.02.2006, 13:08

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •