0


0

私はこんな感じのタブ付きメニューを持っています:

image:https://content.screencast.com/users/togakangaroo/folders/Jing/media/d3ee9142-15f8-44b6-a613-6842c9233465/2009-09-27_0508.png [マイタブメニュー]

そのためのHTMLは簡単です:

<%= Html.ActionLink(c => c.Index()、 "Home")%> <%= Html.ActionLink(c => c.About()、 "About")%> <%= Html.ActionLink (c => c.Archives()、 "Archives")%> <%= Html.ActionLink(c => c.Links()、 "リンク")%>

そしてJQuery:

$(function(){$( '。container')。corner(); $( 'ul#menu li')。corner( '30px top');});

そして各ページには以下のようなものがあります。

$(function(){$( '#menuHome')。addClass( 'current')})

背後にドロップシャドウを付けて「現在の」タブを示したいと思います。 私はこれをするだろうと思っています

  1. $( '。current')を使って影 'li’を作成します。

  2. CSSを使って影の色を設定し、jqueryで右上隅を丸める

  3. CSSの位置で移動します。トップ:5px。左:-5px。

私が抱えている問題は、影が要素の左上に現れることです。 Zインデックスを低く設定すると、何らかの理由で完全に消えてしまいます。 前のリスト項目の後ろに表示するにはどうすればよいですか。

あるいは、これを行うためのより良い方法は何ですか?

4 Answer


1


私はあなたがCSSボックスシャドーテクニックを使うことを考慮したいと思うかもしれないと思います。 MozillaとWebkitがそれを実装しており、ボックスシャドウはCSS 3仕様にあるので、いつか広く採用されるべきです。 Internet Explorer用のボックスシャドウフィルタもありますが、非常に良い外観の影が表示されるかどうかはわかりません。 ただし、この方法を使用した場合は、はるかに効率的です。 どのブラウザでも動作しませんが、ほとんどのユーザーに同様の効果があります。

これについての詳細へのリンクはここにあります:http://www.css3.info/preview/box-shadow/

これはIEフィルタに関するいくつかの情報です(非常に活用されていません):http://www.ssi-developer.net/css/visual-filters.shtml

画像全体を囲む影を探している場合は、ドロップシャドウの代わりにIEグローフィルタを使用することを検討してください。

これを試してみたい場合に役立つCSSのサンプルをいくつか紹介します。

div#someID {ボックスシャドウ:10px 10px 5px#888; -moz-box-shadow:#888 10ピクセル10ピクセル5ピクセル。 -webkit-box-shadow:#888 10ピクセル10ピクセル5ピクセル。フィルタ:ドロップシャドウ(カラー=#888、オフX = 5、オフY = −3、ポジティブ= 1)。 }


1


このスタイルを現在のタブ(影ではない)に適用します。

{位置:相対; zインデックス:2。 }

そしてこれは影に

{位置:相対; zインデックス:1。 }


0


私は `.corner();`がどのように機能するのかと思いますが、その背後にあるものと同じ色の1px divを何百も描画しています。 少なくとも、影は最初に `.corner()`される必要があります。 それでもうまくいかない場合は、実際は `.corner()`は単に背景色(白)を取ります。


0


私はこれをめちゃくちゃにして、次のものを追加することになりました(注:私はそれをよりよく見るためにアーカイブを最新に設定します)

CSS

.shadow {
背景色:#333。ボーダーカラー:#333。 zインデックス:-1。位置:絶対不透明度:0.7。フィルタ:アルファ(不透明度= 70)。 }

jQuery

$(function(){$( '#menuArchives')。addClass( 'current'); $( '#menu')。after( ''); var c = $( '。current'); var widthoffset = 50 ; var heightoffset = 20; var topoffset = -4; var leftoffset = -2;

$( '。shadow')。css({width:c。width()widthoffset 'px'、height:c.height()heightoffset 'px'、top:c.offset()。top topoffset 'px' :c.offset()。left leftoffset 'px'})。corner( '30px top'); )

あなたはそれを望むところに影を得るために変数を少しめちゃくちゃにすることができます:P

編集:それはIEでは動作していないようですが、それから他のいくつかの部分も同様にオフになっています…​ 私はそれをもう少し見てみましょうEdit2:わかりました、私はそれをIEで動作するようになりました、しかしコーナーがdivの束によって作られていて背景が一致しないことは今明らかです