0

我正在尝试获得一个覆盖某些链接的搜索栏。一旦您单击我已经拥有的放大镜图像并在“登录”链接上展开，它就会展开。它不必工作！这只是为了展示。

要获得更多远见，您可以访问我的网页，看看我所说的放大镜和登录。

要进一步了解我想要什么，请访问这里。这正是我想要的一切可能......只是更适合我的网站。当我下载文件时，我会感到困惑，因为其中有太多我不需要的元素，而找出我不需要的元素有点令人困惑。如果有人知道如何解构它，那将是完美的。

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

2 回答 2

0

嗯，很简单

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

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

这可能无法完美运行，但可以引导您朝着正确的方向前进。

于 2013-08-27T19:30:04.677 回答
0

您不必为此功能使用插件，只需几行 jquery

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

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

编辑：所以这是您的文件应该看起来像 html 文件的内容，您要在其中添加搜索栏

  • 在标题中

    $(document).ready(function(){ $("#search-icon").click(function(){ $("#search-field").animate({width: "500px"}, 500).节目（）; }）; }）;

  • 在您希望显示搜索栏的正文中

和css文件添加规则

.search-icon{
    width: 30px;
    height: 30px;
    float: left;
}
.search-field{
    height: 20px;
    float: left;
    width: 2px;
}
.hidden{
    display: none;
}
.expand{
    width: 300px;
}
于 2013-08-27T19:23:02.120 回答