Question

我正在尝试在导航栏中创建搜索表单。我想在导航栏中放一个小放大镜符号，当你按下符号时，搜索表格就会下拉（就像这个网站 - 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>

Answer 1

您可以通过两种方法实现这一目标：

Javascript方式
CSS方式

CSS方式：
这是您的搜索容器样式

#ht-masthead .search-form {
position: absolute;
right: 200px;
top: 200px;
}

编辑：

#ht-masthead .search-form {
display:none;
position: absolute;
right: 200px;
top: 200px;
}

您应该像这样设置searchToggle的样式

.search-toggle:hover #ht-masthead .search-form{
display:block;
}

JavaScript方式：
假设您使用的是jquery，它可以通过您可以用来实现此目的的代码行轻松实现：

<script>
    $(".search-toggle").click(function(){
    // We have to change the display of your search conatiner
    $("#ht-masthead .search-form).fadeToggle();
    });
</script>

EDITED：进行此修改并查看输出

<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>

#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;
}

问题是你的图标正在显示图标并且它嵌套在我们设置为显示的<form>标签中：none，因此图标也会随之消失。试试我发布为编辑的示例，找到一种方法将其调整为您的设计。

新编辑：将其添加到您的CSS样式

  .search-field:hover #ht-masthead .search-form{
display:block;
  }

JavaScript方式：
对不起我坏了，我们忘了让搜索字段div可点击。如果您对jquery感到满意，可以轻松地向其添加click事件，只需执行以下操作：

<script>
    $(".search-field").click(function(){
    // We have to change the display of your search conatiner
    $("#ht-masthead .search-form).fadeToggle();
    });
</script>

....... 然后将锚链接添加到搜索字段div

<a href="#"><div class="search-field"></div>

创建一个向下滑动的搜索表单

1 个答案: