0

どういうわけかこの Web ページを見つけ、ナビゲーション バーに完全に唖然としました。www.webdesignerwall.com

「ホーム」、「概要」、または「ジョブ」メニューオプションの上にマウスを置くと、上の茶色のフィールドにすばらしいロールオーバー効果が表示されます。私はそれがとても好きで、同様のアイデアを持っていましたが、アマチュアであるため、それがどのような種類のプログラミングであるかはよくわかりません。それ自体は Ajax や JavaScript を使用していると言えますが、どなたかに説明していただくか、同様の例をいくつか共有していただければ幸いです。

ありがとうございました

4

3 に答える 3

5

これは CSS によって行われます。<span>すべての<a>リンク要素にエクストラを配置します。CSS<span>を使用すると、非表示になり、メニュー要素の上に正しく配置されます ( absolute)。リンクの 1 つがホバーされると、新しいスタイルが正しい<span>ものに適用され、表示されます。

HTML

<ul id="nav"> 
  <li id="nav-home"><a href="/>Home<span></span></a></li> 
  <li id="nav-about"><a href="/about/">About<span></span></a></li> 
  <li id="nav-jobs"><a href="/jobs/">Jobs<span></span></a></li> 
</ul>

CSS

#nav span {
 display: none;      /* hidden by default */
 position: absolute;
}

#nav a:hover span {  /* link:hover */
 display: block;     /* makes one of them visible */
}

#nav-home span {
 background: url(images/home-over.gif) no-repeat;
 width: 168px;   /* each has it's own image */
 height: 29px;   /* dimensions */
 top: -30px;     /* and coordinates */
 left: 35px;
}

#nav-about span {
 background: url(images/about-over.gif) no-repeat;
 width: 157px;
 height: 36px;
 top: -36px;
 left: 90px;
}
/* ... */
于 2010-11-01T14:31:30.567 に答える
0

この効果は、JavaScript を使用せずに CSS で実現することもできます。

CSS 画像のロールオーバー

于 2010-11-01T14:30:49.253 に答える
0

ただのCSSです。

各リンクにはid属性があり、それぞれに のナビゲーション バーのidを変更する独自の CSS ルールがあります。backgroundhover

于 2010-11-01T14:31:28.443 に答える