Question

我正在尝试使用扩展到某些链接的搜索栏。一旦您点击我已经拥有的放大玻璃的图像并在“登录”链接上展开，它就会扩展。 它不需要工作！这只是为了表演。

要获得更多愿景，您可以访问我的网页here，看看我对放大镜和登录的意义

要了解我想要的更多信息，请访问here。这正是我想要的各种方式......更适合我的网站。当我下载这些文件时，我感到困惑，因为它有很多我不需要的元素，并找出哪些我不需要的东西有点令人困惑。如果有人知道如何解构它，那将是完美的。

我的导航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

您不必使用插件来实现此功能只需几行jquery

$("#search-icon").click(function(){
    $("#search-field").animate({width: "500px"}, 500).show();
});

看到这个小提琴http://jsfiddle.net/N8q2J/

编辑：所以这是你的文件应该是什么样子要添加搜索栏的html文件

$（文件）。就绪（函数（）{ $（ “＃搜索图标”）。点击（函数（）{ $（“＃search-field”）。animate（{width：“500px”}，500）.show（）; }）; }）;
在您希望显示搜索栏的正文中

和css文件添加规则

.search-icon{
    width: 30px;
    height: 30px;
    float: left;
}
.search-field{
    height: 20px;
    float: left;
    width: 2px;
}
.hidden{
    display: none;
}
.expand{
    width: 300px;
}

Answer 2

嗯，非常简单

在文本框周围放置一个包装器。

<div class="textwrapper" style="position:absolute;top:100px;left:300px;width:50px;">
<input type="text" style="width:100%;" />
</div>

请注意，包装器具有绝对位置，因此您可以将其放在搜索栏旁边。

最初，将其宽度设为0

点击“搜索栏”即可为其设置动画，如:(打开）

$('.textwrapper').animate({width: 50, marginLeft: 250}, {duration: 1000});

并关闭它，你可以

$('.textwrapper').animate({width: 50, marginLeft: 300}, {duration: 1000});

这可能效果不佳，但可以指导您正确的方向。

在特定链接上展开搜索栏

2 个答案: