Erstellen eines Dropdown menüs mit dem Standard Navigations Modul

**K4nndoo** · 25.10.2010, 09:16

Hi,
Ich möchte ein Dropdown Menü erstellen
aber ohne ein zusätzliches modil zu instalieren.
Ich habe schon das Forum abgegrast, mehrere tipps ausprobiert,
ich glaube bei mir liegt das eher an was banalen wie das ich irgendwas
nicht eigeschaltet oder nicht falsch geschrieben habe.

Wäre nett wen sich das mal einer angucken könnte
hab keinen Plan mehr was ich noch tun kann.

Der Punkt "Kontakt hat unterpunkte die ausklappen sollten.

URL: http://www.mh-photovoltaikreinigung.de/index.php

***xchs*** · 25.10.2010, 09:31

Hallo K4nndoo,

hast Du Dir dieses Tutorial bzw. diesen Beitrag schon angesehen?

**K4nndoo** · 25.10.2010, 09:50

Nein das Tutorial hatte ich noch nicht gefunden.

Bin es jedoch eben durchgegangen und es funktioniert trozdem nicht.

Die Buttons werden nicht angezeigt.

hier mal der CSS code:

Code:

#header{
height:49px;
width:817px;
position:absolute;
margin-top:382px;
z-index:15;
}
#mainmenu{
padding-left:6px;
}
#mainmenu ul{
list-style-position:inside;
list-style-type:none;
display:inline;
}

.mod_navigation li ul{
bottom:0px;
left:-1px;
right:0px;
top:36px;
position:absolute;
display:none;
}
.mod_navigation li:hover ul{
display:block;
}
.mod_navigation ul li:hover ul ul{
display:none;
}
.mod_navigation ul ul li:hover ul
{
display:block;
}
.mod_navigation ul li:hover ul, .mod_navigation ul li.sfhover ul{
display:block;
}
.mod_navigation ul li:hover ul ul, .mod_navigation ul li.sfhover ul ul{
display:none;
}
.mod_navigation ul ul li:hover ul, .mod_navigation ul ul li.sfhover ul{
display:block;
}


#mainmenu li{
display:inline;
float:left;
}
.active{
margin-top:-4px;
color:#ffffff;
font-size:14px; 
padding-top:8px;
position:center;  
text-align:center;
display:block;   
width:134px;    
height:39px;   
background:transparent url('../tl_files/mh_website/grafiken/button_hover.png') no-repeat center;   
}
.active span{
color:#ffffff;
font-size:14px;
position:center;  
text-align:center;
display:block; 
background:none;  
}
#mainmenu a{
color:#000000;
font-size:14px; 
padding-top:9px;
position:center;  
text-align:center;
display:block;   
width:134px;    
height:39px;   
background:transparent url('../tl_files/mh_website/grafiken/button_normal.png') no-repeat top left;   
}
#mainmenu a:hover{
color:#ffffff;
font-size:14px; 
padding-top:9px;
position:center;  
text-align:center;   
display:block;   
width:134px;    
height:39px;   
background:transparent url('../tl_files/mh_website/grafiken/button_hover.png') no-repeat top left;   
}
#mainmenu .last{
margin-top:-9px;
background-position:50% 21%;
}
#mainmenu .level_2 ul{
list-style-position:inside;
list-style-type:none;
display:none;
}
#mainmenu .level_2 li{
display:none;
float:left;
}
#mainmenu .last span{
margin-top:-17px;
}

und der HTML Code

HTML-Code:

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<script type="text/javascript" src="plugins/sfhover.js"></script>
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>
</head>

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper">


<?php if ($this->top2): ?>

<div id="top2">
<div class="insidetop2">
<?php echo $this->top2; ?> 
</div>
</div>
<?php endif; ?>


<?php if ($this->header): ?>

<div id="header">
<div class="inside">
<?php echo $this->header; ?> 
</div>
</div>
<?php endif; ?>


<?php if ($this->top3): ?>

<div id="top3">
<div class="insidetop3">
<?php echo $this->top3; ?> 
</div>
</div>
<?php endif; ?>


<?php echo $this->getCustomSections('before'); ?>

<div id="mainheaderbg">
<div class="inside">
<?php echo $this->mainheaderbg; ?> 
</div>
<?php echo $this->getCustomSections('mainheaderbg'); ?> 
<div id="clear"></div>
</div>

<div id="container">

<?php if ($this->right): ?>

<div id="right">
<div class="inside">
<?php echo $this->right; ?> 
</div>
</div>
<?php endif; ?>

<?php if ($this->main): ?>
<div id="main">
<div class="inside">
<?php echo $this->main; ?> 
</div>
<?php echo $this->getCustomSections('main'); ?> 
<div id="clear"></div>
</div>
<?php endif; ?>
</div>


<?php echo $this->getCustomSections('after'); ?>
<?php if ($this->footer): ?>

<div id="footer">
<div class="inside">
<?php echo $this->footer; ?> 
</div>
</div>
<?php endif; ?>

<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->

</div>
<?php echo $this->mootools; ?>

</body>
</html>

**ees** · 25.10.2010, 13:33

Doppelposter....

Grüße

ees

**K4nndoo** · 25.10.2010, 14:44

Ich wollte das nach der einen Contaoanleitung machen um ein DropDown Menü mit dem Standart Navifgationsmodul zu erstellen.
das ist hauptsächlich CSS.

**Silvano** · 25.10.2010, 15:16

Wenn ich den Quelltext anschaue und dort auf den Link von

Code:

<script type="text/javascript" src="plugins/sfhover.js"></script>

klicke, findet er diesen Script auch nicht. Verlinke die Datei richtig und dann kannst Du es nochmals versuchen

**K4nndoo** · 25.10.2010, 15:32

Die datei hab ich in den ordner verschoben,
funktioniert trozdem nicht

**Thomas** · 25.10.2010, 19:23

Ich hoffe, dass Du das was teilweise jetzt kommt nicht persönlich nimmst.

Was ich nicht verstehe ist, dass Du den Header absolut positionierst anstatt die Hintergrundgrafik von top3 darin zu verlinken und dann im Header die Navigation absolut zu positionieren.

Mit anderen Worten, top2 & top3 ist eigentlich der Header und Du könntest Dir Custom sparen bzw. für mainheaderbg alleine nutzen. Top3 kannst Du ausblenden indem Du für den weiteren Seiten (ausser die Startseite) ein eigenes Layout ohne top3 anlegst und dieses auf den entsprechenden Seiten verwendest. <- Wenn überhaupt ein eigener Bereich notwendig ist.

Dann ist Dein CSS nicht valide, sprich id="mainheaderbg" hast Du 2x vergeben, was für eine Validität nicht zulässig ist. ID darf man nicht 2x vergeben, dafür gibt es die class.

Das ist aber erstmal garnicht so wichtig, dass was jetzt kommt ist viel wichtiger.

In meinen Augen solltest Du das Template nochmal komplett überarbeiten, alleine schon um das Framework von Contao sinnvoll zu nutzen und keinen überflüßigen Code zu generieren.

Obendrein solltest Du Dir Firebug für den Firefox installieren, damit kannst Du Deinen Code kontrollieren und Änderungen ausprobieren bevor Du sie übernimmst.

Ich habe nur ein paar CSS-Anweisungen überflogen und gesehen, dass Du jedem Hauptcontainer eine feste Breite zuweist.
Dafür ist der Wrapper da, der Dir die gesamte Seite in der gewünschten Breite hält.

Naja, auch für einige andere Kleinigkeiten kann er da sein, aber das würde jetzt zu weit führen.

Meine Güte, ich habe jetzt einen halben Roman geschrieben und nicht wirklich eine Lösung gebracht. Das liegt aber wie gesagt daran, dass Du kein logisches und durchdachtes Konzept verwendest. Was auch der Grund dafür sein dürfte, dass Andere nicht anworten, da der Code nicht nur chaotisch ist, sondern auch unübersichtlich.

Wenn Du das erstmal gerade gezogen hast, rate ich Dir das Tut von Oben nach Unten Schritt für Schritt nach zu vollziehen! Auch erstmal mit den Farben usw., denn dann wirst Du irgendwann verstehen wie suckerfish überhaupt tickt.

Um die Positionierung des Menüs kannst Du Dich ganz zum Schluß kümmern.
Dazu fehlen Dir, glaube ich, noch ein paar CSS-Kenntnisse zu.

Ich hoffe, Dir zumindest ein wenig auf die Sprünge helfen zu können oder Du suchst Dir jemanden, der Dir das entweder freiwillig gerade biegt oder für einen kleinen Obolus. Das ist nämlich nicht innerhalb von wenigen Minuten gemacht.

Auch wenn das etwas hart klingt, Aufgeben gibt's nicht. :P

**K4nndoo** · 26.10.2010, 08:06

Ich nehme das nicht Persönlich es ist mir nur egal,

denn ich brauche eine Lösung für das Problem nicht für eine elegantere Gestaltung mit Contao.
Da dies meine erste Contaoseite ist bin ich froh das das sonst so aussieht wie es soll.

Denn wenn man bei Contao ein Template schreibt dann ist das anders als bei einer normalen HTML CSS seite.
Befehle werden von Contao überschrieben, nicht dargestellt, anders dargestellt oder gar nicht wahrgenommen.

He........ · 27.10.2010, 05:45

Zitat von xchs

hast Du Dir dieses Tutorial schon angesehen?

nur so am Rande:
mit display:none; oder visibility:hidden ausgeblendete Submenüs werden von den Screenreadern nicht mehr vorgelesen und sind deshalb imho für Dropdowns ungeeignet.
In diesem Punkt empfinde ich das Contao-Wiki verbesserungswürdig, weil die dortige Lösung Behinderten Steine in den Weg legt.

Einfacher wäre es, sie z.B. per CSS aus dem Viewport zu schieben, z.B. mit left-9999px. Beim Einblenden einfach wieder auf left:auto; schalten

**K4nndoo** · 27.10.2010, 08:56

Ich habe jatzt auch mehrere Fehler im Quellcode gefixed aber es funktioniert trozdem nicht.

Gibt es eine andere Möglichkeit für ein Dropdownlemü?

***xchs*** · 27.10.2010, 09:35

Zitat von K4nndoo

Gibt es eine andere Möglichkeit für ein Dropdownlemü?

Wäre MenuMatic eine Alternative?

@Helmschrot:
Dass das Suckerfish-Tutorial im Wiki auf contao.org verbesserungswürdig ist und an der einen oder anderen Stelle noch optimiert werden kann, steht außer Zweifel.

Vielleicht ergibt sich mal die Gelegenheit, dass das Tutorial jemand in das neue Contao Wiki überträgt und dabei entsprechend überarbeitet. Du wärst in dieser Hinsicht sicherlich ein ausgewiesener Experte was CSS und barrierearmer Zugang betrifft

Ich würde mal annehmen, dass der Original-Autor des Tutorials auch nichts dagegen haben wird.

He........ · 27.10.2010, 11:49

Zitat von xchs

Du wärst in dieser Hinsicht sicherlich ein ausgewiesener Experte was CSS und barrierearmer Zugang betrifft

naja, zumindest die große Klappe hab ich schon mal.

Zitat von xchs

Vielleicht ergibt sich mal die Gelegenheit, dass das Tutorial jemand in das neue Contao Wiki überträgt und dabei entsprechend überarbeitet.

Das würde ich sicher erst machen wenn man Contaokenntnisse dramatisch besser sind. (Bin bei Peter Müllers Buch erst auf Seite 401)

**andreasisaak** · 27.10.2010, 22:10

Zitat von K4nndoo

Ich nehme das nicht Persönlich es ist mir nur egal,

denn ich brauche eine Lösung für das Problem nicht für eine elegantere Gestaltung mit Contao.
Da dies meine erste Contaoseite ist bin ich froh das das sonst so aussieht wie es soll.

Denn wenn man bei Contao ein Template schreibt dann ist das anders als bei einer normalen HTML CSS seite.
Befehle werden von Contao überschrieben, nicht dargestellt, anders dargestellt oder gar nicht wahrgenommen.

Ich will nicht noch mehr Unruhe in den Thread bringen, aber bevor ich meine Bauweise der Dropdowns poste würde ich gerne wissen wieviel Wissen überhaupt da ist. Werden die rudimentären Tutorials von dir verstanden? Das wäre wirklich hilfreich.

Fertige Lösungen werden hier selten im Forum präsentiert.

**K4nndoo** · 09.11.2010, 08:41

Achso Sorry
Es brauch keiner Mehr Posten Funktioniert jetzt.
Danke für die Hilfe

**Sinainu** · 17.01.2014, 12:54

Ich würde die Lösung ganz gerne mal von andreasisaak sehen... falls es nciht schon zu spät dafür ist, nachzufragen, ob die Lösung überhaupt noch aktuell ist.

**tab** · 17.01.2014, 13:29

Hier ist wie bei vielen Problemchen mit Contao das vielerorts hier im Forum erwähnte Buch von Peter Müller (Webseiten erstellen mit Contao 3) eine prima Informationsquelle. Unter anderem gibts da auch CSS für ein Dropdown Menü. Funktioniert prima, ich verwende es bisher in allen meinen Contao-Projekten. Ich würde es ja hier reinstellen, aber das wäre dann wohl nicht ok. Jedenfalls funktioniert es nach der von Gast

angedeuteten Lösung, den Level 2 erst mal komplett aus dem Viewport zu schieben, wenn er nicht gebraucht wird und dann den entsprechenden Teil wieder rein, wenn er angezeigt werden muss.

**Sinainu** · 24.01.2014, 13:49

Habe mir zu dem Dropdown-Menü mal einige Erweiterungen angeschaut und bin nun mit dieser Erweiterung aus dem Thread zufrieden:
https://community.contao.org/de/show...ish-Navigation

Natürlich muss wie bei jedem Dropdown auch hier das CSS angepasst werden, aber läuft nun so wie ich es will...

Zwar funktioniert es nicht auf der bereits vorhandenen Seite, welche das Dropdown bekommen sollte... Dort wird es mir nicht angezeigt sobald ich es so anpasse, dass es über den Content faden soll. Kurzerhand die ganzen Seiten und Inhalte mit einer frischen Contao-Installation neu erstellt und siehe da, es funktioniert... merkwürdig aber naja...

**pmmueller** · 28.01.2014, 07:51

Zitat von tab

CSS für ein Dropdown Menü. Funktioniert prima, ich verwende es bisher in allen meinen Contao-Projekten. Ich würde es ja hier reinstellen, aber das wäre dann wohl nicht ok.

Auf das CSS für das Dropdown-Menü ist beim besten Willen kein Copyright oder sowas. Das habe ich mir auch nicht ausgedacht, das basiert auf dem Sons-of-Suckerfish-Menü

**tab** · 28.01.2014, 10:03

Ok, dann weiss ich Bescheid für künftige Anfragen wegen Dropdown-Menü mit CSS

Ich bin da da eben erst einmal vorsichtig mit nahezu wörtlichen Zitaten. Das Buch will ja schliesslich auch noch verkauft werden

. Zumal das sicher für Einsteiger eine gute Quelle von Lösungen für die gängigen Probleme ist, die bei Websites eben so anfallen. Mir hat es jedenfalls sehr geholfen, die Anfangsschwierigkeiten zu überwinden. Natürlich sind auch das Contao-Wiki und die anderen Ressourcen hier sehr hilfreich. Dass du jetzt sogar die Änderungen wegen der neuen Contao-Version noch ins Netz stellst ist natürlich prima.

**Acta** · 04.02.2014, 07:31

kann man das DropDown irgendwo einsehen?

**pmmueller** · 04.02.2014, 07:39

Die Beispielsite aus meinem Contaobuch findest du unter der URL

http://beispielsite.contaobuch.de/

Da ist dann auch das Dropdown-Menü drin.

**Acta** · 04.02.2014, 10:01

Hallo Peter ,

wie müsste denn das ganze Css ausschauen - wenn ich eine dritte ebene rechts von der zweiten ebene einblenden möchte?

**Acta** · 04.02.2014, 10:14

Es müsste ja erstmal eingestellt werden, dass die dritte Ebene nicht angezeigt wird. Und erst beim Hover über ebene 2 erscheint. Aber ich seh gerade nicht durch :-)

**pmmueller** · 04.02.2014, 11:11

Von Contao aus wird beim Dropdown immer das komplette HTML angezeigt. Das Ein- und Ausblenden geschieht per CSS.

Mehr als zwei Ebenen kannst du dir hier anschauen: Sons-of-Suckerfish-Menü

Ich nutze die Dinger nicht, weil m. E. der Vorteil von Dropdowns (schnell und übersichtlich) bei mehr als zwei Ebenen nicht mehr gegeben ist.

**Acta** · 05.02.2014, 08:31

Hab es mal auf 2 ebene begrenzt. Das reine CSS menü soll das Menumatic ersetzten. Habe einen spürbaren Geschwindigkeitszuwachs und der Nutzer wird es mir auch danken, da es nicht mehr so unübersichtlich ist.

**Acta** · 12.02.2014, 09:59

Fall es mal einer benötigt:

Code:

#header .mod_navigation ul,
{
	width:auto;
	float:left;
	margin:0;
	padding:0;
	list-style-type:none;
}

#header .mod_navigation ul,
{
	width:auto;
	float:left;
	margin:0;
	padding:0;
	list-style-type:none;
}

#header .mod_navigation li .level_1,
{
	border:1px solid #ccc6c6;
}

#header .mod_navigation .level_1,
{
	width:auto;
	float:left;
	margin:11px 0 0;
	padding:0;
	list-style-type:none;
}

#header .mod_navigation ul,
{
	width:auto;
	float:left;
	margin:0;
	padding:0;
	list-style-type:none;
}

#header .mod_navigation .level_1 li .submenu,
{
	padding-right:15px;
	background:url("tl_files/1/arrow_down.gif") right center no-repeat;
}

#header .mod_navigation li,
{
	width:auto;
	float:left;
	margin:0;
}

#header .mod_navigation .level_1 li,
{
	width:auto;
	float:left;
	margin:0;
	border-top:1px solid #c4c4c4;
	border-right:1px solid #c4c4c4;
	border-bottom:1px solid #c4c4c4;
	border-left:0px solid #c4c4c4;
}

#header .mod_navigation .level_2 li,
{
	width:auto;
	float:left;
	margin:0;
	border:0;
}

#header .mod_navigation a,
#header .mod_navigation span,
{
	display:block;
	margin-right:10px;
	margin-left:10px;
	padding-right:0;
	text-decoration:none;
	color:#768693;
	line-height:28px;
}

#header .mod_navigation .active,
#header .mod_navigation .trail,
{
	font-weight:bold;
}

#header .mod_navigation a:hover,
#header .mod_navigation a:focus,
{
	text-decoration:underline;
	color:#000000;
}

#header .mod_navigation .level_2,
{
	width:0;
	height:0;
	left:-32768px;
	position:absolute;
	overflow:hidden;
	display:inline;
	top: -32768px;
}

#header .mod_navigation .level_2 li,
{
	clear:both;
}

#header .mod_navigation .level_2 li:hover,
{
	width:300px;
	background-color:#D7751E;
}

#header .mod_navigation li:hover .level_2,
{
	width:auto;
	height:auto;
	left:auto;
	top:auto;
	overflow:auto;
	display:block;
	background-color:#f5f0eb;
	background-position:left top;
	border:1px solid #D7751E;
	min-width: 300px;
	z-index: 1000;
}

#header .mod_navigation li:hover .level_2 a,
#header .mod_navigation li:hover .level_2 span,
{
	font-weight:normal;
	text-decoration:none;
	font-size:12px;
	line-height:18px;
}

#header .mod_navigation .level_2 span.active,
{
	font-weight:bold;
}

#left .mod_navigation ul
{
	margin:0;
	padding:0;
	list-style-type:none;
}

#left .mod_navigation li
{
	margin:0;
	padding:0;
}

#left .mod_navigation a,
#left .mod_navigation span
{
	display:block;
	margin-bottom:1px;
	padding:0;
	text-decoration:none;
	color:#768693;
	outline: 0 none;
}

#left .mod_navigation a:hover,
#left .mod_navigation a:focus
{
	text-decoration:underline;
	color:#141414;
}

#left .mod_navigation span.active,
#left .mod_navigation .trail
{
	font-weight:bold;
	color:#141414;
}

#left .mod_navigation .level_2 a,
#left .mod_navigation .level_2 span
{
	margin-left:12px;
	font-weight:normal;
	font-size:12px;
}

#left .mod_navigation .level_2 a:hover,
#left .mod_navigation .level_2 a:focus
{
	text-decoration:underline;
	color:#141414;
}

#left .mod_navigation .level_2 span.active
{
	font-weight:bold;
}

#left .mod_navigation .level_2 .trail
{
	font-weight:bold;
	color:#141414;
}

#left .mod_navigation  .level_3 a,
#left .mod_navigation  .level_3 span
{
	margin-left:24px;
	font-weight:normal;
	font-size:12px;
}

#left .mod_navigation .level_3 a:hover,
#left .mod_navigation .level_3 a:focus
{
	text-decoration:underline;
	color:#141414;
}

#left .mod_navigation .level_3 span.active
{
	font-weight:bold;
}

**ben_cms** · 08.02.2017, 22:54

@pmmueller

Inwiefern lohnt es sich z.Z. das Buch noch zu kaufen, da sich es ja noch auf die 3.3 Version bezieht und es ja schon neuere Versionen gibt.
Oder bleibt das Grundlegende immer gleich?

Gruß
Ben

**pmmueller** · 10.02.2017, 12:22

Zitat von ben_cms

@pmmueller
Inwiefern lohnt es sich z.Z. das Buch noch zu kaufen, da sich es ja noch auf die 3.3 Version bezieht und es ja schon neuere Versionen gibt.
Oder bleibt das Grundlegende immer gleich?

Die aktuelle vierte Auflage, "Contao - Das umfassende Handbuch", basiert auf Version 3.3.5, und gilt in weiten Teilen auch für die V3.5. Die Online-Version der Beispielsite (http://beispielsite.contaobuch.de) habe ich problemlos auf die 3.5er aktualisiert und es gibt im Downloadbereich auch ein Frontend-Template für die Beispielsite mit 3.5.*

Die größte Neuerung nach Erscheinen des Buches ist die Möglichkeit, mit Contao responsive Grafiken auszuliefern, und dafür lohnt sich nicht wirklich eine neue Auflage. *

Einen Überblick zum Thema "Responsive Grafiken" gibt's in meinem Blog:*
http://pmueller.de/blog/responsive-b...eberblick.html

Die Contao-Funktion beschreiben die Programmierer auf Ihrer Website:*
http://rocksolidthemes.com/de/contao...picture-contao

Auf der Contao-Konferenz 2016 habe ich dazu auch einen Vortrag gehalten, den es auf Video gibt. Link dazu im folgenden Beitrag:
http://pmueller.de/blog/contao-konfe...d-vortrag.html

Zu Contao 4.* ist momentan noch nichts Konkretes geplant.

**ben_cms** · 13.02.2017, 13:16

Zitat von pmmueller

Die aktuelle vierte Auflage, "Contao - Das umfassende Handbuch", basiert auf Version 3.3.5, und gilt in weiten Teilen auch für die V3.5. Die Online-Version der Beispielsite (http://beispielsite.contaobuch.de) habe ich problemlos auf die 3.5er aktualisiert und es gibt im Downloadbereich auch ein Frontend-Template für die Beispielsite mit 3.5.*

Die größte Neuerung nach Erscheinen des Buches ist die Möglichkeit, mit Contao responsive Grafiken auszuliefern, und dafür lohnt sich nicht wirklich eine neue Auflage. *

Einen Überblick zum Thema "Responsive Grafiken" gibt's in meinem Blog:*
http://pmueller.de/blog/responsive-b...eberblick.html

Die Contao-Funktion beschreiben die Programmierer auf Ihrer Website:*
http://rocksolidthemes.com/de/contao...picture-contao

Auf der Contao-Konferenz 2016 habe ich dazu auch einen Vortrag gehalten, den es auf Video gibt. Link dazu im folgenden Beitrag:
http://pmueller.de/blog/contao-konfe...d-vortrag.html

Zu Contao 4.* ist momentan noch nichts Konkretes geplant.

Danke für die Info! Buch ist gekauft.

**chriss136** · 06.08.2018, 23:40

Zitat von ben_cms

Danke für die Info! Buch ist gekauft.

Gibt es mittlerweile für C4 Hilfe?
Ohne C4 ein Dropdown bauen....kein Problem, aber es fehlen die Schritte, die intern nötig sind bei C4.
Ich hänge am level_2, der wird bei klick angezeigt. Aber nur horizontal und nicht als Dropdown, obwohl CSS eingebunden ist.
www.belleza-jes.de

~~Hat schon jemand Erfahrung mit dem Isotope ecommerce? Kriege immer alles auf allen Seiten angezeigt. (Warenkorb)~~
//Moderation: Fragen, die nichts mit dieser Diskussion zu tun haben, bitte im thematisch passenden Thread/Unterforum posten. Danke.

Gruß
Chriss

**mlweb** · 07.08.2018, 18:56

Zitat von chriss136

Ohne C4 ein Dropdown bauen....kein Problem, aber es fehlen die Schritte, die intern nötig sind bei C4.

Eigentlich ist die Verwendung von <strong> statt <span> für den aktiven Navigationspunkt der einzige wirkliche Unterschied zwischen Contao 3 und Contao 4 was die Navigation betrifft. Kannst also prinzipiell alles anwenden, was Du über Contao 3 und Dropdown-Navigationen findest. Abgesehen davon gibt es m.E. weder in Contao 3 noch in Contao 4 irgendwelche Spezialitäten, die sich grundsätzlich von einer Dropdown-Navigation auf einer reinen HTML-Seite unterscheiden würden. Über den Einsatz von Erweiterungen und deren Möglichkeiten wurde ja schon an anderer Stelle ausgiebig diskutiert.

**chriss136** · 07.08.2018, 23:37

ich hab das so eingebaut, aber was fehlt, oder stimmt nicht?

Code:

.level_1 {
    position: relative;
    display: inline-block;
}
.level_1:hover .level_2 {
    display: block;
} 
.level_2 {
    display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 120px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     padding: 12px 16px;
     z-index: 1;
    }
}

Gruß
Chriss

**fiedsch** · 08.08.2018, 05:49

Wenn ich das richtig sehe, hast Du zwei getrennte Navigationen (.main-navigation und .sub-navigation) für die beiden Ebenen. Die CSS Beispiele gehen davon aus, daß alles in einer Navigation enthalten ist.

**mlweb** · 08.08.2018, 07:07

Ich muss ehrlich gestehen, dass ich Dein Problem nicht verstehen kann. Du hattest in diesem Thread selbst ein Video angeführt, welches genau für das von Dir verwendete Theme Opensauce die Lösung vorkaut. Warum verwendest Du diese Lösung nicht?

**chriss136** · 08.08.2018, 12:04

Weil ich an die CSS vom RocksoliddropdownMenu nicht dran komme. Jedesmal wenn ich danach suchen lasse in google werde ich weggeleitet.
Im Download selbst des themes isse nicht drin.

***xchs*** · 08.08.2018, 12:09

https://community.contao.org/de/show...l=1#post359594

**chriss136** · 08.08.2018, 18:29

Danke, den hab ich gesucht.
Nun isser drin, aber !! ....
Mit dem Theme Assistant bekomme ich den Hintergrund der Navi nicht dunkel. Sowie die "Negativ" Darstellung weg.
Und der level2 ist nach dem 1, klicken wieder zu sehen.

Führt kein Weg an der Rocksolid....css Datei vorbei ? Muss ich dort alles ändern ? Ich frag lieber vorher, das wäre sehr viel arbeit :-(

Gruß
Chriss

**do_while** · 08.08.2018, 18:54

Wenn man sich spätere Updates nicht verbauen will, sollte man die originalen CSS-Dateien so belassen.

Best Practice ist, eine eigene CSS-Datei hinter den anderen CSS-Dateien zu laden und darin die wenigen Änderungen durch "Überschreiben" des Original-CSS einzutragen.

Überschreiben heißt hier, dass man mit dem gleichen Selektor (oder einem mit höherer Spezifität) das Original durch eigene CSS-Anweisungen verändert. Wenn das eigene CSS später geladen wird, ersetzt man damit die Anweisungen aus dem Original und bleibt damit updatefähig.

**chriss136** · 10.08.2018, 13:23

Zitat von xchs

Hallo K4nndoo,

hast Du Dir dieses Tutorial bzw. diesen Beitrag schon angesehen?

leider sind beide Beiträge tot. könnten mir aber vielleicht helfen um einen 3. Level anzusprechen mit dem Modul ? Brauche doch noch eine Ebene mehr^^.
Stoplevel auf 2 setzen hat nicht ganz zu dem gewünschten Effekt geführt.

Grüße
Chriss