2016-07-07 13 views
-2

Wie schreibe ich bedingte Anweisungen für CSS? Bedingte if/then-Abfragen in CSS

if {...] 
@when 

sowie @media

Ich habe alle Arten von Informationen von

gesehen.

Ich möchte Code für die sozialen (tertiären) Schaltflächen schreiben, um in die Mitte der Seite zu bewegen, wenn meine Website auf einem kleineren Bildschirm angezeigt wird. Ich habe momentan zwei Reihen von Menüschaltflächen für kleinere Bildschirme, wodurch die sozialen Schaltflächen verschwinden. Ich habe verschiedene Syntaxarten gelesen, bin mir aber nicht sicher, wie ich das formulieren soll.

Danke

+0

Wo ist Ihr Code? – dippas

+0

Bitte fügen Sie eine [mcve] von [was Sie versucht haben] (http://whathaveyoutried.com) und aktualisieren Sie Ihre Frage, um über das * spezifische * Problem zu sein, das Sie damit haben. – zzzzBov

+0

.titiary-Menü { Höhe: 40px; /* Fügen Sie dies hinzu, wenn Zeilen ausgelöst werden '; */ if (@boldgrid_framework_menu) { Hintergrund: schwarz; } } –

Antwort

0

Es gibt kein wenn sonst in CSS. Es gibt, wenn Sie Blogger verwenden. Wenn ich etwas in einem mobilen Bildschirm angezeigt werden soll, würde ich diesen Code-Block zu meinem CSS hinzufügen:

@media only screen and (min-width: 480px) and (max-width : 1600px) { 
.tertiary-menu { 
display:none; 
} 
} 

@media only screen and (max-width : 479px) { 
.tertiary-menu { 
display:block; 
} 
} 

Dies bedeutet, dass ein Bildschirm kleiner als 479px. Sie können and (min-width: <size>px;) hinzufügen, um einen minimalen und maximalen Bereich einzustellen, wenn das Element angezeigt werden soll.

Wenn Sie auf etwas klicken, um das Menü anzuzeigen, ich fürchte, Sie müssen Javascript dafür verwenden. Es gibt Möglichkeiten, um Menüs mit CSS anzuzeigen, wenn Sie die Suchleiste hier überprüfen können: eatingisliving.com. Es verwendet CSS, um die Suchleiste zu erweitern. Einige Elemente werden ebenfalls ausgeblendet, wenn die Größe des Bildschirms geändert wird. Um CSS zu verwenden, um andere Elemente anzuzeigen, können Sie etwas wie .secondary-menu:hover ~ .tertiary-menu { } oder .secondary-menu:focus ~ .tertiary-menu { } verwenden, aber es ist nur auf Geschwister- oder untergeordnete Elemente beschränkt. Nur das Elternelement oder ein Geschwister vor dem Zielelement kann es auslösen.

Wenn Sie Ihre Codes und weitere Details angeben könnten. Ich kann dir helfen, es zu reparieren.

+0

Danke dir Vinz. Ich probierte .Sekundärmenü: Focus ~ .Tetiary-Menü {Hintergrundfarbe: gelb; } zum Beispiel und es löst keine Änderung aus. –

+0

Damit es funktioniert, müssen sie direkt nebeneinander stehen: '

'. Oder wenn es innerhalb '
' ist, können Sie 'secondary-menu: focus> .tertiary-menu'. – Vinz

+0

Wenn Ihr 3. Button bereits auf einem größeren Bildschirm angezeigt wird und Sie ihn in die Mitte verschieben möchten, können Sie etwas wie @media only screen und (max-width: 479px) {.titiary-menu {position: absolute; oben: x%; links: x%; }} '. Es ist manchmal schwierig, die Position zu ändern. – Vinz