zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Navi CSS & Javascript - okay so?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 09.04.2004, 18:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von RoToRa
onload ändern in
Code:
 onload="hideNavigation(true)"
(der andere Aufruf von hideNavigation lassen wie es ist
Ähm, was genau meinst du mit "der andere Aufruf von hideNavigation"?
Den bei der function showNavigation?

Ansonsten: Klappt schon super, echt klasse... bin grad am Einbauen...
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 16.04.2004, 18:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

So, ich hab das jetzt mal so umgesetzt.

XXXXXX

Irgendwie gefällts mir noch nicht 100%ig, weil jetzt jedes Mal wenn man eine neue Seite aufruft, erstmal die Navigation komplett aufklappt und dann erst wieder runterklappt.

Gibts da ne Lösung? Also vielleicht doch lieber eine Javascript ja/nein Weiche zu Beginn der Seite, die auf unterschiedliche CSS-Dateien verweist?
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 17.04.2004, 12:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

OK, hab nicht viel Zeit dehalb kurz zwei alternative Vorschläge: Das onload="..." rausnehmen und stattdessen entweder

A) direkt nach dem schliessenden[/list]Tag der Navigation forlgendes einbauen:
Code:
<script type="text/javascript">
   hideNavigation(true);
</script>
B) oder folgendes am Ende der <script>-Blocks im <head>:
Code:
document.write("<style type='text/css'>#nav ul {display: none;}</style>");
Ich bin nicht sicher welches am besten ist (oder gar funktiniert) da ich im Moment keine Zeit zum Ausprobieren habe...
Mit Zitat antworten
  #14 (permalink)  
Alt 19.04.2004, 13:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

Ein dreifaches Hoch auf den jungen Gott des CSS - RoToRa!!

Dein erster Tipp funktioniert perfekt!!!

Methode zwei funzt nicht, da klappt der derzeit aktive Menüpunkt nicht mehr auf beim Laden der Seite.


Aber wow, echt super mit Tipp 1


Wenn Du mir jetzt noch in einer langweiligen Minute nen Tipp für "Service" - "Links" geben kannst? Soll so funktionieren wie jetzt, aber auch wenn Javascript deaktiviert ist, alle Links anzeigen...
Mit Zitat antworten
  #15 (permalink)  
Alt 19.04.2004, 16:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von azrael
Methode zwei funzt nicht, da klappt der derzeit aktive Menüpunkt nicht mehr auf beim Laden der Seite.
Ah, ich glaube ich weiss warum. Hier ist eine aktuelle Version von Script (die Änderung an hideNavigation ist wieder weg, denn mit zwiten Lösung , die so funktioniert, ist es nicht mehr nötig)
Code:
<html>
<script type="text/javascript">
   function displaySubNav(li, display) {
      var ul = li.getElementsByTagName('ul');
      if (ul && ul[0])
         ul[0].style.display = display;
   }

   function hideNavigation(nav) {
      var item = nav.firstChild;
      while (item) {
         if (item.tagName && item.tagName.toLowerCase() == "li") {
            displaySubNav(item, "none");
         }
         item = item.nextSibling;
      }
   }

   function showNavigation(li) {
      hideNavigation(li.parentNode);
      displaySubNav(li, "block");
   }

   document.write("<style type='text/css'>#nav li ul {display: none;} #nav li.aktuell ul {display: block;}</style>");
</script>

<body>

<ul id="nav">[*]Punkt 1
      <ul>[*]Subpunkt 1.1[*]Subpunkt 1.2[*]Subpunkt 1.3[/list]   
   <li class="aktuell">Punkt 2
      <ul>[*]Subpunkt 2.1[*]Subpunkt 2.2[*]Subpunkt 2.3[/list]   [*]Punkt 3
      <ul>[*]Subpunkt 3.1[*]Subpunkt 3.2[*]Subpunkt 3.3[/list]   [/list]</body>
</html>
Zitat:
Wenn Du mir jetzt noch in einer langweiligen Minute nen Tipp für "Service" - "Links" geben kannst? Soll so funktionieren wie jetzt, aber auch wenn Javascript deaktiviert ist, alle Links anzeigen...
Etwas musst Du selbst noch tun. Ein Tip: Die versteckten Blöcke nicht hart im CSS verstecken, sondern genauso wie beim Menü per JS und document.write eine entsprechende CSS-Regel ausgeben.

Noch was zu deiner Implementation des Menüs:
Code:
[*]<a href="content/aktuelles/aktuelles.htm" onclick="showNavigation(this.parentNode);" class="hauptnav">
      <div class="hauptpunkt">Aktuelles</div></a>
 <ul>[*]Firmenprofil
	[/list]
Ein DIV darf nicht innerhalb eines A-Elements ein. Auch die Angabe der seperaten Klassen "hauptnav", "hauptpunkt" und "subnav" sind nicht nötig, da beide sich auch so im CSS referenzieren lassen. Das HTML oben kannst Du scheiben als:

Code:
[*]<a href="content/aktuelles/aktuelles.htm" onclick="showNavigation(this.parentNode);">
      Aktuelles</a>
 <ul>[*]Firmenprofil
	[/list]
und im CSS dann (hier gekürzt):

Code:
#nav a { display: block; ... }
#nav a:link { ... }
...

#nav ul a { ... }
#nav ul a :link { ... }
".hauptnav" und ".hauptpunkt" werden also zu "#nav a", und "subnav" zu "#nav ul a". Beachte das "display: block" das den Link zu einem Block (wie DIV) macht.
Mit Zitat antworten
  #16 (permalink)  
Alt 19.04.2004, 17:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

Danke Dir!!

Na da hätt ich ja wirklich selbst drauf kommen können, mit display:block. Hab zwar schon vieles an der Navi ausprobiert, aber darauf bin ich nicht gekommen...!

Ich hab die Änderungen gleich umgesetzt und online gestellt. So funktionierts jetzt echt perfekt. Super!

Jetzt mach ich mich mal an die Linkliste... das wird schon werden, jetzt bin ich ja wieder ein bissl schlauer, dank RoToRa-Superstar!
Mit Zitat antworten
  #17 (permalink)  
Alt 21.04.2004, 13:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

SO. So lass ichs jetzt erstmal.... die Linkliste läuft jetzt.

Meinungen?
Mit Zitat antworten
  #18 (permalink)  
Alt 23.04.2004, 12:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Nur kurz , da ich Arbeiten muss:

Ohne Javascript überdeckt das aufgeklappte Menü die Adresse links unten (in nicht IE). Nimm das "height" aus der Regel #nav, oder mach da wenigstens ein "min-height" raus.

Oder besser:
Code:
#nav { height: XXXpx; }
#leftbox>#nav { height: auto; min-height: XXXpx; }
Der IE versteht die zweite Regel nicht, und nimmt height (das er sowieso wie min-height behandelt). Alle "nicht kaputten" Browser nehmen die zweite Regel.
Mit Zitat antworten
  #19 (permalink)  
Alt 23.04.2004, 15:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

Oh! Super Sache!!
Ich dachte schon, damit müßt ich leben...

Hast Du spontan ne Idee, wie ich bei der Seite "Service"-"Links" beim aufklappen eines Listenpunktes das Plus-Icon gegen ein Minus austauschen könnte?

Und wie ich verhindere, daß beim IE der Disclaimer-DIV abgeschnitten wird, wenn ich einen Listenpunkt auf- und wieder zugeklappt habe?

Mann, ich hasse den IE wirklich....grrrr
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 23.04.2004, 23:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Wieder ganz kurz und ungestesten zusammengehackt:

Zitat:
Zitat von azrael
Hast Du spontan ne Idee, wie ich bei der Seite "Service"-"Links" beim aufklappen eines Listenpunktes das Plus-Icon gegen ein Minus austauschen könnte?
Code:
 function show(me, li) {
    var ul = li.getElementsByTagName('ul'); 
      if (ul && ul[0]) {
         if (ul[0].style.display == "block") {
             ul[0].style.display = "none";
             li.style.listStyleImage = '(Pfad zu Minus-Graphik)';
         } else {
             ul[0].style.display = "block";
             li.style.listStyleImage = '(Pfad zu Plus-Graphik)';
         }
      }
   }
  </script>
Aufruf:

Code:
   <li onclick="show(this)">Ausschreibungen
   <ul>..[/list]
(So brauchst Du kein Link, da es eh keins ist. Evtl. den li so stylen, das es wie ein Link aussieht)

Zitat:
Und wie ich verhindere, daß beim IE der Disclaimer-DIV abgeschnitten wird, wenn ich einen Listenpunkt auf- und wieder zugeklappt habe?
Ohne hinzu kucken: Auch hier die Höhe nicht explizit setzen?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 17:45
Probleme mit horizontaler Navi rechts lila_3 CSS 2 14.07.2009 22:36
CSS Navi macht im Mozilla Firefox probleme! Cookiee CSS 3 17.05.2007 14:56
Erstes Site-Layout in CSS, fast ohne Tabellen, okay? Multikulti CSS 3 02.05.2006 11:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:07 Uhr.