Blue Contao 3 Free Template

Hallo Community!!!

mal eine kleine Frage. Ist es möglich ohne sehr großen Aufwand die Navigation in dem Free Theme Blue Contao 3 (Link)

so zu erweitern das z.B. in dieser Demo unter "The Academy" - News noch ein Untermenue angezeigt wird ?

In etwas so

The Academy
- News
- - Montag
- - Dienstag
...
...
... usw

Falls es nicht so einfach realisierbar ist hab ich halt pech :)

Ich habe mir ModulNavigation im Wiki schon angeschaut komme damit aber nicht wirklich weiter :(


Danke schon mal im vorraus.

Gruß ATSM

Hallo!

das wird nicht funktionieren, weil das News Archiv ein eigenständiges Modul ist.
Das Navigationsmodul gibt nur die Seitenstruktur wieder.

Steffen

ja okay das ist klar.

es geht nicht um die "news" sondern einfach nur um die eigentliche Menüführung.
In meinem Fall sollte es in etwa so aussehen:

Home - Menü1 - Menü2 - ...
--Untermenü1
---unteruntermenü1
--untermenü2


so in etwa link

es sollen immer Artikel dahinter sein. Keine News etc.



Verständlicher ?

Hallo atsm,
ich weiß nicht ob das Menü dafür überhaupt geeignet ist. Du würdest ja gerne eine 3. Ebene haben (die dann nach rechts ausklappt). Da muss dann das CSS schon für geeignet sein. Dann ist es eigentlich einfach. In der Seitenstruktur einfach in der 3. Ebene Seiten anlegen. Im Navigationsmodul schauen, das es keinen Stoplevel gibt, der verhindert, das die 3. Ebene ausgegeben wird und gut ist. Falls das CSS nicht dafür gemacht ist, dann musst du das in dem Fall selber erweitern.

Viele Grüße

Hallo MacKP,

das hört sich schon mal gut an. Einein Stoplevel gibts nicht und wenn ich die Seite anlege wird sie nicht in der 3. Ebene angezeigt.
Heißt quasi im Umkehrschluss das es im CSS erweiter werden müsste. Und da ist auch mein Problem. Da hab ich leider keine Ahnung von. Hab zwar schon Templates gesucht in denen eine 3. Ebene verwendet wird das ich es dann hätte irgendwie kopieren können bin aber leider nicht fündig geworden.

Ist das ein großer aufwand dieses so zu erweitern ?

Wird dir denn im Quellcode die 3. Ebene angezeigt?
Das Template brauchst du normalerweise nicht erweitertn... Sondern nur das CSS im Theme. Das kannst du dir eigentlich auch auf deiner Beispielseite abgucken... oder ein Tutorial suchen.

Viele Grüße

Code:

---

.mod_navigation {
    width:100%;
    height:17em;
    left:12em;
    top:3.5em;
    position:absolute;
}


.mod_navigation ul {
    list-style-type:none;
}


.mod_navigation .level_1 ul {
    width:180px;
    position:absolute;
    margin:-1px 0 0;
    padding:0;
    left:-999em;
}


.mod_navigation li {
    float:left;
    padding-right:2em;
    line-height:1;
}


.mod_navigation li:hover .level_2 {
    left:auto;
}


.mod_navigation .level_2 li {
    float:none;
}


.mod_navigation a,
.mod_navigation li {
    font-size:16px;
    text-decoration:none;
}


.mod_navigation .level_1 a,
.mod_navigation .level_1 a:visited {
    display:block;
    padding-bottom:10px;
    color:#666;
}


.mod_navigation .level_1 a:hover {
    text-decoration:none;
    color:#17A3EC;
}


.mod_navigation .level_1 a:active,
.mod_navigation .level_1 a:focus,
.mod_navigation .level_1 span,
.mod_navigation .level_1 a.trail {
    display:block;
    padding-bottom:10px;
    background:url("files/blue_business/arrow.png") center bottom no-repeat;
    text-decoration:none;
    color:#17A3EC;
}


.mod_navigation .level_2 a,
.mod_navigation .level_2 a:visited,
.mod_navigation .level_2 li a:hover,
.mod_navigation .level_2 li a:active,
.mod_navigation .level_2 li a:focus,
.mod_navigation .level_2 span {
    background:none;
}


.mod_navigation .level_2 a,
.mod_navigation .level_2 a:visited {
    width:10em;
    display:block;
    padding:.6em;
    background-color:rgba(255,255,255,0.4);
    border-bottom:1px solid #fff;
    font-size:14px;
    color:#666;
}


.mod_navigation .level_2 .first a,
.mod_navigation .level_2 .first a:visited {
    border-top:1px solid rgba(255,255,255,0.1);
}


.mod_navigation .level_2 li a:hover,
.mod_navigation .level_2 li a:active,
.mod_navigation .level_2 li a:focus,
.mod_navigation .level_2 span {
    width:10em;
    display:block;
    padding:.6em;
    background-color:#fff;
    border-bottom:1px solid #fff;
    font-size:14px;
    text-decoration:none;
    color:#17A3EC;
}

---

Das kann ich eben nicht beantworten. Aber ich denke mal nicht.
Ist das hier der richtige Code ?

Da sieht man schon mal, das es kein level_3 gibt.
Ich meine allerdings den HTML Quellcode der Seite ;-)
Ansonsten kannst du auch mal nen Screenshot von deinem Navigations-Modul machen, damit wir die Einstellungen da sehen.

Viele Grüße

Das hier:

Anhang 11166

:eek:

Oder vom Backend?

Äh.. ne, ein Screenshot vom Backend Modul.. von den Einstellungen ;-)
Und vom Frontend den HTML Quellcode ^^

Viele Grüße

Ein screenshot von der main navigation ?

Hier der HTML Code vom FE

HTML-Code:

---

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Welcome to Atesi Intranet - Atesi Intranet</title>
<base href="http://192.168.10.98/">
<meta name="robots" content="index,follow">
<meta name="description" content="Welcome to Atesi Intranet">
<meta name="keywords" content="">
<meta name="generator" content="Contao Open Source CMS">
  <style>#right{width:240px}#container{padding-right:240px}</style>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="assets/css/06621f9787f9.css">
<script src="assets/js/4dfba72b54e7.js"></script>

<!--[if lt IE 9]><script src="assets/html5shiv/3.6.2/html5shiv.js"></script><![endif]-->
</head>
<body id="top" class="win firefox gecko fx21">

<div id="wrapper">

<header id="header">
<div class="inside">

<a title="AtesiLogo1" href="#"><img height="64" width="169" alt="Logo" src="files/blue_business/logo.jpg" class="logo" /></a>
<img src="files/blue_business/top-image2.png" class="top_image" alt="Blue Business" />
<p class="slogan">Atesi-Intranet</p>
<!-- indexer::stop -->
<nav class="mod_navigation block">

 
  <a href="index.php/#skipNavigation170" class="invisible">Navigation überspringen</a>

 
<ul class="level_1">
            <li class="active first"><span class="active first">Home</span></li>
                <li class="submenu sibling"><a href="index.php/allgemein.html" title="Allgemein" class="submenu sibling">Allgemein</a>
<ul class="level_2">
            <li class="first"><a href="index.php/faq.html" title="FAQ" class="first">FAQ</a></li>
                <li><a href="index.php/drucker.html" title="Drucker">Drucker</a></li>
                <li><a href="index.php/softwarekataster.html" title="Softwarekataster">Softwarekataster</a></li>
                <li><a href="index.php/computer-inventar.html" title="Computer Inventar">Computer Inventar</a></li>
                <li><a href="index.php/vorlagen.html" title="Vorlagen">Vorlagen</a></li>
                <li class="submenu"><a href="index.php/netzwerk-it.html" title="Netzwerk IT" class="submenu">Netzwerk IT</a>
<ul class="level_3">
            <li class="first"><a href="http://www.hennche.de/mittagstisch/scheldener-mittagstisch-.html" title="ExtLink (copy)" class="first" target="_blank">ExtLink (copy)</a></li>
                <li class="last"><a href="index.php/it2submenue.html" title="IT2Submenue" class="last">IT2Submenue</a></li>
      </ul>
</li>
                <li class="last"><a href="index.php/fernwartung.html" title="Fernwartung" class="last">Fernwartung</a></li>
      </ul>
</li>
                <li class="submenu sibling"><a href="index.php/Vertrieb.html" title="About the academy" class="submenu sibling" accesskey="2">Vertrieb</a>
<ul class="level_2">
            <li class="first"><a href="index.php/news.html" title="News and updates" class="first">News</a></li>
                <li><a href="index.php/calendar.html" title="Events and schedules">Calendar</a></li>
                <li><a href="index.php/impressions.html" title="Campus impressions">Impressions</a></li>
                <li class="last"><a href="index.php/teachers.html" title="Our teachers" class="last">Teachers</a></li>
      </ul>
</li>
                <li class="sibling"><a href="index.php/courses.html" title="Courses overview" class="sibling" accesskey="3">Projektierung</a></li>
                <li class="submenu sibling"><a href="index.php/services.html" title="Services and support" class="submenu sibling" accesskey="4">Fertigung</a>
<ul class="level_2">
            <li class="first"><a href="index.php/bilder.html" title="Bilder" class="first">Bilder</a></li>
                <li><a href="index.php/search.html" title="Search this website" rel="nofollow">Search</a></li>
                <li><a href="index.php/navigation.html" title="New navigation features">Navigation</a></li>
                <li class="last"><a href="index.php/login.html" title="Students log-in" class="last" rel="nofollow">Login</a></li>
      </ul>
</li>
                <li class="submenu sibling last"><a href="index.php/montageinbetriebnahme.html" title="Montage/Inbetriebnahme" class="submenu sibling last">Montage/Inbetriebnahme</a>
<ul class="level_2">
            <li class="first last"><a href="http://192.168.10.98/contao" title="Admin Login" class="first last" target="_blank">Admin Login</a></li>
      </ul>
</li>
      </ul>

  <a id="skipNavigation170" class="invisible">&nbsp;</a>

</nav>
<!-- indexer::continue -->
 
</div>
</header>

<div id="container">

<div id="main">
<div class="inside">

<!-- indexer::stop -->
<div class="mod_breadcrumb block">

 
  <ul>
                  <li class="first"><a href="index.php/" title="Atesi Intranet">Atesi Intranet</a></li>
                        <li class="active last">Welcome to Atesi Intranet</li>
            </ul>

</div>
<!-- indexer::continue -->

<div class="mod_article block" id="index">

      <!-- indexer::stop -->
    <div class="pdf_link">

              <a href="#" rel="nofollow" title="Diese Seite drucken" onclick="window.print();return false"><img src="assets/contao/images/print.gif" width="16" height="16" alt=""></a>
     
              <a href="index.php/?pdf=1" rel="nofollow" title="Artikel als PDF drucken"><img src="assets/contao/images/pdf.gif" width="16" height="16" alt=""></a>
     
     
     
     
    </div>
    <!-- indexer::continue -->
 
 
<div class="ce_text block">

      <h1>Atesi Intranet</h1>
 
      <p>Demnächst neu : ATESI INTRANET!!!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p> 
 
 
</div>

<div class="ce_text block">

 
      <p><img src="files/_Atesi/ATESI_Mudersbach_01.jpg" alt="" width="600" height="300"></p> 
 
 
</div>

 
</div>
 
</div>
 
</div>

<aside id="right">
<div class="inside">

<!-- indexer::stop -->
<div class="mod_login one_column tableless login block">

      <h1>User Login</h1>
 
  <form action="index.php/" id="tl_login" method="post">
    <div class="formbody">
            <input type="hidden" name="FORM_SUBMIT" value="tl_login">
      <input type="hidden" name="REQUEST_TOKEN" value="f89a8b1234e8d4ed7b07f824c3c57f88">
      <label for="username">Benutzername</label>
      <input type="text" name="username" id="username" class="text" maxlength="64" value=""><br>
      <label for="password">Passwort</label>
      <input type="password" name="password" id="password" class="text password" maxlength="64" value="">
              <div class="checkbox_container">
          <input type="checkbox" name="autologin" id="autologin" value="1" class="checkbox"> <label for="autologin">Angemeldet bleiben</label>
        </div>
            <div class="submit_container">
        <input type="submit" class="submit" value="Anmelden">
      </div>
    </div>
  </form>

</div>
<!-- indexer::continue -->

<!-- indexer::stop -->
<div class="mod_newslist block" id="breaking_news">

      <h1>Breaking news</h1>
 
 
<div class="layout_short block first even">

      <p class="info"><time datetime="2013-06-21T13:30:00+00:00">2013-06-21 13:30</time>  </p>
 
  <h2><a href="index.php/news/news-1.html" title="Den Artikel lesen: News 1">News 1</a></h2>

  <div class="teaser">
    <p>Neuigkeit 1 hier gibts jetzt News</p>  </div>

      <p class="more"><a href="index.php/news/news-1.html" title="Den Artikel lesen: News 1">Weiterlesen … <span class="invisible">News 1</span></a></p>
 
</div>

<div class="layout_short block odd">

      <p class="info"><time datetime="2013-06-20T09:30:00+00:00">2013-06-20 09:30</time>  </p>
 
  <h2><a href="index.php/news/neuer-mitarbeiter.html" title="Den Artikel lesen: Neuer Mitarbeiter">Neuer Mitarbeiter</a></h2>

  <div class="teaser">
    <p>Seit 1.1.2012 haben wir einen neuen Mitarbeiter Herzlich Wilkommen Max Muster</p>  </div>

      <p class="more"><a href="index.php/news/neuer-mitarbeiter.html" title="Den Artikel lesen: Neuer Mitarbeiter">Weiterlesen … <span class="invisible">Neuer Mitarbeiter</span></a></p>
 
</div>

<div class="layout_short block even">

      <p class="info"><time datetime="2010-02-04T09:30:00+00:00">2010-02-04 09:30</time>  </p>
 
  <h2><a href="index.php/news/james-wilson-returns.html" title="Den Artikel lesen: Associate Professor James Wilson returns">Associate Professor James Wilson returns</a></h2>

  <div class="teaser">
    <p>Jazz pianist James Wilson returns to Music Academy to give lessons in traditional and contemporary Jazz Piano.</p>  </div>

      <p class="more"><a href="index.php/news/james-wilson-returns.html" title="Den Artikel lesen: Associate Professor James Wilson returns">Weiterlesen … <span class="invisible">Associate Professor James Wilson returns</span></a></p>
 
</div>

<div class="layout_short block odd">

      <p class="info"><time datetime="2010-01-28T08:15:00+00:00">2010-01-28 08:15</time>  </p>
 
  <h2><a href="index.php/news/open-days.html" title="Den Artikel lesen: Open days">Open days</a></h2>

  <div class="teaser">
    Every Friday in February 2010 the gates of the Music Academy's campus will be thrown wide open to welcome everyone for a day filled with fun and interest.  </div>

      <p class="more"><a href="index.php/news/open-days.html" title="Den Artikel lesen: Open days">Weiterlesen … <span class="invisible">Open days</span></a></p>
 
</div>

<div class="layout_short block last even">

      <p class="info"><time datetime="2009-12-20T15:00:00+00:00">2009-12-20 15:00</time>  </p>
 
  <h2><a href="index.php/news/scholarship-program.html" title="Den Artikel lesen: Scholarship Program">Scholarship Program</a></h2>

  <div class="teaser">
    Music Academy debuts a new Scholarship Program that will cover all tuition and housing fees.  </div>

      <p class="more"><a href="index.php/news/scholarship-program.html" title="Den Artikel lesen: Scholarship Program">Weiterlesen … <span class="invisible">Scholarship Program</span></a></p>
 
</div>

 
</div>
<!-- indexer::continue -->
 
</div>
</aside>

</div>

<footer id="footer">
<div class="inside">

<div class="toggle_desktop">
<a href="index.php/?toggle_view=mobile" class="toggle_mobile" title="Zur mobilen Version wechseln">Mobile Version</a>
</div>
<!-- indexer::stop -->
<div class="mod_login one_column tableless login block">

      <h1>User Login</h1>
 
  <form action="index.php/" id="tl_login" method="post">
    <div class="formbody">
            <input type="hidden" name="FORM_SUBMIT" value="tl_login">
      <input type="hidden" name="REQUEST_TOKEN" value="f89a8b1234e8d4ed7b07f824c3c57f88">
      <label for="username">Benutzername</label>
      <input type="text" name="username" id="username" class="text" maxlength="64" value=""><br>
      <label for="password">Passwort</label>
      <input type="password" name="password" id="password" class="text password" maxlength="64" value="">
              <div class="checkbox_container">
          <input type="checkbox" name="autologin" id="autologin" value="1" class="checkbox"> <label for="autologin">Angemeldet bleiben</label>
        </div>
            <div class="submit_container">
        <input type="submit" class="submit" value="Anmelden">
      </div>
    </div>
  </form>

</div>
<!-- indexer::continue -->
 
</div>
</footer>

</div>

<script>
  (function($) {
    window.addEvent('domready', function() {
      new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
        opacity: false,
        alwaysHide: true,
        onActive: function(tog, el) {
          el.setProperty('aria-hidden', 'false');
          tog.addClass('active');
          tog.getNext('div').fade('in');
          tog.setProperty('aria-expanded', 'true');
          return false;
        },
        onBackground: function(tog, el) {
          el.setProperty('aria-hidden', 'true');
          tog.removeClass('active');
          tog.getNext('div').fade('out');
          tog.setProperty('aria-expanded', 'false');
          return false;
        }
      });
      $$('div.toggler').each(function(el) {
        el.setProperty('role', 'tab');
        el.setProperty('tabindex', 0);
        el.addEvents({
          'keypress': function(event) {
            if (event.code == 13) {
              this.fireEvent('click');
            }
          },
          'focus': function() {
            this.addClass('hover');
          },
          'blur': function() {
            this.removeClass('hover');
          },
          'mouseenter': function() {
            this.addClass('hover');
          },
          'mouseleave': function() {
            this.removeClass('hover');
          }
        });
      });
      $$('div.ce_accordion').each(function(el) {
        el.setProperty('role', 'tablist');
      });
      $$('div.accordion').each(function(el) {
        el.setProperty('role', 'tabpanel');
      });
    });
  })(document.id);
</script>

<script src="assets/mootools/mediabox/1.4.6/js/mediabox.js"></script>
<script>
  (function($) {
    window.addEvent('domready', function() {
      var links = $$('a').filter(function(el) {
        return el.getAttribute('data-lightbox') != null;
      });
      $$(links).mediabox({
        // Put custom options here
      }, function(el) {
              return [el.href, el.title, el.getAttribute('data-lightbox')];
      }, function(el) {
        var data = this.getAttribute('data-lightbox').split(' ');
        return (this == el) || (data[0] && el.getAttribute('data-lightbox').match(data[0]));
      });
      $('mbImage').addEvent('swipe', function(e) {
        (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
      });
    });
  })(document.id);
</script>

<script src="assets/js/c4bed97e4b10.js"></script>
<script>
  (function($) {
    window.addEvent('domready', function() {
      $$('select.tl_chosen').chosen();
    });
  })(document.id);
</script>

<script src="assets/swipe/2.0/js/swipe.min.js"></script>
<script>
  (function($) {
    window.addEvent('domready', function() {
      $$('.ce_sliderStart').each(function(cte) {
        var s = cte.getElement('.content-slider'),
            c = s.getAttribute('data-config').split(',');
        new Swipe(s, {
          // Put custom options here
          'auto': parseInt(c[0]),
          'speed': parseInt(c[1]),
          'startSlide': parseInt(c[2]),
          'continuous': parseInt(c[3]),
          'menu': cte.getElement('.slider-control')
        });
      });
    });
  })(document.id);
</script>

<script src="assets/mootools/slimbox/1.71/js/slimbox.js"></script>
<script>
  (function($) {
    window.addEvent('domready', function() {
      $$(document.links).filter(function(el) {
        return el.getAttribute('data-lightbox') != null;
      }).slimbox({
        // Put custom options here
      }, null, function(el) {
        var attr = this.getAttribute('data-lightbox');
        return (this == el) || (attr && el.getAttribute('data-lightbox').match(attr));
      });
      $('lbImage').addEvent('swipe', function(e) {
        (e.direction == 'left') ? $('lbNextLink').fireEvent('click') : $('lbPrevLink').fireEvent('click');
      });
    });
  })(document.id);
</script>

<script src="assets/mootools/tablesort/js/tablesort.js"></script>
<script>
  (function($) {
    window.addEvent('domready', function() {
      $$('.ce_table .sortable').each(function(table) {
        new TableSort(table, '.', ',');
      });
    });
  })(document.id);
</script>



<script src="assets/contao/js/scheduler.js?t=86400" id="cron"></script>

</body>
</html>

---

Anhang 11167
Anhang 11168

Hallo atsm,
ok, die 3. Ebene wird also nicht im Frontend ausgegeben so wie das aussieht.
Und du gibst mir immer noch das CSS. Ich brauche aber die Einstellungen im MODUL. Also im Theme gibt es Frontend-Module. Da muss ein Navigations-Modul drinn sein. Und da dürfte noch ne Einstellung nicht passen.

Viele Grüße

Das hier evtl:

Anhang 11173

??

Danke schon mal !!

Ja, genau. Nu haben wir alles zusammen.
Ich hab gerade auch noch mal geschaut. Du hast im HTML-Quellcode auch schon die 3. Ebene. Die hatte ich gerade eben übersehen.
Du wirst also 'nur' dein CSS ergänzen müssen.

Die Navigationsebenen werden bei dieser Art von Dropdown Menü aus dem Viewport geschoben. level 2 so wieder angezeigt:

Code:

---

.mod_navigation li:hover .level_2 {
    left:auto;
}

---

Im Grunde brauchst du da sowas in der Art für level_3

Könntest mal das versuchen:

Code:

---

.mod_navigation .level_2 li:hover .level_3 {
    left:auto;
}

---

Das dann eventuell noch anders positionieren und so.. dafür kannst du dir eigentlich ein beliebiges CSS Dorpdown Tutorial aus dem Internet raussuchen, wenn du mit CSS noch nicht so klar kommst ;-)

Viele Grüße

Super ...
das sieht schon mal fast gut aus :)

der zeigt mir jetzt die ebene3 an allerdings wird diese nach unten aufgeklappt :(

kann also nur noch eine kleinigkeit sein


gruß