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
  #1 (permalink)  
Alt 07.04.2004, 22:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard Navi CSS & Javascript - okay so?

Hallo Experten

Meine erste reine CSS-Seite ist fertig.

Bitte schaut Euch mal meine Navigation an. Die Funktion soll so erhalten bleiben, allerdings ist mir die irgendwie zu kompliziert... gehts denn einfacher oder ist das so gut gelöst?

Hier der Link zur Seite:

xxxx

Freu mich auf Eure Meinungen!

Viele Grüße,
azi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.04.2004, 23:32
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

hi azrael,

mir ist aufgefallen, dass Deine Navigation ohne Javascript nicht zu bedienen ist. Sowas würde vermeiden. Meiner Meinung nach kann man Javascript dazu nutzen um irgendwelche schönen Features zu ermöglichen, jedoch sollte eine Webseite auch bei ausgeschalteter Javascript-Funktion immer noch bedienbar sein.

Ansonsten ist die Seite klar aufgebaut und die Navigation an sich (ohne Javascriptzwang) ist auch in Ordnung und intuitiv bedienbar.

Ich verschiebe diesen Post mal in den Sitecheck-Bereich. Ich denke er passt dort vom Thema besser rein.

Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.04.2004, 11:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 21.12.2003
Beiträge: 247
Björn befindet sich auf einem aufstrebenden Ast
Standard

Mit dem Javascript muss ich zustimmen. Zumindest sollte für solche Besucher eine Sitemap oder alternative Textlinks unten existieren.

Vom Aufbau und Design her find ich die Seite gut. Seriös genug für den Einsatzzweck aber trotzdem nicht langweilig. Farben sind gut abgestimmt und die Bilder gut positioniert. Die Ladezeiten sind auch i.O.

Insgesamt eine gute Präsenz.

Björn
Mit Zitat antworten
  #4 (permalink)  
Alt 08.04.2004, 12:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

So, erstmal vielen Dank schonmal!!

Bezüglich der Javascript-Navigation hab ich mir viele Gedanken gemacht...
Habt Ihr denn eine Lösung, wie ich die Funktionalität OHNE Javascript realisieren könnte?

Ansonsten werde ich denke ich eine Umleitung einbauen... wenn keine Javascript, dann alle Menüpunkte immer aufgeklappt...oder so?

Bei "Service" - "Links" ist es ja das gleiche, der User ohne JS sieht da auch keine Links...

Wobei ich mich andererseits auch Frage: Warum, bzw. WER hat denn KEIN Javascript aktiviert? Ist doch heutzutage fast unerlässlich im Web, oder?

Gibts da Statistiken, wieviele User kein JS aktiviert haben?
Mit Zitat antworten
  #5 (permalink)  
Alt 08.04.2004, 13:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von azrael
Bezüglich der Javascript-Navigation hab ich mir viele Gedanken gemacht...
Habt Ihr denn eine Lösung, wie ich die Funktionalität OHNE Javascript realisieren könnte?
Die Funktionaität genau so gar nicht.

Zitat:
Ansonsten werde ich denke ich eine Umleitung einbauen... wenn keine Javascript, dann alle Menüpunkte immer aufgeklappt...oder so?
Eine Umleitung ist da nicht nötg. Einfach das display: none; für aufklappenden Punkte rausnehmen und stattdessen beim Laden der Seite mit JavaScript ausblenden. Wenn jemand kein JS hat sieht er dann alle Menüpunkte.

Zitat:
Wobei ich mich andererseits auch Frage: Warum, bzw. WER hat denn KEIN Javascript aktiviert? Ist doch heutzutage fast unerlässlich im Web, oder?
Da gibt es viele Gründe:
- Sicherheit (insbesondere IE hat da bekanntlich schwächen - übrigens gibt es immer noch Firmen die grundsätzlich JS im Internet in ihrem internen Netzwerk herausfiltern)
- Nerv-Faktor (JS wird fast ausschließlich für unnütze, nervige Spielereien, PopupFenster, Werbebanner etc. verwendet)
- Behinderungen: Viele Behinderungen lassen eine sinnvolle Steuerung von Webseiten mit JS gar nicht zu. Deine Seite ist ein Beispiel: Nicht jeder kann eine Maus benutzen. Steck mal deine Maus aus, und versuche dann auf der Seite mit der Tastatur zu navigieren.
- Dann gbt es natürlich Browser die einfach kein JS können, insbesondere auf den immer beliebter werdenden mobilen Geräten (PDA, Handy)

Nochmal zu deiner Site. Da gibt es noch ein paar andere Punkte:
- In der Naviation sehen Links, die zu anderen Seiten führen genau so aus, wie die die keine Links sind. Insbesonder ohne JavaScript ist diese Unterscheidung wichtig.
- Aus in der Naviagtion: Wenn mann mit der Maus über die graue Fläche geht, bekommt man eine "Link-Hand", aber wenn man klickt passiert nichts. Etwas wenn man auf den Text klickt funktionierts.
- Dein HTML ist schlecht strukturiert: Die Navigiation schreit danach, in Listenelementen gepackt zu werden.
- Warum gibt es sieben JS-Funktionen, die funktionell identisch sind?
- Du hast massenweise unnötige IDs und Klassen.

Ich glaube das reicht erstmall...
Mit Zitat antworten
  #6 (permalink)  
Alt 08.04.2004, 15:48
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
Eine Umleitung ist da nicht nötg. Einfach das display: none; für aufklappenden Punkte rausnehmen und stattdessen beim Laden der Seite mit JavaScript ausblenden. Wenn jemand kein JS hat sieht er dann alle Menüpunkte.
Okay, gute Idee. Danke!

Zitat:
Nochmal zu deiner Site. Da gibt es noch ein paar andere Punkte:
- In der Naviation sehen Links, die zu anderen Seiten führen genau so aus, wie die die keine Links sind. Insbesonder ohne JavaScript ist diese Unterscheidung wichtig.
- Aus in der Naviagtion: Wenn mann mit der Maus über die graue Fläche geht, bekommt man eine "Link-Hand", aber wenn man klickt passiert nichts. Etwas wenn man auf den Text klickt funktionierts.
- Dein HTML ist schlecht strukturiert: Die Navigiation schreit danach, in Listenelementen gepackt zu werden.
- Warum gibt es sieben JS-Funktionen, die funktionell identisch sind?
- Du hast massenweise unnötige IDs und Klassen.
Welchen großen Vorteil, außer höheren Programmierer-Weihen hätte denn eine List-Element-Auszeichung? Es funktioniert doch auch so? Aber ich schau mirs mal an...

Die sieben JS-Funktionen hab ich deshalb, weil ich in JS nicht so firm bin, daß ich mir eine benötigte JS zusammenschreiben könnte... Sie soll steuern können, daß außer dem gerade geöffneten Menüpunkte alle anderen zu gehen (display:hide). Wie könnte diese Funktion aussehen? Hab leider nirgends was derartiges gefunden...!
Mit Zitat antworten
  #7 (permalink)  
Alt 08.04.2004, 16:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von azrael
Welchen großen Vorteil, außer höheren Programmierer-Weihen hätte denn eine List-Element-Auszeichung?
Höhe Webautor-Weihen. ;)
Zitat:
Wie könnte diese Funktion aussehen? Hab leider nirgends was derartiges gefunden...!
Ok, ich habe mich so gelangweilt, das ich schnell was zusammmen zu hacken. (Ohne Gewähr, ohne Kommentare, Rückfragen sind willkommen)
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() {
		var nav = document.getElementById('nav');
		var item = nav.firstChild;
		while (item) {
			if (item.tagName && item.tagName.toLowerCase() == "li") {
				displaySubNav(item, "none");
			}
			item = item.nextSibling;
		}
	}
	
	function showNavigation(li) {
		hideNavigation();
		displaySubNav(li, "block");
	}
</script>

<body onload="hideNavigation()">

<ul id="nav">
	[*]Punkt 1
		<ul>
			[*]Subpunkt 1.1
			[*]Subpunkt 1.2
			[*]Subpunkt 1.3
		[/list]	
	[*]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>
Mit Zitat antworten
  #8 (permalink)  
Alt 09.04.2004, 09:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

WOW!

Das sieht schonmal super aus!! 1000 Dank!

Aber wie kann ich da beeinflussen, daß wenn ich z.b. auf Subpunkt2.1 klicke und die Seite 2.1 dann geladen ist, automatisch die Navi bei onload wieder den Navi-Punkt2 aufklappt?

Seh ich das richtig, daß ich bei der CSS.Formatierung der li's und ul's gar nicht erwähne, ob display:none ist? Also ich lass das komplett weg, damit der User ohne JS die gesamt aufgeklappte navi sieht, ja?

Kannst Du Dich bitte öfters so produktiv "langweilen"??
Mit Zitat antworten
  #9 (permalink)  
Alt 09.04.2004, 11:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von azrael
Aber wie kann ich da beeinflussen, daß wenn ich z.b. auf Subpunkt2.1 klicke und die Seite 2.1 dann geladen ist, automatisch die Navi bei onload wieder den Navi-Punkt2 aufklappt?
Am besten so: hideNagiation folgendermaßen ändern:

Code:
   function hideNavigation(aktuellOffenlassen) {
      var nav = document.getElementById('nav');
      var item = nav.firstChild;
      while (item) {
         if (item.tagName && item.tagName.toLowerCase() == "li" && (!aktuellOffenlassen || item.className != "aktuell")) {
            displaySubNav(item, "none");
         }
         item = item.nextSibling;
      }
   }
onload ändern in
Code:
 onload="hideNavigation(true)"
(der andere Aufruf von hideNavigation lassen wie es ist

Und schließlich das li-Element des Menü-Punkts, das offenbleiben soll mit class="aktuell" markieren:

Code:
<li class="aktuell">Punkt 1
Zitat:
Seh ich das richtig, daß ich bei der CSS.Formatierung der li's und ul's gar nicht erwähne, ob display:none ist? Also ich lass das komplett weg, damit der User ohne JS die gesamt aufgeklappte navi sieht, ja?
Ja, richtig.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.04.2004, 14:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2004
Beiträge: 17
azrael befindet sich auf einem aufstrebenden Ast
Standard

Wahnsinn... muß ich dann gleich mal ausprobieren! DANKE!!

Ich meld mich wieder!!
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 12:25
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 16:45
Probleme mit horizontaler Navi rechts lila_3 CSS 2 14.07.2009 21:36
CSS Navi macht im Mozilla Firefox probleme! Cookiee CSS 3 17.05.2007 13:56
Erstes Site-Layout in CSS, fast ohne Tabellen, okay? Multikulti CSS 3 02.05.2006 10:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:22 Uhr.