php 从菜单中弹出搜索框

Posted 2021-05-04

/* ## Primary navigation icons
--------------------------------------------- */

.primary-nav-icons {
  //padding-top: 7px;
  vertical-align: middle;

  div {
    display: inline-block;
    margin-left: 30px;
    margin-right: 30px;
  }

  .search-toggle {
    float: left;
    //padding-top: 7px;

    &:hover {
      color: $yellow;
      cursor: pointer;
    }
  }
}

//
// Primary nav search
////////////////////////

.nav-search {
  display: none;

  .wrap {
    position: relative;
  }

  .widget_search {
    background-color: $yellow;
    padding: 15px 25px 20px;
    //position: absolute;
    //right: 272px;
    //z-index: 99;

    z-index: 99;
    width: 250px;
    margin-right: 267px;
    float: right;
    position: relative;

    &:before {
      border-bottom: 19px solid $yellow;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      top: -18px;
      content: "";
      position: absolute;
      left: 45%;
      width: 0;
      height: 0;
    }
  }

  input[type="search"] {
    border: none;
    @include rem( font-size, 13px );
    padding: 6px 10px;
    width: 200px;
  }
}

// Add search bar show/hide functionality for main menu
	$('.search-toggle').click( function() {
        $(".nav-search").slideToggle('slow', function(){
            $(".search-toggle").toggleClass('active');
        });
    });

add_filter( 'wp_nav_menu_items', __NAMESPACE__ . '\add_navigation_items', 10, 2 );
/**
 * Add extra menu item for search
 *
 * @since 1.0.0
 *
 * @param $menu
 * @param $args
 *
 * @return string
 */
function add_navigation_items( $menu,  $args ){

	// make sure we are in the primary menu
	if ( 'primary' == $args->theme_location ) {

		$menu .= '</ul><ul class="primary-nav-icons">';
    $menu .= '<div class="search-toggle"><i class="fa fa-search"></i></div>';

		return $menu;
	}
}

add_action ( 'widgets_init', __NAMESPACE__ . '\register_menu_widgets', 10 );
/**
 * Register menu widget areas
 *
 * @since 1.0.0
 *
 * @return void
 */
function register_menu_widgets() {

	genesis_register_sidebar( array(
		'id' => 'nav-search',
		'name' => __( 'Navigation Search', CHILD_TEXT_DOMAIN ),
		'description' => __( 'This appears when you click the Search icon in the menu', CHILD_TEXT_DOMAIN ),
	) );

}

add_action ( 'genesis_after_header', __NAMESPACE__ . '\position_menu_widgets', 12 );
/**
 * Position widget area that holds the menu's search box
 *
 * @since 1.0.0
 *
 * @return void
 */
function position_menu_widgets ()  {

	genesis_widget_area( 'nav-search', array(
		'before' => '<div class="nav-search"><div class="wrap">',
		'after'  => '</div></div>',
	) );

}