【发布时间】：2017-11-12 17:14:34
【问题描述】：
我正在尝试在我的导航栏中创建一个搜索表单。我想在我的导航栏中放一个小放大镜符号，当您按下该符号时，搜索表单将下拉（如本网站 - http://goodlife.fuelthemes.net）。我已将带有符号的搜索表单添加到我的主题中，但是我不知道如何添加下拉功能。有没有人有任何解决方案？提前致谢。
header.php
<?php
/**
* The header for our theme.
*
* @package Total
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="ht-page">
<header id="ht-masthead" class="ht-site-header">
<div class="ht-container ht-clearfix">
<div id="ht-site-branding">
<?php
if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) :
the_custom_logo();
else :
if ( is_front_page() ) : ?>
<h1 class="ht-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="ht-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif; ?>
<p class="ht-site-description"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'description' ); ?></a></p>
<?php endif; ?>
<div class="search-toggle">
<?php get_search_form(); ?>
</div>
</div><!-- .site-branding -->
<nav id="ht-site-navigation" class="ht-main-navigation">
<div class="toggle-bar"><span></span></div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container_class' => 'ht-menu ht-clearfix' ,
'menu_class' => 'ht-clearfix',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
) );
?>
</nav><!-- #ht-site-navigation -->
</div>
</header><!-- #ht-masthead -->
<div id="ht-content" class="ht-site-content ht-clearfix">searchform.php
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>css
#ht-masthead .search-form {
position: absolute;
right: 200px;
top: 200px;
}
#ht-masthead .search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
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;
}
#ht-masthead .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}更新的 css*
#ht-masthead .search-field {
background-color: transparent;
background-image: url(images/search-icon.png);
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: 230px;
}
#ht-masthead .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
}
#ht-masthead .search-form {
display:none;
position: absolute;
right: 200px;
top: 200px;
}
.search-toggle:hover #ht-masthead .search-form{
display:block;
}
.search-form
.search-submit {
display:none;
}更新的搜索表单.php*
<div class="search-field"></div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>【问题讨论】：
标签： javascript php html css search