Ergebnis 1 bis 40 von 40

Thema: Erstellen eines Dropdown menüs mit dem Standard Navigations Modul

  1. #1
    Contao-Nutzer Avatar von K4nndoo
    Registriert seit
    11.02.2010.
    Beiträge
    108

    Standard Erstellen eines Dropdown menüs mit dem Standard Navigations Modul

    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
    Geändert von Spooky (08.08.2018 um 07:14 Uhr) Grund: Standar*d*

  2. #2
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.583
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo K4nndoo,

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

    [Unterstützungsmöglichkeiten]

  3. #3
    Contao-Nutzer Avatar von K4nndoo
    Registriert seit
    11.02.2010.
    Beiträge
    108

    Standard

    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>
    Geändert von K4nndoo (25.10.2010 um 11:38 Uhr)

  4. #4
    Contao-Fan
    Registriert seit
    20.07.2010.
    Beiträge
    386

    Standard

    Doppelposter....

    Grüße

    ees

  5. #5
    Contao-Nutzer Avatar von K4nndoo
    Registriert seit
    11.02.2010.
    Beiträge
    108

    Standard

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

  6. #6
    Contao-Fan Avatar von Silvano
    Registriert seit
    12.09.2010.
    Ort
    Zürich, Schweiz
    Beiträge
    326
    Partner-ID
    7631

    Standard

    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

  7. #7
    Contao-Nutzer Avatar von K4nndoo
    Registriert seit
    11.02.2010.
    Beiträge
    108

    Standard

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

  8. #8
    Contao-Urgestein Avatar von Thomas
    Registriert seit
    16.08.2009.
    Ort
    Visselhövede
    Beiträge
    1.947
    User beschenken
    Wunschliste

    Standard

    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
    Geändert von Thomas (25.10.2010 um 20:25 Uhr)
    Gruß Thomas
    "Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du." Mahatma Gandhi

  9. #9
    Contao-Nutzer Avatar von K4nndoo
    Registriert seit
    11.02.2010.
    Beiträge
    108

    Standard

    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.

  10. #10
    He........
    Gast

    Standard

    Zitat Zitat von xchs Beitrag anzeigen
    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

  11. #11
    Contao-Nutzer Avatar von K4nndoo
    Registriert seit
    11.02.2010.
    Beiträge
    108

    Standard

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

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

  12. #12
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.583
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von K4nndoo Beitrag anzeigen
    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.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  13. #13
    He........
    Gast

    Standard

    Zitat Zitat von xchs Beitrag anzeigen
    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 Zitat von xchs Beitrag anzeigen
    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)

  14. #14
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Zitat Zitat von K4nndoo Beitrag anzeigen
    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.

  15. #15
    Contao-Nutzer Avatar von K4nndoo
    Registriert seit
    11.02.2010.
    Beiträge
    108

    Standard

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

  16. #16
    Contao-Nutzer
    Registriert seit
    27.11.2013.
    Beiträge
    39

    Beitrag

    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.

  17. #17
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.198
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  18. #18
    Contao-Nutzer
    Registriert seit
    27.11.2013.
    Beiträge
    39

    Standard

    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...

  19. #19
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Zitat Zitat von tab Beitrag anzeigen
    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ü

  20. #20
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.198
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  21. #21
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.527

    Standard

    kann man das DropDown irgendwo einsehen?

  22. #22
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Die Beispielsite aus meinem Contaobuch findest du unter der URL

    http://beispielsite.contaobuch.de/

    Da ist dann auch das Dropdown-Menü drin.

  23. #23
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.527

    Standard

    Hallo Peter ,

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

  24. #24
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.527

    Standard

    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 :-)

  25. #25
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    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.

  26. #26
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.527

    Standard

    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.

  27. #27
    Contao-Urgestein
    Registriert seit
    06.07.2009.
    Beiträge
    1.527

    Standard

    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;
    }

  28. #28
    ben_cms
    Gast

    Standard Frage zum Buch

    @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

  29. #29
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Zitat Zitat von ben_cms Beitrag anzeigen
    @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.

  30. #30
    ben_cms
    Gast

    Standard

    Zitat Zitat von pmmueller Beitrag anzeigen
    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.

  31. #31
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    Zitat Zitat von ben_cms Beitrag anzeigen
    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
    Geändert von chriss136 (07.08.2018 um 17:41 Uhr)

  32. #32
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von chriss136 Beitrag anzeigen
    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  33. #33
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    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
    Geändert von xchs (08.08.2018 um 09:53 Uhr) Grund: Code-Tags

  34. #34
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.972

    Standard

    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.
    Geändert von fiedsch (08.08.2018 um 06:51 Uhr)
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  35. #35
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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?
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  36. #36
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    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.

  37. #37
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.583
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  38. #38
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    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

  39. #39
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.632
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  40. #40
    Contao-Nutzer
    Registriert seit
    07.09.2013.
    Beiträge
    84

    Standard

    Zitat Zitat von xchs Beitrag anzeigen
    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 2 (Registrierte Benutzer: 0, Gäste: 2)

Ähnliche Themen

  1. News und Events filtern in Form eines Select-Menüs
    Von dw_1985 im Forum Nachrichten/Events/FAQ
    Antworten: 8
    Letzter Beitrag: 06.06.2013, 19:58
  2. Menüs mit Grafiken (Hintergrundbildern) erstellen
    Von planepix im Forum Fertige Tutorials
    Antworten: 23
    Letzter Beitrag: 26.06.2012, 17:39
  3. Eigenes Navigations Modul ansprechen
    Von Dora im Forum Sonstiges zu Contao
    Antworten: 27
    Letzter Beitrag: 13.07.2010, 20:08
  4. Navigations-Modul mit CSS ansteuern
    Von Koerschgen im Forum Layout / Templates / Holy Grail
    Antworten: 5
    Letzter Beitrag: 17.01.2010, 23:27
  5. Eigenes Navigations-Modul
    Von matths im Forum Entwickler-Fragen
    Antworten: 3
    Letzter Beitrag: 23.12.2009, 08:11

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •