Ergebnis 1 bis 2 von 2

Thema: CSS Navigation in Typolight implementieren

  1. #1
    Contao-Nutzer
    Registriert seit
    30.06.2009.
    Beiträge
    43

    Standard CSS Navigation in Typolight implementieren

    Hallo Community,

    dieses Thema ist schon recht oft aufgekommen, leider komme ich nicht so richtig weiter. Das Design habe ich mit Hilfe der Template-Lösung umgesetzt, funktioniert auch einwandfrei (siehe Screencast).

    Das einzige Problem ist hierbei die Navigation, da es eine Javascript Navigation ist, horizontal-dropdown.

    Folgenden Stylesheet-Code möchte ich im Typolight umsetzen (die Menustrüktur soll sich ja aus der Seitenstruktur ergeben). Leider bin ich ja ein kompletter Neuling in Sachen Typolight:

    Code:
    ul.menu {list-style:none; margin:0; padding:0}
    ul.menu * {margin:0; padding:0}
    ul.menu a {display:block; color:#689fc9; text-decoration:none}
    ul.menu li {position:relative; height:auto; width:auto;  float:left; margin-right:2px}
    ul.menu ul {position:absolute; top:31px; left:auto; background:#000000; display:none; list-style:none}
    ul.menu ul li {position:relative; border:1px solid #526473; border-top:none; width:148px; margin:0}
    ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#526473; color:#363636}
    ul.menu ul li a:hover {background-color:#a3cb51}
    ul.menu ul ul {left:148px; top:-1px}
    ul.menu .menulink {border:1px solid #526473; padding:5px 7px 7px; font-weight:bold; background:url(bilder/header_neu.gif); width:134px}
    ul.menu .menulink:hover, ul.menu .menuhover {background:url(bilder/header_over_neu.gif)}
    ul.menu .sub {background:#6da3cd url(bilder/arrow.gif) 136px 8px no-repeat}
    ul.menu .topline {border-top:1px solid #526473}
    Außerdem müsste in der index-Datei noch ein Javascript Snippet eingebunden werden:

    Code:
    <script type="text/javascript">
    	var menu=new menu.dd("menu");
    	menu.init("menu","menuhover");
    </script>
    Weiterhin muss natürlich auch im Head-Bereich das Javascript geladen werden. Dieses Snippet und die Einbindung der *.js-Datei habe ich in meiner *.tpl Datei realisiert.

    Am Liebsten möchte ich die Navigation über das vorhandene NAVI-Template lösen. Hier bräuche ich Unterstützung.

    (die Komplette Seite könnt ihr euch hier anschauen...so soll es auch mal in Typolight aussehen - www.primax-online.de).
    Bitte korrigiert mich, falls etwas falsch sein sollte.

    Beste Grüße
    Erik

  2. #2
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Moin Erik,

    hier findest du eine Anleitung wie du so ein Menü in Typolight erstellen kannst, funktioniert sehr gut.

    http://de.contaowiki.org/TutorialsSuckerfish

    Viele Grüße

    Chris

Aktive Benutzer

Aktive Benutzer

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

Ähnliche Themen

  1. Addthis Button implementieren
    Von ahlaad im Forum Allgemeine Inhaltselemente
    Antworten: 2
    Letzter Beitrag: 20.08.2010, 12:35
  2. Navigation wie bei www.typolight.org
    Von mattes im Forum Layout / Templates / Holy Grail
    Antworten: 2
    Letzter Beitrag: 11.11.2009, 09:46
  3. Problem mit Image Headlines (+ Navigation & individuella Navigation)
    Von Reimi im Forum Layout / Templates / Holy Grail
    Antworten: 0
    Letzter Beitrag: 05.10.2009, 16:40
  4. Zusatzaufruf bei Slimbox implementieren
    Von Kahmoon im Forum Sonstiges zu Contao
    Antworten: 6
    Letzter Beitrag: 03.10.2009, 10:12
  5. Individuelle Navigation im Stil einer Quick-Navigation?
    Von klaschatx im Forum Layout / Templates / Holy Grail
    Antworten: 6
    Letzter Beitrag: 07.08.2009, 12:06

Lesezeichen

Lesezeichen

Berechtigungen

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