Verwendung: Bereichsnavigation von Oneo in Tao verwenden

Sid's Avatar

Sid

19 Dec, 2018 08:55 AM

Produkt: Tao Contao
Contao-Version: 4.4.31

Hallo, ich habe sowohl das Tao- als auch das Oneo-Theme gekauft. (beide Lizenzen vorhanden)
Vom Oneo-Theme habe ich nun die beiden Templates:
rsce_oneo_area_nav.html5 und rsce_oneo_area_nav_config.php in den Tao-Template-Ordner verschoben,
sowie den dazugehörigen CSS-Code (.area-navigation) in meine Custom-CSS eingefügt.
* Leider wird mir das Menü wie im Bild zu sehen ist felerhaft dargestellt. * Die beiden Buttons Prev & Next leiteten mich beide wieder an den oberen Bereich der Seite zurück. * Der zur Zeit ausgewählte Menüpunkt bleibt nicht aktiv makiert. Was habe ich falsch gemacht/vergessen?
Wäre toll wenn mir hier jemand weiterhelfen kann.

  1. 1 Posted by Sid on 19 Dec, 2018 08:58 AM

    Sid's Avatar
  2. Support Staff 2 Posted by RockSolid Theme... on 19 Dec, 2018 12:16 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Der dazugehörige Skript-Block (// Anchor navigation active status) aus der Datei files/oneo/js/script.js muss ebenfalls übernommen werden.

    Die Listenpunkte lassen sich mit folgendem CSS-Code entfernen.

    .area-navigation ul {
        list-style: none;
    }
    
  3. 3 Posted by Sid on 19 Dec, 2018 02:34 PM

    Sid's Avatar

    Hallo und danke für die schnelle Antwort.
    Gehört ( // Smooth scrolling ) und ( // Anchor jumping on page load ) auch zu dem Menü?
    Hab alles in die .js eingetragen, aber leider ohne Erfolg.
    Der aktive Menüpunkt bleibt nach wie vor nicht makiert und die Prev/Next-Buttons funktionieren auch nicht richtig.
    Hier der Link zur Seite: [Link entfernt]

  4. Support Staff 4 Posted by RockSolid Theme... on 20 Dec, 2018 06:15 AM

    RockSolid Themes's Avatar

    Gehört ( // Smooth scrolling ) und ( // Anchor jumping on page load ) auch zu dem Menü?

    // Smooth scrolling hat den Effekt, dass sich die Seite animiert zu der Scrollposition bewegt anstatt direkt an die Position zu springen.

    // Anchor jumping on page load ist bereits in einer Form im Tao-Theme enthalten und sollte nicht aus Oneo übernommen werden.

    Hab alles in die .js eingetragen, aber leider ohne Erfolg.

    Die JavaScript-Datei enthält einen Syntax-Fehler, bitte entfernen Sie die Zeile 844 })(); (diese ist doppelt vorhanden).

  5. 5 Posted by Sid on 20 Dec, 2018 03:22 PM

    Sid's Avatar

    Hallo und danke für die schnelle Rückmeldung.
    Hab den Wald vor lauter Java Skript nicht gesehen.
    Danke das war's, perfekt, Jetzt läuft alles! ... Ihr seid spitze!
    Hättet ihr noch eine Idee, was ich am CSS ändern muss damit die Formatierung passt?
    (meinte nicht den list-style der ul sondern die verschobenen Prev/Next-Buttons)

    .area-navigation {
        z-index: 999;
        position: fixed;
        top: 0;
        right: 30px;
        right: calc(30px + var(--safe-area-right));
        height: 100%;
        display: table;
    }
    @media screen and (max-width: 1280px) {
        .area-navigation {
            right: 1.5625%;
            right: calc(1.5625% + var(--safe-area-right));
            margin-right: -12px;
        }
    }
    @media screen and (max-width: 900px) {
        .area-navigation {
            right: 2.08333%;
            right: calc(2.08333% + var(--safe-area-right));
        }
    }
    @media screen and (max-width: 599px) {
        .area-navigation {
            display: none;
        }
    }
    .area-navigation ul {
        display: table-cell;
        vertical-align: middle;
        padding: 0;
        width: 24px;
        list-style: none;
    }
    .area-navigation li {
        margin: 4px 0;
        text-align: center;
    }
    .area-navigation a {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: 0;
        padding: 4px;
        outline: none;
        color: #50adc8;
        text-decoration: none;
    }
    .area-navigation a:after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        /* border: 2px solid rgba(113, 124, 142, 0); */
        border-radius: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: rgb(119, 119, 119) 0px 0px 2px;
        background-clip: padding-box;
        
    }
    .area-navigation a:hover:after,
    .area-navigation a.active:after {
        background-color: rgb(119, 119, 119);
        box-shadow: rgba(255, 255, 255, 0.5) 0px 2px 0px -1px inset, rgba(0, 0, 0, 0.3) 0px -2px 0px -1px inset, rgb(85, 85, 85) 0px 0px 0px 1px;
    }
    .area-navigation a.prev,
    .area-navigation a.next {
        width: 24px;
        height: 24px;
        padding: 5px;
        border: 2px solid rgba(255, 255, 255, 0.8);
        border-radius: 100%;
        -webkit-transition: -webkit-transform 0.1s;
        -moz-transition: -moz-transform 0.1s;
        -o-transition: -o-transform 0.1s;
        transition: transform 0.1s;
    }
    @media screen and (max-width: 1280px) {
        .area-navigation a.prev,
        .area-navigation a.next {
            display: none;
        }
    }
    .area-navigation a.prev:after,
    .area-navigation a.next:after {
        font: 10px/1 "RockSolid Icons";
        content: "\e01a";
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        text-indent: 0;
        display: inline-block;
        position: relative;
        display: block;
    }
    .area-navigation a.prev:after,
    .area-navigation a.prev:hover:after,
    .area-navigation a.next:after,
    .area-navigation a.next:hover:after {
        color: rgb(119, 119, 119);
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: rgb(119, 119, 119) 0px 0px 2px;
        border: 4px solid rgba(255, 255, 255, 0.8);
    }
    .area-navigation a.prev:hover,
    .area-navigation a.next:hover {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
    .area-navigation a.prev.is-disabled,
    .area-navigation a.next.is-disabled {
        visibility: hidden;
        pointer-events: none;
    }
    .area-navigation a.prev > span,
    .area-navigation a.next > span {
        display: none;
    }
    .area-navigation a.next:after {
        content: "\e015";
    }
    .area-navigation a > span {
        position: absolute;
        top: 50%;
        right: 100%;
        max-width: 0;
        overflow: hidden;
        margin: -0.5em 0.5em 0 0;
        font-size: 0.93333em;
        line-height: 1;
        white-space: nowrap;
        -webkit-transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
        -moz-transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
        -o-transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
        transition: max-width 0.3s cubic-bezier(0, 1, 1, 1);
    }
    .area-navigation a:hover > span {
        max-width: 999px;
        -webkit-transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
        -moz-transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
        -o-transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
        transition: max-width 0.6s cubic-bezier(0.75, 0, 1, 1);
    }
    .area-navigation.-invert-controls a {
        color: white;
    }
    .area-navigation.-invert-controls a:after {
        border-color: rgba(255, 255, 255, 0);
        background-color: white;
    }
    .area-navigation.-invert-controls a:hover:after,
    .area-navigation.-invert-controls a.active:after {
        border-color: white;
        background-color: rgba(255, 255, 255, 0.25);
    }
    .area-navigation.-invert-controls a.prev:hover,
    .area-navigation.-invert-controls a.prev.active,
    .area-navigation.-invert-controls a.next:hover,
    .area-navigation.-invert-controls a.next.active {
        color: white;
    }
    .area-navigation.-invert-controls a.prev:after,
    .area-navigation.-invert-controls a.prev:hover:after,
    .area-navigation.-invert-controls a.next:after,
    .area-navigation.-invert-controls a.next:hover:after {
        background-color: transparent;
    

    ... bis auf die Farben und den Abstand zur Main-Nav, wurde am Standard-Code nichts verändert.

  6. 6 Posted by Sid on 20 Dec, 2018 03:30 PM

    Sid's Avatar
  7. Support Staff 7 Posted by RockSolid Theme... on 21 Dec, 2018 07:18 AM

    RockSolid Themes's Avatar

    Bitte fügen Sie zusätzlich folgenden CSS-Code ein:

    .area-navigation a.prev,
    .area-navigation a.next {
        padding: 0;
        border: 0;
        width: 18px;
        height: 18px;
    }
    .area-navigation a.prev:after,
    .area-navigation a.next:after {
        margin: 0;
    }
    
  8. 8 Posted by Sid on 21 Dec, 2018 11:18 AM

    Sid's Avatar

    Danke, perfekt, hat funktioniert.

  9. 9 Posted by Sid on 21 Dec, 2018 11:20 AM

    Sid's Avatar

    Danke, perfekt, hat funktioniert

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac