Menü mit PHP/CSS
- Ersteller MrChaos
- Erstellt am
Hallo,
ich brauche mal eure hilfe beim erstellen eines menüs auf einer webseite.
und zwar auf dieser seite " http://tobiasndw-online.de/ "
ist ein menü welches nach unten aufklappt wenn man auf einen menüpunkt klickt.
meine bescheidene frage ist nun ... wie erstelle ich so ein menü ?
thx for help
MrChaos
ich brauche mal eure hilfe beim erstellen eines menüs auf einer webseite.
und zwar auf dieser seite " http://tobiasndw-online.de/ "
ist ein menü welches nach unten aufklappt wenn man auf einen menüpunkt klickt.
meine bescheidene frage ist nun ... wie erstelle ich so ein menü ?
thx for help
MrChaos
Das Stichwort ist DOM - lies Dich hier mal ein:
http://de.selfhtml.org/dhtml/index.htm
unter Beispielen ist auch eine Navileiste, sicher im Aussehen nicht genau so, wie Du die haben willst, aber im Grundsatz kannst Du das abkupfern.
http://de.selfhtml.org/dhtml/index.htm
unter Beispielen ist auch eine Navileiste, sicher im Aussehen nicht genau so, wie Du die haben willst, aber im Grundsatz kannst Du das abkupfern.
Das gleiche Problem habe ich auch. Den ein dynamisches Menü mit CSS zu erstellen ist anscheinend nicht möglich. Mit Firefox schon, aber IE nicht.
Im IE ist es nur im Zusammenspiel mit einem JavaScript möglich, dieses ist zwar auf selfhtml zu finden, hat aber bei mir nicht funktioniert.
Somit konnte ich mir das Beispiel dort nicht abgucken und stehe weiterhin leer da
Im IE ist es nur im Zusammenspiel mit einem JavaScript möglich, dieses ist zwar auf selfhtml zu finden, hat aber bei mir nicht funktioniert.
Somit konnte ich mir das Beispiel dort nicht abgucken und stehe weiterhin leer da
Du kannst es mit onClick Routinen und innerTEXT lösen.
Du gibst jedem Bereich der Navi eine ID und bei einem onClick Event auf einen Oberbutton fügst du per innerTEXT Code hinzu.
Der Code beinhaltet dann das Untermenü.
Du gibst jedem Bereich der Navi eine ID und bei einem onClick Event auf einen Oberbutton fügst du per innerTEXT Code hinzu.
Der Code beinhaltet dann das Untermenü.
Code:
<p id="NAME">Das isn toller Text</p>
<input type="button" onClick="aendereNaviMenu1()" />
Code:
function aendereNaviMenu1 () {
document.all["NAME"].innerTEXT = "Das is der Text mit Untertext blabla";
}
Chris_Bear
Admiral Special
Wo hast du da Probleme mit dem IE? Die Seite sieht bei mir genauso aus wie im FF, auch das Menü funktioniert (ohne Verwendung von Javascript).Das gleiche Problem habe ich auch. Den ein dynamisches Menü mit CSS zu erstellen ist anscheinend nicht möglich. Mit Firefox schon, aber IE nicht.
Im IE ist es nur im Zusammenspiel mit einem JavaScript möglich, dieses ist zwar auf selfhtml zu finden, hat aber bei mir nicht funktioniert.
Somit konnte ich mir das Beispiel dort nicht abgucken und stehe weiterhin leer da
Menüs per Javascript würde ich tunlichst vermeiden, damit trifft man meist auf Probleme mit den verschiedenen Browsern, oder schließt vorsichtige Anwender (Javascript deaktiviert) komplett von der Webseite aus, mal ganz abgesehen von der schlechten Lesbarkeit für Suchmaschinen. Auch wird auf der verlinkten Seite jedesmal die komplette Seite neu geladen wenn man auf einen Menüpunkt klickt, dazu ist kein Javascript nötig.
@ MrChaos:
Schau dir mal das hier an: http://de.selfhtml.org/css/layouts/navigationsleisten.htm
Da wird genau erklärt wie man Menüs mit CSS erstellt. Grob gesagt ist das eine Liste (<ul>Menü</ul>) mit den Menüpunkten(<li><a>Menüpunkt</a></li>), die dann per CSS designt werden. Hier mal der Menü-Code von der verlinkten Seite (etwas eingerückt wegen der besseren Lesbarkeit):
Code:
<ul>
<li><a class="menu-normal" href="startseite.html" >Startseite</a></li>
<li><a class="menu-active" href="programme.html" >Programme...</a>
<div id="untermenu"><ul>
<li><a href="desktopviewmode.html">DesktopViewMode</a></li>
<li><a href="fahrtenbuch.html">Fahrtenbuch.net</a></li>
<li><a href="html2php.html">HTML2PHP</a></li>
<li><a href="msi-extractor.html">MSI Extractor</a></li>
<li><a href="pc-watcher.html">PC Watcher</a></li>
<li><a href="query-control.html">Query Control</a></li>
<li><a href="wallpaper-control.html">Wallpaper Control</a></li>
<li><a href="xp-iso-builder.html">WF xp-Iso-Builder</a></li>
<li><a href="my-backup-manager.html">My Backup Manager</a></li>
<li><a href="my-mp3-player.html">My-mp3-Player</a></li>
<li><a href="textonimage.html">TextOnImage</a></li>
</ul></div></li>
<li><a class="menu-normal" href="downloads.html" >Downloads...</a></li>
<li><a class="menu-normal" href="links.html" >Links</a></li>
<li><a class="menu-normal" href="kontakt.html" >Kontakt</a></li>
<li><a class="menu-normal" href="impressum.html" >Impressum</a></li>
</ul>Das dazugehörige CSS kannst du dir dann am besten per Firefox Webdeveloper anschauen.
Wenn noch was unklar ist, einfach fragen.
Gruß, Chris
Das ist natürlich noch besser, weil man ohne Javascript auskommt (was wohl in Zukunft eher mehr als weniger Leute ausschalten werden, siehe z.B. http://uk.theinquirer.net/?article=38675), und vor allem wird der Code sehr sauber und entspricht am ehesten der "reinen Lehre".
Geht aber auch noch nicht so lange, weil - trotzdem es CSS schon fast ewig gibt - viele Browser Probleme mit CSS hatten. Inzwischen kann man es sich aber leisten, den kleinen Prozentsatz nicht-CSS-fähiger Browser auf eine evtl. optisch weniger ansprechende Notseite mit einfachen Textlinks umlenken, das trifft nicht mehr so viele Leute. Es gibt zwar immer noch Leute, die den großartigen Netscape Navigator 3.0 Gold nutzen, aber die haben es auch nicht besser verdient
![:]](https://www.planet3dnow.de/vbulletin/images/smilies/rolleyes.gif "Augen rollen (sarkastisch) :]")
Während der Entwicklung sollte man natürlich erstmal den Opera oder Firefox nehmen, weil die wenigstens sehr nah am Standard operieren.
Für Microsofts Machwerke muß man zwar dann noch mal die doppelte Arbeit reinstecken, bis die ganzen Hacks vernünftig eingebastelt sind, und die Übersichtlichkeit des Codes wird damit auch nicht gerade gefördert, aber es geht wenigstens.
Geht aber auch noch nicht so lange, weil - trotzdem es CSS schon fast ewig gibt - viele Browser Probleme mit CSS hatten. Inzwischen kann man es sich aber leisten, den kleinen Prozentsatz nicht-CSS-fähiger Browser auf eine evtl. optisch weniger ansprechende Notseite mit einfachen Textlinks umlenken, das trifft nicht mehr so viele Leute. Es gibt zwar immer noch Leute, die den großartigen Netscape Navigator 3.0 Gold nutzen, aber die haben es auch nicht besser verdient
Während der Entwicklung sollte man natürlich erstmal den Opera oder Firefox nehmen, weil die wenigstens sehr nah am Standard operieren.
Für Microsofts Machwerke muß man zwar dann noch mal die doppelte Arbeit reinstecken, bis die ganzen Hacks vernünftig eingebastelt sind, und die Übersichtlichkeit des Codes wird damit auch nicht gerade gefördert, aber es geht wenigstens.
Ist schon wieder eine Weile her aber ich weiß noch, dass die Menüs im Firefox wunderbar dynamisch waren und beim IE nicht. Also wenn ich beim IE auf die Navi geclickt habe, dann öffneten sich diese nicht.
Gleiches Problem wurde gerade wieder festgestellt
Mit diesem kleinen Beispiel von selfhtmlMit Firefox funktionierts, mit IE nicht.
Chris_Bear
Admiral Special
Stimmt, das Beispiel funktioniert nicht, weil der IE das "li:hover" nicht interpretiert. Könnte man evt. mit einem "li a:hover" umgehen, ist mir aber jetzt zu spät das Ganze lokal zu testen.Ist schon wieder eine Weile her aber ich weiß noch, dass die Menüs im Firefox wunderbar dynamisch waren und beim IE nicht. Also wenn ich beim IE auf die Navi geclickt habe, dann öffneten sich diese nicht.
Gleiches Problem wurde gerade wieder festgestellt
Mit Firefox funktionierts, mit IE nicht.
Hab ja auch nicht gesagt dass es falsch wäre, nur dass ich's nicht so verwenden würde und warum.Wollte halt nur eine mögliche Lösung schreiben
Hab nie gesagt, die wäre perfekt - Aber es ist eine
Allgemein hab ich die Erfahrung gemacht dass sich mit einfachem HTML und CSS schon ne ganze Menge erreichen lässt - auch ohne die Notwendigkeit von speziellen Browser-Hacks. Man muss nur eben wissen wo manche Browser Probleme haben und entsprechende Kombinationen vermeiden bzw. schon beim Design der Webseite darauf achten. Mir persönlich reicht es dabei wenn die Seite in >95% der Browser läuft, was sich aus IE ab 5.5, Mozilla / FF und Opera ab 8 (und Safari falls ich mal noch nen MAC zum Testen finde) zusammensetzt. Jeder Browser bzw. jeder Version mehr bedeutet ungleich mehr Arbeit.
Ähnliche Themen
