responsive sidebar

[heinetz]

Hallo Forum,

ich denke über folgende Aufgabenstellung nach:

Variante a) Auf meiner Website mit responsive Grid (Bootstrap) gibt es eine Sidebar mit Menü. Die Sidebar soll bei einer Viewportbreite > 768px ein und <= 768px ausgeblendet werden. Das würde ich mit einem CSS-Media-Query einfach realisieren können.

@media screen and (max-width: 767px) {
    #sidebar.toggled {
        width: 250px;
    }
    ...
}

Variante b) Auf meiner Website mit responsive Grid (Bootstrap) gibt es eine Sidebar mit Menü. Die Sidebar soll sich mittels Button ein- und ausblenden lassen. Das würde ich mit Javascript (bzw. jQuery) einfach realisieren können.

$('#button).on('click', function(){
	$('#sidebar).toggleClass( "toggled" );
}); 

Variante c) Auf meiner Website mit responsive Grid (Bootstrap) gibt es eine Sidebar mit Menü. Die Sidebar soll sich mittels Button ein- und ausblenden lassen UND AUCH bei einer Viewportbreite > 768px ein und <= 768px ausgeblendet werden. Auch das könnte ich mit jQuery lösen indem ich die Lösung von Variante b erweitere.

Aber ich bin etwas unsicher, ob es die einzige und ob es eine elegante Lösung ist. Denn man könnte Variante a ja theoretisch auch mit jQuery lösen, würde aber CSS-Media-Queries bevorzugen.

Was sagt ihr?

danke für's gespräch und

gruss, heinetz