0

jQuery/Javascript は私の最強のスキルではないので、助けを求めています。私が探しているのは、画像をクリックすると、検索バーが出てきて画像の左側に伸びることです。画像をもう一度クリックすると、画像が収縮します。数行の Javascript で実行できることはわかっていますが、すべてをまとめるのに苦労しています。

ここで作成したフィドルに移動すると、ナビゲーション バーで話している画像が拡大鏡であることがわかります。これは、左に拡張するためにクリックしたいものです。ソーシャル メディア、電子メール、ログイン ボタンをカバーするように拡張したいと考えていますが、それ以上ではありません。

私が望む正確なビジョンをさらに詳しく知りたい場合は、こちらをご覧ください。これはまさに私が可能な限りあらゆる方法で望んでいるものです...私のウェブサイトにより適しています.

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>
4

2 に答える 2

1

CSS3 を使用transitionして、探しているアニメーションを実装しました。<input>また、jQuery を使用して、検索時にアクティブなクラスを切り替えます。

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

これが編集された Fiddleです。

アップデート

古い W​​eb ブラウザーは CSS3transitionプロパティをサポートしていないため、jQuery.animate()メソッドを使用してアニメーションを実装することを検討することをお勧めします。

.activeこの場合、クラスで CSS スタイルを宣言する必要はありません。

これがWorking Fiddleです。

于 2013-08-27T22:48:25.287 に答える