Divi-Seitenleiste ein- und ausklappen

23. Januar 2021 | CSS-Stylesheet, Divi-Theme, Scripts |

Geschätzte Lesezeit für diesen Beitrag: ca. 4 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('db_sidebar_collapsible db_right_sidebar_collapsible');
			$('#main-content').prepend(
				$('<span id="db_hide_sidebar" title="Toggle Sidebar"></span>').click(function(){
					$('body').toggleClass('et_right_sidebar et_full_width_page');
					$('#sidebar').toggle();
				})
			);
			$('body').addClass('db_collapsible_sidebar');
		} else if ($('body.et_left_sidebar').length) { 
			$('body').addClass('db_sidebar_collapsible db_left_sidebar_collapsible');
			$('#main-content').prepend(
				$('<span id="db_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 */
	#db_hide_sidebar {
		z-index: 10000;
		padding: 10px;
		cursor: pointer;
	}
	.db_right_sidebar_collapsible #db_hide_sidebar {
		right: 0;
	}
	.db_left_sidebar_collapsible #db_hide_sidebar {
		left: 0;
	}
	.et_fixed_nav #db_hide_sidebar {	
		position: fixed; 
	}
	.et_non_fixed_nav #db_hide_sidebar {	
		position: absolute; 
	}
	#db_hide_sidebar:before {
		font-family: 'ETModules';
		font-size: 24px;
	}
	.et_right_sidebar #db_hide_sidebar:before,
	.db_left_sidebar_collapsible.et_full_width_page #db_hide_sidebar:before {
		content: '39';
	}
	.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar:before,
	.et_left_sidebar #db_hide_sidebar:before {
		content: '38';
	}

	/* Ensure fullwidth formatting matches sidebar formatting */
	.db_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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This