Modul für rein (!) CSS-basiertes Dropdown Menü?

k4simir · 30.04.2006 15:24

hallo,

gibt es ein modul für joomla, welches ein rein css basiertes horizontales dropdown menü generieren kann? sprich: KEIN javascript benötigt!?

ein beispiel für sowas gibt's hier:
http://barrierefrei.e-workers.de/wor...cks/menues.php

wäre cool, wenn ich sowas (statt des "display menu tigra's") einbinden könnte, weil dann auch suchmaschinen etc. die seite ohne probleme durchlaufen können und das ganze dann auch barrierefrei wäre ...

viele grüße und nen schönen sonntag
johannes

k4simir · 01.05.2006 16:12

habe das problem selbst gelöst.

1. zunächst habe ich mir das "extended menu module" runtergeladen.
http://de.siteof.de/extended-menu.html

2. module mit meinem menu verbunden und an der modulposition "top" angezeigen lassen

3. danach in den moduleinstellungen "typ = flatlist" und "auto expand" einstellen.

ergebnis: damit bekommt man erstmal eine reine verschachtelte html - liste ...

4. dann muss ein neues stylesheet hinzugefügt werden. beschrieben wird das hier:
http://www.htmldog.com/articles/suckerfish/dropdowns/

5. für browser, welche die "hover" css-klasse nicht vollständig unterstützen noch ein
javascript 12zeiler hinzugefügt (siehe http://www.htmldog.com/articles/suckerfish/dropdowns/)

und voila wir haben unser css-basiertes dropdown menü, welches suchmaschinen- und screenreader-freundlich (und damit barrierefrei) ist!

ergebnis: http://www.neuber-art.de/joomla/
(getestet mit IE 6, FF 1.5, Opera 8.54)

viele grüße und nen sonnigen montag
johannes

(am design wird noch gebastelt

k4simir · 13.11.2006 17:30

Aufgrund zahlreicher privater Nachfragen habe ich hier nochmal die Sourcen zu meinem CSS basierten Dropdown Menü zusammengefasst:

1. Hier zunächst das Template (bitte NICHT weiterverwenden, es ist NICHT frei und enthält u.a. urheberrechtlich geschützte Grafiken, die ich aber schon alle rausgelöscht habe): webstuff.zip

2. Wichtig sind folgende Zeilen in der index.php:

HTML-Code:

<body>
  <script type="text/javascript">
    <!--
      sfHover = function() {
        var sfEls = document.getElementById("mainlevel").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
          sfEls[i].onmouseover = function() {
            this.className += " sfhover";
          }
          sfEls[i].onmouseout = function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
          }
        }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);
    //-->
  </script>
  <!-- ... -->
</body>

3. In der Zeile:

Code:

document.getElementById("mainlevel")

tragt ihr die CSS Id eures Menüs ein!

4. Weiterhin wichtig sind diese Zeilen in der index.php:

HTML-Code:

<div id="topmainmenu">
	<?php
		if (mosCountModules( "top" )) {
			mosLoadModules ( 'top',-1);
		}
	?>
</div>

Hier wird mein Dropdown Menü auf der Position "top" geladen.

5. Zur Formatierung des Menü's dient die CSS Datei: "css/menu.css".

6. Einstellungen des Moduls "extended menu" (ich benutze noch Version 1.0.3):
settings_extended-menu_1.jpg
settings_extended-menu_2.jpg
settings_extended-menu_3.jpg

7. Das "topmenu" welches als Dropdown Menü angezeigt wird, ist folgendermassen strukuriert:
aufbau_topmenu.jpg

So ich hoffe, ich konnte Euch helfen. Habe leider momentan wenig bis gar keine Zeit mich darum zu kümmern. Bei Fragen, Fehlern und Hinweisen einfach nochmal ne private Nachricht an mich

Viele Grüße
Johannes (alias k4simir)

**joomla-freak** · 16.11.2006 18:17

das dropdown-menu - und auch die kuenstler-seite sind klasse! Komplimente! hat mich inspiriert!

**Paul_D** · 16.11.2006 22:43

Hallo,
ich habe auch nach langem Suchen immer noch keine Lösung für mein Poblem gefunden. Wie eigentlich schon super oben erklärt, habe ich das Modul exmenu in verbindung mit Suckerfish probiert zu kombinieren. Ich habe die Einstellungen im backend genauso übernommen. Nur ich habe das Problem, dass ich es nicht über CSS angesprochen bekomme.

Meine Frage: Wie bekomme ich es in eine horizontale Form und wie bekomme ich es übere CSS angesprochen.

Muss ich im Backend dem Module Class Suffix eine seperate css datei zuweisen wo ich dann alles reinschreibe ?
Ich habe mir das son-of-suckerfish-horizontal-1.0.1. runter geladen, und die Ordner "css", "images", "js", "menu.html" und "menu.ini" dem templateordner hinzugefügt.

Leider weiss ich hier jetzt nicht weiter ....
Vielen Dank für die Hilfe !

**dired** · 19.11.2006 13:35

klasse beschreibung, aber fehlt im zip nicht die menu.html? damit das ganze auch funktioniert?

mfg dired

**alexander912** · 27.11.2006 19:31

@k4simir
könntest du das Bild unter dem Punkt:
7. Das "topmenu" welches als Dropdown Menü angezeigt wird, ist folgendermassen strukuriert:
Vllt auch in groß posten oder verlinken .. weil so kann man keider nix erkennen ... oda geht das nur mir so ? !
Thx Mfg Alexander

k4simir · 28.11.2006 10:06

Hallo an alle Interessierten.

Es freut mich, dass mein kleines Dropdown so viel Anklang findet. Leider scheint es wohl einige Probleme bei der Umsetzung zu geben, obwohl ich die nicht so recht nachvollziehen kann. Eigentlich habe ich alle Schritte im letzten Post genau erklärt. Und bei mir (wie auch einigen anderen Forumsmitgliedern) funktioniert das wirklich prächtig.

Hier nochmal ein paar Hinweise.

Ich benutze kein "menu.html"! Also kein Template für das Dropdownmenu! Ich benutze wirklich nur "reines" CSS. Damit ist die Einstellung "Template Name=menu.html" im "Extended Menu Modul" hinfällig. Ich denke mal, sie wird einfach nicht ausgewertet.

Hier nochmal das "menu.css" einzeln (ist auch schon im "webstuff.zip" enthalten), wichtig ist, dass ihr die richtige CSS-Klasse "mainlevel" benutzt. Alles was ihr braucht ist dieses Stylesheet. Es übernimmt die horizontale Anordnung der HTML Listenelemente und die vertikale Anordnung der Sublisten ... Wichtig ist dabei noch die Eintstellung "Menu Style=Flat List" und "Source Type=Menu (Auto Expand Sections/Categories)" im Modul "Extended Menu".

HTML-Code:

/**
/*************************************/
/*   Spezielles Menu Stylesheet      */
/*************************************/

#mainlevel, #mainlevel ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-align: left;
}

#mainlevel ul {
  width: 108px;
  overflow: hidden;

  background-color: #C7C7C7;
  border: 1px solid #FFFFFF;
  background-image: url('./../images/column_bg_4x407.png');
  background-repeat: repeat-x;
  background-position: 0px 0px;
}

#mainlevel a {
  display: block;
  width: 108px;
}

#mainlevel a:before {
	content: url('./../images/blind_24x2_alpha.png');   
}

#mainlevel li {
  float: left;
  width: 108px;
  line-height: 32px;
}

/**
 * Hide the submenus
 */
#mainlevel li ul {
  position: absolute;
  width: 108px;
  left: -2000px;
}

/**
 * Show the submenus on mouse-over (.hover class)
 */
#mainlevel li:hover ul {
  left: auto;
}

/**
 * IE fix ... Javascript Fix
 */
#mainlevel li:hover ul, #mainlevel li.sfhover ul {
  left: auto;
}

Eingebunden habe ich das CSS File in meinem Template im HTML-Header per:

HTML-Code:

<style type="text/css">
    @import url(<?php echo $mosConfig_live_site; ?>/templates/neuber-art.de/css/menu.css);
</style>

Weiterhin habe ich hier nochmal den Screenshot, des Joomla Menumanagers für mein verwendetes "topmenu". Ich hoffe, es ist jetzt besser zu erkennen! Irgendwie verändert das Joomla CMS Forum die Grafik beim Hochladen immer. topmenu_structure.jpg

Ansonsten das Bild nochmal gezippt: topmenu_structure.zip

Viele Grüße
Vom Johannnes (alias dem K4simir).

**alexander912** · 29.11.2006 09:08

Vielen Dank dir

**MaXiMuM** · 20.12.2006 14:34

hallo k4simir,

danke für dein tut ersteinmal.
ich bin schritt für schritt vorgegangen, wie du es beschreiben hast. die index.php habe ich bearbeitet und das Stylesheet habe ich eingefügt, trotzdem ist mein Menü standartmäßig Vertikal. Ich weiß ehrlich nicht, was ich übersehen haben sollte.
Kannst ja mal gucken http://demo.partypeeps.de

Würd mich freuen, von dir zu hören.

PS: das Template habe ich gepackt PW hast du per PN bekommen

Thema: Modul für rein (!) CSS-basiertes Dropdown Menü?

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Modul für rein (!) CSS-basiertes Dropdown Menü?

Erhielt Danksagungen von:

selbst gelöst

Erhielt Danksagungen von:

Nachtrag zum Dropdown Menü

Erhielt Danksagungen von:

genial!

Problem horizontales Menü

Nachtrag Dropdownmenu

Erhielt Danksagungen von:

Ähnliche Themen

Css Menü mit grafiken machbar?

Neues Modul, css fuer individulle Schriftgroesse umgehen?

css frage zu dropdown und serachbox

Dropdown Menü im Hauptmenü!

Bild im Modul falsch angezeigt, trotz Änderung in css

Lesezeichen

Lesezeichen

Berechtigungen