在适合我网页的链接上扩展搜索栏

Question

jQuery/Javascript 不是我最擅长的技能，所以我寻求帮助。我正在寻找的是，一旦您单击图像，就会出现一个搜索栏并延伸到图像的左侧。当再次单击图像时，它会缩回。我知道这可以用几行 Javascript 来完成，但我很难把它们放在一起。

如果你去我创建的小提琴here，你会看到我在导航栏中谈论的图像是一个放大镜。这就是我想要单击的内容，以便它向左延伸。我希望它扩展到涵盖社交媒体、电子邮件和登录按钮，但不要太远。

要进一步了解我想要什么，请访问here。这正是我想要的一切可能...只是更适合我的网站。

CSS底部的#tools-nav .search是搜索部分。

我的导航 CSS 是：

/* Navigation bar */
#navi {
height: 40px;
width: 961px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}

#navi a:hover {
background: white;
color: #1e416f;
}

#navi .logo {
margin: 0;
padding: 0;
float: left;
}

#navi .logo a {
float: left;
width: 56px;
height: 40px;
background: url(/imgs/navi/caul_white_nav.png) center no-repeat;
text-indent: -9999px;
}

#navi .logo a:hover {
background: url(/imgs/navi-hover/caul_blue_nav.png) center no-repeat;
background-color: white;
}

#primary-nav, #tools-nav {
list-style: none;
margin: 0;
padding: 0;
}

#primary-nav li, #primary-nav a, #tools-nav li, #tools-nav a {
float: left;
}

#primary-nav a, #tools-nav a {
color: white;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid white;
line-height: 40px;
}

#tools-nav a:hover {
color: #1e416f;
}

#primary-nav li:first-child a, #tools-nav li:first-child a {
border-left: 1px solid white;
}

#tools-nav {
float: right;
}

#tools-nav .icon a {
text-indent: -9999px;
}

#tools-nav .email a {
background: url(/imgs/navi/mail.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .email a:hover {
background: url(/imgs/navi-hover/hover_mail.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .twitter a {
background: url(/imgs/navi/twitter.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .twitter a:hover {
background: url(/imgs/navi-hover/hover-twitter.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .search a {
background: url(/imgs/navi/search.png) no-repeat scroll center center transparent;
width: 20px;
}

#tools-nav .search a:hover {
background: url(/imgs/navi-hover/hover_search.png) no-repeat scroll center center transparent;
width: 20px;
}

还有我的相关 HTML：

<!-- NAVIGATION -->
<div id="navi">
<h1 class="logo"><a href="#">CAUL/CBUA</a></h1>

<ul id="primary-nav">
    <li><a href="#">Directories</a></li>
    <li><a href="#">Committees</a></li>
    <li><a href="#">Resources</a></li>
    <li><a href="#">About</a></li>
</ul>

<ul id="tools-nav">
    <li class="login"><a href="#">Log In</a></li>
    <li class="email icon"><a href="#">Email</a></li>
    <li class="twitter icon"><a href="#">Twitter</a></li>
    <li class="search icon"><a href="#">Search</a></li>
</ul>
</div>

Answer 1

我不想弄乱您的代码，因为显示结果太复杂了。这是一个 jsfiddle 实现的任务http://jsfiddle.net/krasimir/tELy5/1/

这是在您的 jsfiddle 中实现的解决方案 http://jsfiddle.net/krasimir/7R77j/8/

这个想法是有两个类并在单击按钮后交换它们。第一个类隐藏搜索字段，第二个显示它。如果您设置了转换属性，那么输入是动画的。

HTML

<nav>
    <a href="#">T</a>
    <a href="#">F</a>
    <a href="#">L</a>
    <a href="#" id="search">S</a>
</nav>
<input type="text" id="search-field" class="search-field search-field-hidden" />

JS

var searchButton = document.getElementById("search"),
    searchField = document.getElementById("search-field");

searchButton.addEventListener("click", function() {
    if(searchField.className.indexOf("search-field-shown") > 0) {
        searchField.className = "search-field search-field-hidden";
        searchField.blur();
    } else {
        searchField.className = "search-field search-field-shown";
        searchField.focus();
    }        
});

CSS

nav:after {
    content: "";
    clear: both;
    display: block;
}
a {
    display: block;
    float: left;
    width: 20px;
    padding: 4px;
    text-decoration: none;
    background: #999;
    color: #FFF;
    margin: 0 1px 0 0;
    text-align: center;
}
a:hover{
    background: #000;
}
.search-field {
    border: solid 2px #999;
    position: absolute;
    top: 8px;
    display: block;
    height: 23px;
    width: 86px;
    transition: all 200ms;
    -webkit-transition: all 200ms;
}
.search-field-shown {
    left: 6px;
    width: 86px;
}
.search-field-hidden {
    left: 90px;
    width: 0px;
}

Answer 2

我使用 CSS3 transition 来实现您正在寻找的动画。 jQuery 还用于在搜索 <input> 时切换活动类：

HTML：

<li class="search icon">
    <a href="#">Search</a>
    <input type="text" />
</li>

CSS：

#tools-nav li { position: relative; }

li.search input {
    outline: 0;
    border: 0;
    display: block;
    padding: 0;
    height: 40px;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li.search input.active {
    border: 1px solid gray;
    padding: 0 5px;
    width: 151px;
    left: -151px;
}

JavaScript：

jQuery(function($) {
    $('li.search').find('a').on('click', function(e) {
        e.preventDefault();
        $(this).next('input').toggleClass('active');
    });
});

这里是Edited Fiddle。

更新

由于旧的网络浏览器不支持 CSS3 transition 属性，您可能需要考虑使用 jQuery .animate() 方法来实现动画。

在这种情况下，我们不需要在 .active 类上声明 CSS 样式。

这里是Working Fiddle。