Forum

Moderiert von: spinne
Forum Index
Support
     Codeschnippsel
     CSS Menu mit mehreren Ebenen
Hilfe anzeigen
Hilfe anzeigen

Autor Druckerfreundliche DarstellungCSS Menu mit mehreren Ebenen
just59
Registriert: 29.10.2006
Beiträge: 921
Wohnort: Leipzig


Sende eine Private Nachricht an just59 Besuche die Homepage von just59
Geschrieben: 23.02.2009 20:19

Um meine Anypages (Regionalseiten) in einem Menü in einer Seitenbox auswählen zu können, suche ich nach einem Menü zum aufklappen mit mehreren Ebenen. Eventuell am besten mit CSS, da das ja meist ohne Probleme gelesen werden kann.

Kann mir da jemand helfen? Hat jemand ein Beispiel?

So in etwa: CSS Menü



JUSt


just-info / Mein Gartenverein Portal für Gartenfreunde...
Suse 10.1, PHP 5.2.10 und MySQL 5.0.67.,Administration 2.5.1 [Iphigenie] (Revision 4533)

Zitieren Druckerfreundliche Darstellung nach oben
just59
Registriert: 29.10.2006
Beiträge: 921
Wohnort: Leipzig


Sende eine Private Nachricht an just59 Besuche die Homepage von just59
Geschrieben: 25.02.2009 15:40

Ich habe ein wenig gebastelt und möchte Euch mein Menü nicht vorenthalten. Leider ist dies jedoch nicht dynamisch eingebunden. Die Links müssen also Mühsam eingefügt werden. Aber ist ein Anfang. Eventuell hat je jemand eine Idee, wie man das mit der Anypage Tabelle verbindet.

Das kommt ins Theme.css
/* Menue für Regionalbereich Anypage*/
/* common styling */
.menu {font-family: arial, sans-serif; width:170px; height:100px; position:relative; margin:0; font-size:0.75em; margin:0px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff;width:160px; height:20px;padding-left: 8px;padding-right: 2px; text-align:left; border:1px solid #fff; border-width:1px 1px 0px 0px; background:#427ba0; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#e0e8f1;}
.menu ul li:hover ul {display:block; background:#427ba0; position:absolute; top:0; left:170px; width:160px;; color:#fff}
.menu ul li:hover ul li a.hide {background:#0082d4; color:#fff;}
.menu ul li:hover ul li:hover a.hide {width:160px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#e0e8f1; color:#000; width:160px;}
.menu ul li:hover ul li a:hover {background:#0082d4; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; background:#427ba0; position:absolute; left:170px; top:0; color:#fff;}
.menu ul li:hover ul li:hover li a.hide {background:#427baf; color:#000;}
.menu ul li:hover ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li:hover ul li a {display:block; width:160px; background:#e0e8f1; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#0082d4; color:#fff;}
.menu ul li:hover ul li:hover ul li:hover ul {display:block; background:#427ba0; position:absolute; left:170px; top:0; color:#fff;}
.menu ul li:hover ul li:hover ul li:hover li a.hide {background:#427baf; color:#000;}
.menu ul li:hover ul li:hover ul li:hover ul li a {display:block; width:160px; background:#427baf; color:#000;}
.menu ul li:hover ul li:hover ul li:hover ul li a:hover {background:#0082d4; color:#fff;}



Und das habe ich in einer HTML Box untergebracht:
<div class="menu">
<ul>
<li><strong><a href="/index.php?opnparams=VyQLYgE3UiZUOFNhVmxSNVRhUSYEPwJ7USQHYVBuXz1WPQp1ADEDPg85BmU" title="News aus aller Welt">News aus aller Welt</a></strong></li>

<li><a class="hide" href="/system/anypage/index.php?opnparams=VzoLYwFoUmZUZQ">Deutschland</a>

<a href="/system/anypage/index.php?opnparams=VzoLYwFoUmZUZQ">Deutschland



<ul>
<li><a href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUYVMx" title="Pressemitteilungen aus Berlin und Umgebung">Berlin</a></li>
<li><a href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUYlMx" title="Pressemitteilungen aus Bremen und Umgebung">Bremen</a></li>
<li><a href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUYlMw" title="Pressemitteilungen aus Hamburg und Umgebung">Hamburg</a></li>

<li><a class="hide" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUYVM8" title="Pressemitteilungen aus Bayern">Bayern</a>


<a class="sub" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUYVM8" title="Pressemitteilungen aus Bayern">Bayern;



<ul>
<li><a class="sub" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZVMx" title="Pressemitteilungen aus Oberbayern">Oberbayern</a></li>
<li><a class="sub" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZVMy" pressemitteilungen="" aus="" title="Niederbayern">Niederbayern</a></li>
<li><a class="sub" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZVMz" title="Pressemitteilungen aus Oberpfalz">Oberpfalz</a></li>
<li><a class="hide" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZVM8" title="Pressemitteilungen aus Oberfranken">Oberfranken</a>


<a class="sub" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZVM8" title="Pressemitteilungen aus Oberfranken">Oberfranken;


<ul>
<li><a class="sub" href="/system/anypage/index.php?opnparams=VzoLYwFoUmBUYFM3" title="Pressemitteilungen aus dem Landkreis Forchheim">Landkreis Forchheim</a></li>
</ul>
<li><a title="Pressemitteilungen aus Mittelfranken" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZVM9" class="sub">Mittelfranken</a></li>
<li><a title="Pressemitteilungen aus Unterfranken" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZlM0" class="sub">Unterfranken</a></li>
<li><a title="Pressemitteilungen aus Schwaben" href="/system/anypage/index.php?opnparams=VzoLYwFoUmNUZlM1" class="sub">Schwaben</a></li>
</ul></li>

</ul></li>


<li><a class="hide" href="/system/anypage/index.php?opnparams=VzoLYwFoUmpUZg">Österreich</a>

<a href="/system/anypage/index.php?opnparams=VzoLYwFoUmpUZg">Österreich


<ul>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Bezirk">Bezirk</a></li>
</ul></li>

<li><a class="hide" href="/system/anypage/index.php?opnparams=VzoLYwFoUmpUZw">Schweiz</a>

<a href="../system/anypage/index.php?opnparams=VzoLYwFoUmpUZw">Schweiz


<ul>
<li><a href="/system/anypage/index.php?opnparams=" title="Kanton">Kanton 1</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Kanton">Kanton 2</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Kanton">Kanton 3</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Kanton">Kanton 4</a></li>
<li><a href="/system/anypage/index.php?opnparams=" title="Kanton">Kanton 3</a></li>
</ul></li>

</ul></li>
</ul>
</div>

Das ist jedoch nur ein Ausschnitt. Wer es weiter verwenden will, muss natürlich die Einträge anpassen.

Für Verbesserungsvorschläge, bin ich dankbar.



JUSt


just-info / Mein Gartenverein Portal für Gartenfreunde...
Suse 10.1, PHP 5.2.10 und MySQL 5.0.67.,Administration 2.5.1 [Iphigenie] (Revision 4533)

Zitieren Druckerfreundliche Darstellung nach oben
Gast
Unregistrierter Benutzer
Geschrieben: 25.02.2009 20:04

das ist eine feine Sache nur mit dem CSS

aber......

warum nimmst du nicht ein Javascript (DHTML) und baust das ein? Dann ist das ganz normale über die Seitenmenu Boxen und/oder MenuXL verwaltbar.
Vorteil: Muss man nicht mehr von Hand ändern

Flash
[addsig]

Zitieren Druckerfreundliche Darstellung nach oben
just59
Registriert: 29.10.2006
Beiträge: 921
Wohnort: Leipzig


Sende eine Private Nachricht an just59 Besuche die Homepage von just59
Geschrieben: 25.02.2009 21:58

Naja Javascript hat glaube ich nicht jeder. Auf Arbeit hatte ich einen Rechner, wo Java abgeschaltet war, da sah so ein Menü verherend aus. Da dort alle Menüs offen waren.
Es ist zwar eine Fleißangelegenheit, aber die bastle ja schon dran. Mal sehen wann ich fertig bin. Ich habe jetzt übrigens trunk vom 21.2. laufen. Da werden Die Beitrage jetzt auch richtig zugeordnet.

Ja mit dem Menü, müsste man noch etwas universeller gestallten. So dass jeder gleich was damit anfangen kann.



JUSt


just-info / Mein Gartenverein Portal für Gartenfreunde...
Suse 10.1, PHP 5.2.10 und MySQL 5.0.67.,Administration 2.5.1 [Iphigenie] (Revision 4533)

Zitieren Druckerfreundliche Darstellung nach oben
Gast
Unregistrierter Benutzer
Geschrieben: 25.02.2009 22:21

Naja Javascript hat glaube ich nicht jeder. Auf Arbeit hatte ich einen Rechner, wo Java abgeschaltet war


ich behaupte jetzt einfach mal, dass 99% der Windows User Javascript eingeschaltet haben.

Nicht verwechseln mit JAVA, denn JAVA habe ich auch deaktiviert. Aber Javascript zu deaktivieren ist so eine Sache. Da laufen die meisten Webseite nicht mehr richtig.
Übrigens auch OPN nicht. Denn OPN nutzt an vielen Stellen Javascript.

Bei ausgeschaltetem Javascript funktioniert zum Beispiel auf deine Seite die komplette Navigation mit den DropDowns nicht mehr.

Flash
[addsig]

Zitieren Druckerfreundliche Darstellung nach oben
just59
Registriert: 29.10.2006
Beiträge: 921
Wohnort: Leipzig


Sende eine Private Nachricht an just59 Besuche die Homepage von just59
Geschrieben: 26.02.2009 19:44

Jo, da hast Du recht.
Ich habe heut übrigens auf Arbeit gesehen, dass das Menü mit IE6.0xxx auch nicht angezeigt werden kann. Schlimmer noch der Rest dann auch nicht. Müsste dann wahrscheinlich noch eine Abfrage in die CSS oder Box, welchem Browser man nimmt.

Was hast Du für eine Alternative als Javascript Menü? Ich möchte das Menü gern so, dass Links und Unterverzeichnisse unterschiedlich aussehen und wenig Platz benötigt wird.
Ich habe hier gerade was gefunden hier

Werde mal ein wenig basteln...



JUSt


just-info / Mein Gartenverein Portal für Gartenfreunde...
Suse 10.1, PHP 5.2.10 und MySQL 5.0.67.,Administration 2.5.1 [Iphigenie] (Revision 4533)

Zitieren Druckerfreundliche Darstellung nach oben
just59
Registriert: 29.10.2006
Beiträge: 921
Wohnort: Leipzig


Sende eine Private Nachricht an just59 Besuche die Homepage von just59
Geschrieben: 27.02.2009 21:00

Ich habe jetzt ein zweites Menü als Javascript im Regionalbereich angelegt. Wenn Ihr die Seite öffnet, seht Ihr alle beide Menüs (oben links)? Und wie schnell werden diese angezeigt? Funktionieren die Aufrufe?



JUSt


just-info / Mein Gartenverein Portal für Gartenfreunde...
Suse 10.1, PHP 5.2.10 und MySQL 5.0.67.,Administration 2.5.1 [Iphigenie] (Revision 4533)

Zitieren Druckerfreundliche Darstellung nach oben
Petra
Registriert: 09.02.2008
Beiträge: 220
Wohnort: Hannover


Sende eine Private Nachricht an Petra Besuche die Homepage von Petra
ICQ
Geschrieben: 27.02.2009 21:57

Hi,
bei mir funktionieren beide Menüs und sie sind sofort zu sehen, habe es aber erst nur mit dem Firefox getestet.

Grüße von Petra



Der Treffpunkt für Meerwasseraquarianer




Zitieren Druckerfreundliche Darstellung nach oben
sortieren nach

Hilfe anzeigen
Hilfe anzeigen
Vorheriges Thema:  Themengruppe Alle umleiten
Nächstes Thema:  [modules/user_info_xxl] Änderungen

Gehe zu:

Benutzername:
 
Sicherheits-Code
Sicherheits-Code
Neu laden