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

Question

jQuery/Javascript 不是我的强项，所以我需要一些帮助。我正在寻找的是，一旦您单击图像，就会出现一个搜索栏并延伸到图像的左侧。再次单击图像时，它会缩回。我知道这可以用几行 Javascript 来完成，但我很难将它们组合在一起。

如果你转到我创建的 fiddle 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;
}