在图标点击问题上展开搜索输入 [英] Expand search input on icon click issue

问题描述

我试图在我点击我的搜索图标时输入扩展效果很好。我找到了一个教程，解释了我想要做的事情。我按照教程，但在我的例子中没有工作，我想我做的一切都是正确的。那些人已经尝试过这样做了吗？

能给一点帮助吗？我从示例中得到的唯一区别是我在菜单中输入如下：

I´m trying to when I click in my search icon the input expands with nice effect. I found a tutorial that explains what I was trying to do. I follow the tutorial but in my example is not working, I guess I did everything correct. Anyone there already tried to do this?
Can give a little help? The only difference that I have from the example is that I have the input inside my menu like this:

<nav id="menu">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="Products.php">Products</a></li>
            <li><a href="Services.php">Services</a></li>
            <li><a href="About.php">About</a></li>
            <li><a href="Contacts.php">Contacts</a></li>
            <li style="float:right; list-style:none"</li>
               <div id="sb-search" class="sb-search">
                <form>
                  <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
                   <input class="sb-search-submit" type="submit" value="">
                   <span class="sb-icon-search"></span>
                </form>
              </div>
            </li>
         </ul>
    </nav>

我遵循的教程链接： http://tympanus.net/codrops/2013/06/26/ expand-search-bar-deconstructed /



我得到了什么： http://jsfiddle.net/ritz/knprc/1 /

The link for tutorial that I followed: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

What I´m getting: http://jsfiddle.net/ritz/knprc/1/

推荐答案

你使用的方式是错误的。首先从您提供的链接下载源代码。



您将看到许多文件夹，如 js 和 CSS 包含所需的JavaScript和CSS文件。

检查 index.html 页面，看看如何包含这些 js 和 CSS 文件。



更重要的是， UISearch 函数被调用为......（在 body 内）。 />


The way you are using is wrong. First of all download the Source Code from the link you have provided.

You will see many folders like js and CSS containing the required JavaScript and CSS files.
Check the source of index.html page and see how these js and CSS files are included.

More importantly, the UISearch function is called like...(inside body).

<script>
    new UISearch( document.getElementById( 'sb-search' ) );
</script>

所以，你应该按照相同的程序执行代码。

So, you should follow the same procedure to execute the code.

谢谢你的回答，我试着把他在我的代码中现在有效，但工作得非常糟糕你能在下面看到我做错了吗？

Thanks for your answer, I tried to put his in my code and now works but works very badly Can you see here below what I´m doing wrong?

<script src="modernizr.custom.js"></script>

        <script src="js/classie.js"></script>
        <script src="js/uisearch.js"></script>
        <script>
            new UISearch( document.getElementById( 'sb-search' ) );
        </script>

<nav id="menu">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="Products.php">Products</a></li>
            <li><a href="Services.php">Services</a></li>
            <li><a href="About.php">About</a></li>
            <li><a href="Contacts.php">Contacts</a></li>
            <li style="float:right; list-style:none"</li>
               <div id="sb-search" class="sb-search">
                <form>
                  <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
                   <input class="sb-search-submit" type="submit" value="">
                   <span class="sb-icon-search"></span>
                </form>
              </div>
            </li>
         </ul>
    </nav>

我的css菜单：

My css for menu:

#menu
{
    width:960px;
    height:auto;
    margin:0 auto 0 auto;
}

#menu ul
{
    list-style-type:none;
}

#menu ul li
{
    float:left;
    height:46px;
    line-height:46px;
    font-family:'bariol_regularregular';
    font-weight:300;

}

#menu ul li a
{
    text-decoration:none;
    color:#ccc;
    display:block;
    margin-right:5px;
    height:46px;
    line-height:46px;
    padding:0 5px 0 5px;
    font-size:20px;

}

这篇关于在图标点击问题上展开搜索输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！