HTML/CSS

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.

1
2
3
4
5
6
7
8
9
function fb_add_search_box ( $items, $args ) {
 
       // only on primary menu (or your menu-name)
       if( 'main-nav' === $args -> theme_location )
             $items .= '<li class="menu-item menu-item-search">' . get_search_form( FALSE ) . '</li>';
 
       return $items;
 }
 add_filter( 'wp_nav_menu_items', 'fb_add_search_box', 10, 2 );

searchform.php

Angepasstes Suchfeld.

1
2
3
4
5
6
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
	<input type="submit" class="search-submit button" value="<?php echo esc_attr_x( 'Search', 'yourtheme' ) ?>" />
		<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Suchen...', 'yourtheme' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'yourtheme' ) ?>" />
	</label>
</form>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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: