Beiträge von fledi

    Guten Tag,

    hier der Code und eine Skizze, wie es sein soll.


    <style>

    #slide-in-open{

    cursor: pointer;

    }

    .line{

    display: block;

    position: absolute;

    height: 3px;

    width: 100%;

    background: #ad9262;

    border-radius: 9px;

    opacity: 1;

    -webkit-transition: .1s ease-in-out;

    -moz-transition: .1s ease-in-out;

    -o-transition: .1s ease-in-out;

    transition: .1s ease-in-out;

    }

    .line-2 {

    top: 10px;

    }

    .line-3 {

    top: 20px;

    }

    #slide-in-open.open .line-1 {

    top: 10px;

    -webkit-transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -o-transform: rotate(135deg);

    transform: rotate(135deg);

    }

    #slide-in-open.open .line-2 {

    display: none;

    }

    #slide-in-open.open .line-3 {

    top: 10px;

    -webkit-transform: rotate(-135deg);

    -moz-transform: rotate(-135deg);

    -o-transform: rotate(-135deg);

    transform: rotate(-135deg);

    }

    .slide-in-menu {

    left: 0 !important;

    opacity: 1 !important;

    }

    .slide-in-menu-container {

    -webkit-transition: all 0.5s ease !important;

    -moz-transition: all 0.5s ease !important;

    -o-transition: all 0.5s ease !important;

    -ms-transition: all 0.5s ease !important;

    transition: all 0.5s ease !important;

    }

    </style>


    <script>

    jQuery(function($){

    $('#slide-in-open').addClass('open');

    $('.slide-in-menu-container').addClass('slide-in-menu');

    $('#slide-in-open').click(function(){

    $(this).toggleClass('open');

    $('.slide-in-menu-container').toggleClass('slide-in-menu');

    });

    });

    </script>

    Vielen Dank für Deine Antwort.

    Das ist das Menü, ich habe es in einem Tutorial gebaut.

    Es ist also kein richtiges .burger Menü. Es sieht nur so aus, die drei Striche sind animiert und werden zum Kreuz, wenn es offen ist.

    Auf kleineren Seiten soll es geladen werden, daß die drei Striche parallel sind. In dem Container ist dann die eigentliche Navigation.


    <style>

    #slide-in-open{

    cursor: pointer;

    }


    .line{

    display: block;

    position: absolute;

    height: 3px;

    width: 100%;

    background: #ad9262;

    border-radius: 9px;

    opacity: 1;

    -webkit-transition: .1s ease-in-out;

    -moz-transition: .1s ease-in-out;

    -o-transition: .1s ease-in-out;

    transition: .1s ease-in-out;

    }


    .line-2 {

    top: 10px;

    }


    .line-3 {

    top: 20px;

    }


    #slide-in-open.open .line-1 {

    top: 10px;

    -webkit-transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -o-transform: rotate(135deg);

    transform: rotate(135deg);

    }


    #slide-in-open.open .line-2 {

    display: none;

    }


    #slide-in-open.open .line-3 {

    top: 10px;

    -webkit-transform: rotate(-135deg);

    -moz-transform: rotate(-135deg);

    -o-transform: rotate(-135deg);

    transform: rotate(-135deg);

    }


    .slide-in-menu {

    left: 0 !important;

    opacity: 1 !important;

    }


    .slide-in-menu-container {

    -webkit-transition: all 0.5s ease !important;

    -moz-transition: all 0.5s ease !important;

    -o-transition: all 0.5s ease !important;

    -ms-transition: all 0.5s ease !important;

    transition: all 0.5s ease !important;

    }


    </style>

    Ich möchte auf die Fensterbreite reagieren. Wenn sie schmaler ist als 768px, dann soll das Menü als Burger-Icon starten. Sonst offen.


    Das Menü offen:


    <script>

    jQuery(function($){

    $('#slide-in-open').addClass('open');

    $('.slide-in-menu-container').addClass('slide-in-menu');

    $('#slide-in-open').click(function(){

    $(this).toggleClass('open');

    $('.slide-in-menu-container').toggleClass('slide-in-menu');

    });

    });

    </script>


    Das Menü zu:


    <script>

    jQuery(function($){

    $('#slide-in-open').click(function(){

    $(this).toggleClass('open');

    $('.slide-in-menu-container').toggleClass('slide-in-menu');

    });

    });

    </script>

    Hallo,


    interessant, nun gab es keine Antwort. Lag es an der Frage, an dem Link, an meiner Lösungsidee ... ?
    Ich würde mich freuen, es zu erfahren.
    Diese Thematik ist jetzt gelöst. Ich brauche für dieses Anliegen keine Antwort mehr.

    Liebe Grüße * auf einen schönen Tag <3

    Guten Abend zusammen,


    ich habe in Word Press ein Bellows Accordion Menu. Hier der Link zur Seite: https://base.designcoaching.org

    Es soll ohne Pfeile funktionieren, die sollen raus. Das Auf- und Zuklappen was der Pfeil macht, soll das Wort daneben übernehmen.


    Ich habe untersucht und gefunden:


    <a href="#" class="bellows-target">

    <span class="bellows-target-title bellows-target-text">Therapien</span>

    <span class="bellows-subtoggle">

    <i class="bellows-subtoggle-icon-expand fa fa-caret-down"></i>

    <i class="bellows-subtoggle-icon-collapse fa fa-caret-up"></i>

    </span>

    </a>



    Wie kann das im css file funktionieren ?




    ( ich habe versucht, es umzuschreiben :


    <a href="#" class="bellows-target">

    <span class="bellows-target-title bellows-target-text">Therapien</span>

    <i class="bellows-target-title bellows-target-text-expand fa fa-caret-down"></i>

    <i class="bellows-target-title bellows-target-text-collapse fa fa-caret-up"></i>

    </span>

    </a>


    )

    ui, Antwort :)

    Ich nutze den Woocommerce Veranstaltungsmanager. Der kann mit dem Shortcode [event-list style='native' cat='ID' cat-filter='yes' ] alle Kategorien listen. Als Button, zum Wechsel on the fly. Sieht sehr schön aus, möchte ich nutzen. Was mache ich jetzt mit den Kategorien, die ich nicht zeigen möchte?


    Als Lösung möchte ich die für die Seite ungeeigneten Buttons ausblenden, da sie bei mir auf änderungen im Shortcode leider nicht reagieren.


    Wenn ich die Seite im Chrome Browser untersuche, sehe ich im html body class die Klasse, die die Kategorie Buttons enthält. Siehe unten.

    Ich möchte den Januar Button ausblenden. Wie muss ich nun diesen "Satzbau" ändern, daß er im css File funktioniert ?


    <div class="mep-event-cat-controls">

    <button type="button" class="mep-cat-control mixitup-control-active" data-filter="all">Alles</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-51">01 Januar</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-52">02 Februar</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-53">03 März</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-54">04 April</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-55">05 Mai</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-56">06 Juni</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-57">07 Juli</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-58">08 August</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-59">09 September</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-60">10 Oktober</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-61">11 November</button>

    <button type="button" class="mep-cat-control" data-filter=".abr5fba1f8a16415mage-62">12 Dezember</button>

    </div>


    freue mich auf Antwort.