Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Navigation nebeneinander statt untereinander?

Begonnen von laborix, 04. September 2009, 20:22:49

« vorheriges - nächstes »

laborix

Habe da mal ein Frage  :D

Wenn ich mir das moziloCMS Layout mit der horizontalen Navigation anschaue, sehe ich im "web erzeugten" HTML-Code, das alle Navigationspunkte "mainmenu" oder "detailmenu" als Klasse haben.

Will ich jetzt aber die Navigation nebeneinander, wie zum Beispiel:
Navi1 --- Navi2 --- Navi3 --- Navi4
List1     List1     List1     List1      
List2               List2     List2
List3               List3

also alle Menupunkte sichtbar, müsste ich ein "display: inline" auf jede einzelne Navigation Liste verwenden. Leider geht das nicht, da egal welche Kategorie man anlegt, immer die Klassen "mainmenu" und "detailmenu" für alle Kategorien verwendet werden.

Somit habe ich das Problem, das die Navigation nie im Fussbereich nebeneinader stehen kann, sondern entweder rechtes oder links angeordnet. Gibt es dafür eine Lösung?

oliver.lorenz

#1
Hi

Wenn ich Dich richtig verstehe suchst du in etwa sowas, oder? Beispiel

Wie fit bist du in Sachen CSS? Wenn du fit bist, versuch mal nach "CSS Dropdown Menu" oder "Multilevel Dropdown" oder soetwas zu googlen. Oder schau mal in den Quellcode des Beispiels. Wenn Dir das nicht hilft, schreib einfach nochmal, dann versuch wir das mal gemeinsam.

Grüße
Oliver
.:: mozilo - Wir machen Websites einfach. ::.

Oliver Lorenz auf Twitter, Xing und bei Facebook

laborix

#2
Zitat von: "oliver.lorenz"Wie fit bist du in Sachen CSS?
Fortgeschrittener Änfänger, vermutlich...

Zitat von: "oliver.lorenz"Wenn Dir das nicht hilft, schreib einfach nochmal, dann versuch wir das mal gemeinsam.
Hier mal ein Beispiel, was mir im Kopf rumgeht (siehe Fusszeile):
http://simplebits.com/

Es sollen alle Kategorien in dem Fussbereich nebeneinander mit vollen Inhalten auftauchen. Weiter soll oben, rechts und links keine Navigation vorhanden sein (Ausnahme: Skip-Links zum Content und zur Navigation). Eventuell oben noch die Suche, weiß aber noch nicht genau. Also im Prinzip ein 1-spalten Layout mit Fussbereich Navigation (alle Kategorien). Was ich nicht möchte, ist ein Dropdown Menu, da dies sehr schwer nur mit Tastatur und/oder PDA/Mobile Phone zu bedienen ist.

Eventuell läßt sich das manuell realisieren, indem ich jeder Kategorie händisch ein "div" verpasse und dann mit CSS nebeneinander stelle, was aber bei jeder neuen Kategorie wieder eine Änderung des Templates erfordern würde (Gedankenfehler?).

azett

#3
So in der Art?
Men-uuml~punkte-nbsp~nebeneinander.zip

Demo-Layout:



Was hab ich dafür gemacht?
Grundsätzlich ists erstmal das Standardlayout "moziloCMS horizontale Menüs", mit folgenden Änderungen in der style.css (die jeweiligen originalen Deklarationen hab ich auskommentiert stehengelassen, damit du die Änderungen siehst):
  • div.mainmenu:
    Nix wirklich wichtiges...Text ist nicht mehr zentriert und Padding auf 0 gesetzt.
  • li.mainmenu:
    Hier wirds spannend: Hauptmenüpunkte sind Blockelemente (nicht mehr inline) und floaten links. Außerdem noch das Aufzählungszeichen unterdrückt.
  • ul.detailmenu:
    Nur kleine, fürs Grundprinzip unwichtige Änderungen.
  • li.detailmenu:
    Auch hier nur Kleinkram: Keine Außen- und Innenabstände sowie Unterdrückung des Aufzählungszeichens.
  • a.menu + a.menuactive:
    Nur die Außenabstände entfernt.

Damit das graue div.mainmenu die volle Höhe des Menüs hat, habe ich in der template.html noch einen clearenden Zeilenwechsel nach dem Hauptmenü eingefügt: <div class="mainmenu">
{MAINMENU}
<br style="clear:both;" />
</div>


Achso, und dann wollen wir ja das Submenü für alle Kategorien aktivieren, das erledigt die Änderung des Menütyps in der layoutsettings.conf: usesubmenu = 2


Das wars schon :) Okay, das Menü ist noch oben, aber das kannst du ja in der template.html einfach unter den Inhalt setzen.
Wenn du damit ein hübsches Layout gezaubert hast, würde ich mich sehr über eine Veröffentlichung im Layoutarchiv freuen :)

laborix

#4
Zitat von: "azett"So in der Art?
Ja und Danke für die hilfreichen Hinweise.

Zitat von: "azett"Wenn du damit ein hübsches Layout gezaubert hast, würde ich mich sehr über eine Veröffentlichung im Layoutarchiv freuen :)
Morgen geht der Alltag wieder los, aber wenn was "Hübsches" in der nächsten Zeit entsteht, kein Problem  :D

azett

#5
Von dem Beispiel aus ists übrigens nur noch ein kleiner Schritt bis zum Dropdown-Menü:



Auch wenn es nicht das ist, was laborix anstrebt, hier der Vollständigkeit halber die nötigen Anpassungen im Vergleich zu oben.

<br style="clear:both;" /> fliegt wieder aus der template.html raus.


Im CSS fügen wir dem div.mainmenu eine fixe Höhe hinzu: height:24px;
Dann wollen wir, daß die Detailmenu-Listen erstmal unsichtbar sind: ul.detailmenu {
    display:none;
}
...sie sollen aber wieder sichtbar werden (display:block), wenn man mit der Maus über den dazugehörigen Hauptmenüpunkt fährt - der kombinierte Selektor "li.mainmenu:hover ul.detailmenu" gilt für genau diesen Fall. Außerdem soll das Detailmenü absolut positioniert sein, also über den darunterliegenen Elementen "schweben" (position:absolute).
Der Rest ist dann nur noch Hintergrund, Rahmen und Abstände:li.mainmenu:hover ul.detailmenu {
    display:block;
    position:absolute;

    border:1px solid #C0C0C0;
    border-top:0px solid #C0C0C0;
    background-color:#E0E0E0;

    margin: 5px 0px 0px 0px;
    padding: 5px;
}



Das ist natürlich alles nur als Demo gedacht und läßt sich sicher noch verfeinern. Vor allem aber macht der IE7 gehörigen Mist bei der Positionierung des Detailmenüs...das müßte man vermutlich per CSS-Hack ( :evil: ) fixen. Firefox 3 und Opera 9 machen brav, was sie sollen; andere IE-Versionen habe ich nicht getestet.

Herunterladen und ausprobieren: Aufklapp-Men-uuml~.zip

Nachtrag:
Zitat von: laborixwenn was "Hübsches" in der nächsten Zeit entsteht, kein Problem
Wunderbar :)

laborix

#6
Zitat von: "azett"Auch wenn es nicht das ist, was laborix anstrebt, hier der Vollständigkeit halber die nötigen Anpassungen im Vergleich zu oben.
Hier mal ein funktionsfähiger Entwurf für alle, die sich mit einer "Liquid Layout" Navigation, wie oben von mir beschrieben, auseinander setzen wollen:

Änderungen in der template.html:

<div class="menubox">
       
  {MAINMENU}

  <div id="clear">&nbsp;</div>  // Firefox 1.x und Firefox 2.x mögen keine leeren divs
                   
</div>

Ein zusätzliches div anlegen und dort das {mainmenu} einfügen, danach ein clearendes div.

Änderungen in der CSS Datei style.css:

#clear {
  display: block;
  clear: both;
  width: 100%;
  height: 1px;  /* IE 5 und IE 6 fix */
  overflow:hidden; /* Opera 8.5 fix */
}

/* -------------------------------------------------------- */
/* Hauptmenü */
/* --------- */

.menubox {
  margin: 0;
  width: 98%;  /* liquid layout */
  padding: 1em;
  border: 1px solid red;  /* CSS Debugging, please remove :D */
}

ul.mainmenu {
  clear: both;  /* erstes Clearing im mainmenu */
  float: left;   /* erstes float, dringend benötigt */
  margin: 0;
  padding: 0;
  font-size: 0.9em;  /* liquid font size */
  border: 1px dotted red;  /* CSS Debugging, please remove :D */
}

li.mainmenu {
  margin: 0.4em;   /* flexible Abstände schaffen bei Schriftvergrößerung */
  padding: 0.4em;   /* flexible Abstände schaffen bei Schriftvergrößerung */
  float:left;  /* zweites float, dringend benötigt */
  list-style-type: none;
  font-weight: bold;  /* Kategorien mit fetter Schrift */
  border: 1px solid black;  /* CSS Debugging, please remove :D */
}

.mainmenu a:link, .mainmenu a:visited {
  color: #5b8fbe;
  background-color: transparent;
  text-decoration: none;
}

.mainmenu a:hover {
  color: #1d901d;
  background-color: transparent;
  text-decoration: underline;
}

/* -------------------------------------------------------- */
/* Detailmenü */
/* ---------- */

ul.detailmenu {
  margin: 0;
  padding: 0;
  border: 1px solid green;  /* CSS Debugging, please remove :D */
}

li.detailmenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-weight: normal;  /* Listenelemente mit normaler Schrift */
  list-style-position: inside;  /* Safari 2.x/3.x/4.x und Konqueror 3.x/4.x bug fix */
  list-style-image: url(../grafiken/beispiel.jpg);  /* I'm loving images :D */
}

Mit dieser Konfiguration kommt eine flexible und skalierbare Navigation heraus. Getestet mit IE 6 und IE 8, Opera 8.5 und 10, Safari 4.0.3, Firefox 2.0.21 und Firefox 3.5, sowie Netscape 8 (englische Version).

Eventuell, je nach Anwendung, könnte für Opera ab 7.x oder höher folgende Erweiterung in der CSS Datei nötig sein:

li.mainmenu {
  ...
  border: 1px solid transparent;  /* Opera Bugfix für float und margin 0/padding 0 */
}

An dem CMS Layout wird aber immer noch gearbeitet :D

laborix

#7
Zitat von: "azett"...
Das ist natürlich alles nur als Demo gedacht und läßt sich sicher noch verfeinern. Vor allem aber macht der IE7 gehörigen Mist bei der Positionierung des Detailmenüs...das müßte man vermutlich per CSS-Hack ( :evil: ) fixen. Firefox 3 und Opera 9 machen brav, was sie sollen; andere IE-Versionen habe ich nicht getestet.
Herunterladen und ausprobieren: [attachment=0:32myva8n]Aufklapp-Men-uuml~.zip[/attachment:32myva8n]
...
So, das Ganze ist jetzt mal ausgetestet. Das Dropdown Menü funktioniert in vielen Browsern, nur der Microsoft Internet Explorer 6 macht hier richtig Probleme. Er kennt die Eigenschaft ":hover" nur für normale Links, aber keine die mit "display: none;" oder "position: absolute; left: -9999px;" und der nachfolgenden Eigenschaft von "left: auto". Siehe hierzu auch den Artikel "Son of Suckerfish Dropdowns" bei HTML Dog.

Allerdings haben die Entwickler von moziloCMS inzwischen ein Plugin entwickelt, dass diese Problematik löst. Dieses moziloCMS 1.12 Plugin ist hier zu finden:
http://moziloplugins.hehoe.de/details.php?image_id=7

Getestet mit moziloCMS 1.12 beta 3, Microsoft Internet Explorer 6 und in einem Template eingebaut.

Danke an das Team und speziell an stefanbe :D

azett

#8
<meinSenf>
Nenn mich da hart, aber den IE6 ignoriere ich schon seit längerem. Der ist inzwischen neun (!) Jahre alt...wer käme denn auf die Idee, immer noch z.B. den (nur unwesentlich älteren) Netscape Navigator 4 in den Kompatibilitätstest seines Layouts zu berücksichtigen?
User, die freiwillig immer noch mit IE6 unterwegs sind, haben von mir kein Mitleid - nicht bezüglich der Gefahren, die sie sich aussetzen oder der Features, die ihnen entgegen, sondern vor allem bei meinem Webdesign.
</meinSenf>

laborix

#9
Hehe...

Abgesehen davon, ein "display: none" auf das Detailmenu verhindert, dass Benutzer die einen Screenreader nutzen (müssen), das Detailmenu nie erreichen. Deshalb hatte ich auch die Son of Suckerfish Methode angesprochen. Leider ist das mainmenu bei moziloCMS 1.12 beta 3 als ".class" definiert, somit fasst das Javascript für den IE 6 nicht, da dieses "GetElementByID" haben will  :D

Im Plugin von stefanbe ist das korrigiert, lustigerweise hat dort das mainmenu eine ID, womit das beigelegte Javascript, welches Son of Suckerfish ähnelt, die ID abfragen kann. Was wiederum bewirkt, das es mit dem IE 6 funktioniert.
 
(PS: Einen Screenreader Test habe ich mit dem Plugin nicht gemacht, irgendwann mal, eventuell)

azett

#10
An solchen Problemstellungen erkennt man das Potential der Plugin-Schnittstelle :)