Monthly Archives: April 2017

Menü mit aufklappbarer Suche

Immer wieder benötigt: Ein Such-Icon am Ende der horizontalen Navigation, welches sich auf Klick öffnet/schliesst.

Bearbeitet werden 3 Dateien: functions.php, searchform.php (falls vorhanden, ansonsten neu anlegen) und style.css (oder das jeweilige Stylesheet).

functions.php

Fügt am Ende des Hauptmenüs einen zusätzlichen Menüpunkt mit der Suche ein.

function fb_add_search_box ( $items, $args ) {
       
       // only on primary menu (or your menu-name)
       if( 'main-nav' === $args -> theme_location )
             $items .= '';
       
       return $items;
 }
 add_filter( 'wp_nav_menu_items', 'fb_add_search_box', 10, 2 );

searchform.php

Angepasstes Suchfeld.

style.css

.menu-item-search .search-field {
	background-color: transparent;
	background-image: url(../images/lupe.svg);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

.menu-item-search .search-field:focus {
	background-color: #fff;
	border: 1px solid #32B561;
	cursor: text;
	outline: 0;
	width: 200px;
}
.search-form
.search-submit { 
display:none;
}

Zusammengestellt aus folgenden Quellen: