• Welcome to www.Nischenseitenforum.de. Please login or sign up.
 
14. December, 2019, 16:13:36 pm

News:

Tipp: Registrierte Nutzer haben Vollzugriff auf das Forum und sehen gegenwärtig keine Werbeanzeigen!


CSS: Style des Sub-Elements in Abhängigkeit eines übergeordneten Elements

Started by McWinston, 03. December, 2016, 22:12:21 pm

Previous topic - Next topic

McWinston

Hallo,

ich hoffe jemand von euch kann mir zwei Fragen beantworten.
Ist es mit CSS generell möglich bei dem gegebenen Aufbau den Style der Klasse "slave" nur dann sichtbar zu machen, wenn das übergeordnete Element <div> von der Klasse "master" ist?

<div class="master">
<p style="text-align: justify;">
<i class="slave">(Button)</i>
</p>
</div>


2. Frage: Kann mir jemand bei der Lösung helfen? ;)
Hätte das ganze jetzt mit "display: none" gelöst. Gibts da noch eine bessere Variante?

Vielen Dank.

Alex.W.

Hey,
ich verstehe nicht ganz was du erreichen willst, hast du vielleicht ein konkretes Beispiel?

Zu 1. kenne ich so keine Möglichkeit, aber du kannst das auch mit PHP lösen z.B. mit if und echo style="".

Gruß, Alex. W.
Erfahrung ist etwas das man hat, wenn man es nicht mehr braucht

McWinston

Ok, dann muss ich wohl doch genauer werden.

Es geht um eine Sticky-Navigationsleiste (klar?).
Als Default gehört die Navigationsleiste der Klasse "affix-top" an. Sobald die Navigationsleiste "andockt" und mit scrollt, wechselt die klasse zu "affix".
In diesem Moment möchte ich folgendes umsetzen:

#navigation .menu-item:first-of-type { display: none; }

Alex.W.

Hast vielleicht n Link für mich?  :)

JQuery könnte auch eine Möglichkeit sein in dem Fall.

Für reines CSS klingt mir das zu kompliziert.

Gruß, Alex. W.
Erfahrung ist etwas das man hat, wenn man es nicht mehr braucht

McWinston

Da kannste im Grunde meine fatbikes-kaufen-Seite nehmen - will es also im affiliatetheme.io einbinden.

Vorbild ist in etwa diese Seite: handybus[punkt]de

Danke schonmal für deine Hilfe =)

Alex.W.

Die verwenden JQuery dafür, hier der Auszug:
<script>jQuery(document).ready(function() {
jQuery("#navigation").affix({
offset: {
top: jQuery("#navigation").offset().top,
}
});

jQuery("#navigation").on("affix.bs.affix", function () {
jQuery("#header").addClass("pb50");
});

jQuery("#navigation").on("affix-top.bs.affix", function () {
jQuery("#header").removeClass("pb50");
});

if ( jQuery("#navigation").hasClass("affix") ) {
jQuery("#header").addClass("pb50");
}
});</script>


Einfacher geht es mit Jquery direkt das entsprechende Element über die ID ein und auszublenden.

Musst du googeln nach Jquery CSS Manipulation oder Jquery CSS Style ändern etc.  ;)

Oder wenn du es genau so machen willst musst du in deiner CSS Datei das display:none; in eine Klasse / ID stecken OHNE sie deinem Element zuzuordnen, die Zuordnung machst du dann wie im o.g. Codeschnippsel bzw. entfernst sie wieder auch genau so und dann hast du deinen gewünschten Effekt

Nur mit CSS geht es nicht

Gruß, Alex. W.
Erfahrung ist etwas das man hat, wenn man es nicht mehr braucht

McWinston

Also diese JQuery-Funktion ist schon enthalten.
Sprich diese pb50-Klasse wird hinzugefügt und auch das Wechseln zwischen affix-top und affix funktioniert.

Habs jetzt quasi soweit, dass das Menü nahezu so aufgebaut ist, wie das von handybus.
Sprich: erstes Menu-Item ist von der Klasse "visible-affix menu-item[..]" und das zweite ist "hidden-affix menu-item[..]"

erreicht mit dem PHP-Code:
if ($item->ID == 2731) {
$class_names = "visible-affix ";
} else if ($item->ID == 80) {
$class_names = "hidden-affix ";
}

--> ist jetzt nicht universell geschrieben, ich weiss...bin aber auch nicht so der PHP-Könner^^

Wenn ich aber die Seite scrolle ändern sich aber die zugeordneten CSS-Anweisungen nicht - bei handybus[punkt]de funktioniert das jedoch.

Der CSS-Code ist auch nur kopiert:
@media (min-width: 768px)
#navigation.affix .visible-affix {
    width: 160px;
}

@media (min-width: 768px)
#navigation .visible-affix {
    width: 0;
    overflow: hidden;
    transition: width 0.3s;
}

@media (min-width: 768px)
#navigation.affix .hidden-affix {
    display: none;
}


siehe Fatbike-Seite: Das Icon-Feld soll quasi verschwinden, wenn Navigationsleiste nicht angepinnt ist.

Danke Dir =)

Alex.W.

Okay, dann mach eine neue Klasse mit display:none; in deiner CSS Datei und dann if ( jQuery("#navigation").hasClass("affix") ) {
jQuery("#menu-item-2731").addClass("deineneuedisplaynoneklasse");
}


und wiederum if #navigation has class "affix-top" jQuery("#header").removeClass("deineneuedisplaynoneklasse");


Dann solltest du den selben Effekt erzielen, ist aber nicht der Selbe Code wie bei Handybus.

Gruß, Alex. W.
Erfahrung ist etwas das man hat, wenn man es nicht mehr braucht

McWinston

So läuft jetzt! :D
Ist zwar optisch noch nicht komplett angepasst, aber die Grundfunktionalität ist da.

Danke Alex!

(btw: ein Script musste ich doch an keiner Stelle  ändern)

Alex.W.

Freut mich, dass du einen Weg gefunden hast!

Wie hastes hinbekommen? Css erstes Auswahl Item display:none; bei Klasse Affix?

Gruß, Alex. W.
Erfahrung ist etwas das man hat, wenn man es nicht mehr braucht

McWinston

diesen PHP-Code musste ich beibehalten (eine ID hat sich geändert)
if ($item->ID == 2732) {
$class_names = "visible-affix ";
} else if ($item->ID == 80) {
$class_names = "hidden-affix ";
}

--> ist immer noch nicht universell geschrieben, ich weiss...
Für die, die es interessiert: das kommt in die Datei walker.php des affiliatetheme.io
Pfad: /wp-content/themes/affiliatetheme/library/navigation
--> ja, das ist nicht im Child-Theme! Korrekt! Tests und Recherchen ergaben, dass Library-Funktionen nicht von Child-Themes überladen werden können

Und dazu diesen CSS-Code
@media (min-width: 767px)
{
#navigation .visible-affix { display: none; }
#navigation .visible-affix > a { padding: 10px 15px !important; }
#navigation .visible-affix img { max-height: 40px; }
#navigation.affix .visible-affix { display: block; }
}

@media (min-width: 767px)
{
#navigation.affix .hidden-affix { display: none; }
}


Scripte blieben default.

Mir missfällt natürlich, dass der Hover-Effekt bei dem eingeblendeten Button nicht stimmt.
Wahrscheinlich fehlt da irgendeine Klassen-Zuweisung... prüfe ich morgen mal.

Alex.W.

Hmm danke für deine Rückmeldung. Gar nicht so einfach, aber vielleicht kann es ja wer gebrauchen in der Zukunft und stößt hier drauf.

Oder ich habe mal das selbe Problem ...

Gruß, Alex. W.
Erfahrung ist etwas das man hat, wenn man es nicht mehr braucht