Autor |
CSS Menu mit mehreren Ebenen |
just59 Registriert: 29.10.2006
Beiträge:
921
Wohnort: Leipzig

|
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)
|
 |
just59 Registriert: 29.10.2006
Beiträge:
921
Wohnort: Leipzig

|
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)
|
 |
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]
|
 |
just59 Registriert: 29.10.2006
Beiträge:
921
Wohnort: Leipzig

|
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)
|
 |
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]
|
 |
just59 Registriert: 29.10.2006
Beiträge:
921
Wohnort: Leipzig

|
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)
|
 |
just59 Registriert: 29.10.2006
Beiträge:
921
Wohnort: Leipzig

|
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)
|
 |
Petra Registriert: 09.02.2008
Beiträge:
220
Wohnort: Hannover

|
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

|
 |
|
sortieren nach
|