搜索
搜索

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

debugcn 发表于 Dev
2
用户6738171

我正在尝试在我的导航栏中创建一个搜索表单。我想要在我的导航栏中有一个小放大镜符号，当你按下这个符号时，一个搜索表单会下拉（比如这个网站 - http://goodlife.fuelthemes.net）。我已将带有符号的搜索表单添加到我的主题中，但是我不知道如何添加下拉功能。有没有人有任何解决方案？提前致谢。

头文件

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

搜索表单

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

更新的搜索 form.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>

Chukwu Remijius

下拉搜索框

您可以通过两种方法实现此目的：

  1. Javascript方式
  2. 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>

编辑：进行此修改并查看输出

<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>我们设置为 display:none的标签中，因此图标也会随之消失。试试我作为编辑发布的例子，并找到一种方法来调整它以适应您的设计。

新编辑：将此添加到您的 css 样式 

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery向下滑动一个，向上滑动所有吗？

来自分类Dev

jQuery向上滑动两个元素并向下滑动一个元素内的一个元素

来自分类Dev

如何从一组列表中向下滑动一个列表并单击关闭其他列表？

来自分类Dev

如何创建向上/向下滑动的 UITableView？

来自分类Dev

需要jQuery菜单在第一个悬停时向下滑动，而在其他菜单上悬停仅显示其div，而无需向下滑动效果

来自分类Dev

通过将给定矢量向下滑动每一列来创建矩阵

来自分类Dev

开始在表单中输入时，jQuery向下滑动

来自分类Dev

jQuery向下滑动不向下滑动

来自分类Dev

iOS Block向下滑动

来自分类Dev

向下滑动表格的Javascript

来自分类Dev

多个div向下滑动

来自分类Dev

角度向下滑动模块

来自分类Dev

向下滑动和向上滑动

来自分类Dev

向下滑动和向上滑动

来自分类Dev

Android 向下滑动以向上滑动视图

来自分类Dev

创建一个向下箭头指针

来自分类Dev

创建一个向下箭头指针

来自分类Dev

向上滑动可将RecyclerView向上滑动，向下滑动可将Recyclerview向下滑动

来自分类Dev

隐藏搜索栏，直到用户将其向下滑动（适用于iOS 7）

来自分类Dev

向下滑动动画以显示错误

来自分类Dev

向下滑动前置表格行

来自分类Dev

如何向下滑动图像视图？

来自分类Dev

如何仅向下滑动当前元素

来自分类Dev

向下滑动以刷新材质设计

来自分类Dev

Android键盘向下滑动，留下空白

来自分类Dev

Android：如何使swipeRefreshLayout难以向下滑动

来自分类Dev

向下滑动时，CalendarView关闭

来自分类Dev

UITableView部分向下滑动动画

来自分类Dev

如何使元素从display：none向下滑动？

Related 相关文章

  1. 1

    jQuery向下滑动一个，向上滑动所有吗？

  2. 2

    jQuery向上滑动两个元素并向下滑动一个元素内的一个元素

  3. 3

    如何从一组列表中向下滑动一个列表并单击关闭其他列表？

  4. 4

    如何创建向上/向下滑动的 UITableView？

  5. 5

    需要jQuery菜单在第一个悬停时向下滑动，而在其他菜单上悬停仅显示其div，而无需向下滑动效果

  6. 6

    通过将给定矢量向下滑动每一列来创建矩阵

  7. 7

    开始在表单中输入时，jQuery向下滑动

  8. 8

    jQuery向下滑动不向下滑动

  9. 9

    iOS Block向下滑动

  10. 10

    向下滑动表格的Javascript

  11. 11

    多个div向下滑动

  12. 12

    角度向下滑动模块

  13. 13

    向下滑动和向上滑动

  14. 14

    向下滑动和向上滑动

  15. 15

    Android 向下滑动以向上滑动视图

  16. 16

    创建一个向下箭头指针

  17. 17

    创建一个向下箭头指针

  18. 18

    向上滑动可将RecyclerView向上滑动，向下滑动可将Recyclerview向下滑动

  19. 19

    隐藏搜索栏，直到用户将其向下滑动（适用于iOS 7）

  20. 20

    向下滑动动画以显示错误

  21. 21

    向下滑动前置表格行

  22. 22

    如何向下滑动图像视图？

  23. 23

    如何仅向下滑动当前元素

  24. 24

    向下滑动以刷新材质设计

  25. 25

    Android键盘向下滑动，留下空白

  26. 26

    Android：如何使swipeRefreshLayout难以向下滑动

  27. 27

    向下滑动时，CalendarView关闭

  28. 28

    UITableView部分向下滑动动画

  29. 29

    如何使元素从display：none向下滑动？

热门标签

归档