Trick # 23 | Dieser Beitrag beinhaltet 509 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Die Sidebars auf Websites, welche mit dem Divi-Theme erstellt wurden können mit einem Ein- und Ausklapp-Button nachgerüstet werden. Egal, ob die Sidebar links oder rechts steht: bei Bedarf lässt sie sich aus- und wieder einblenden. Wir zeigen Ihnen, wie das geht.
Für den Trick benötigen wir zweierlei Code-Snippets.
Das erste beinhaltet das folgende jQuery-Script. Dieses fügen Sie unter Divi/Theme-Optionen/Integration/Code dem < head > Ihres Blogs hinzufügen ein.
<script>
jQuery(function($){
if($('#sidebar').length) {
if ($('body.et_right_sidebar').length) {
$('body').addClass('sidebar_collapsible right_sidebar_collapsible');
$('#main-content').prepend(
$('<span id="hide_sidebar" title="Toggle Sidebar"></span>').click(function(){
$('body').toggleClass('et_right_sidebar et_full_width_page');
$('#sidebar').toggle();
})
);
$('body').addClass('collapsible_sidebar');
} else if ($('body.et_left_sidebar').length) {
$('body').addClass('sidebar_collapsible left_sidebar_collapsible');
$('#main-content').prepend(
$('<span id="hide_sidebar" title="Toggle Sidebar"></span>').click(function(){
$('body').toggleClass('et_left_sidebar et_full_width_page');
$('#sidebar').toggle();
})
);
}
}
});
</script>Dann wechseln Sie in Ihr CSS-Stylesheet (via Design/Customizer/Zusätzliches CSS). Dort fügen Sie folgenden Code ein:
@media only screen and (min-width: 981px) {
/* Sidebar expand / collapse button */
#hide_sidebar {
z-index: 10000;
padding: 10px;
cursor: pointer;
}
.right_sidebar_collapsible #hide_sidebar {
right: 0;
}
.left_sidebar_collapsible #hide_sidebar {
left: 0;
}
.et_fixed_nav #hide_sidebar {
position: fixed;
}
.et_non_fixed_nav #hide_sidebar {
position: absolute;
}
#hide_sidebar:before {
font-family: 'ETModules';
font-size: 24px;
}
.et_right_sidebar #hide_sidebar:before,
.left_sidebar_collapsible.et_full_width_page #hide_sidebar:before {
content: '39';
}
.right_sidebar_collapsible.et_full_width_page #hide_sidebar:before,
.et_left_sidebar #hide_sidebar:before {
content: '38';
}
/* Ensure fullwidth formatting matches sidebar formatting */
.sidebar_collapsible.et_full_width_page .et_post_meta_wrapper:first-child {
padding-top: 58px !important;
}
}Der Button zum Öffnen und Schliessen der Sidebar wird gleich über der betreffenden Sidebar angezeigt. Der Open- und Close-Mechanismus wird nur auf Bildschirmen über 980px-Breite aktiviert
Werbung
Werbung
