jQueryのslideDown/slideUp関数を使用して、マウスオーバー時にリンクを表示するメニューを作成しています。メニューはメニュー タイトルを含む画像で、マウスを画像の上に置くと垂直方向に拡大し、リンクが表示されます。メニュー画像/リンクは、画像の配置に役立つように div に含まれています。
すべてのリンクを表示するメニュー画像を垂直方向に拡大することはできますが、下部のリンクにカーソルを合わせようとすると、jQuery が画像を時期尚早に折りたたんでしまいます。さらに奇妙なのは、メニューが画面の上部にあるときは正しく機能しますが、メニュー画像を背景画像の属する場所に配置すると完全に機能しなくなることです。
ホバー領域は画像とともに垂直方向に成長していないように見えますが、折りたたまれた画像の元の高さを維持しています。
以下は私のjQuery関数です：
$( document ).ready
(
function()
{
$( '.down-list' ).width( $( '.dropdown-menu' ).width() );
$( '.dropdown-menu' ).hover
(
function()
{
$( '.menu-first', this ).addClass( 'slide-down' );
$( '.down-list', this ).slideDown( 50 );
},
function()
{
obj = this;
$( '.down-list', this ).slideUp
(
50,
function()
{
$( '.menu-first', obj ).removeClass( 'slide-down' );
}
);
}
);
}
);
HTMLは次のとおりです。
<body>
<div id="container">
<img name="background" src="images/background.jpg" width="1600" height="1238" border="0" alt="Legend of Kung Fu - Branson, MO" usemap="#navMap" />
<map name="navMap">
<area shape="rect" coords="387,9,717,95" href="http://www.kungfubranson.com" alt="Home" />
<area shape="rect" coords="833,0,1008,100" href="http://foursquare.com/venue/6109987" target="_blank" alt="Four Square" />
<area shape="rect" coords="1045,45,1080,79" href="http://twitter.com/KungFuBranson" target="_blank" alt="Twitter" />
<area shape="rect" coords="1087,45,1122,78" href="http://www.facebook.com/kungfubranson" target="_blank" alt="Facebook" />
<area shape="rect" coords="1131,45,1167,79" href="http://www.youtube.com/kungfubranson" target="_blank" alt="YouTube" />
<area shape="circle" coords="1273,56,37" href="https://tickets.kungfubranson.com" target="_blank" alt="Buy Tickets Now!" />
</map>
<div id="menuLinks">
<div class="dropHolder">
<div class="dropdown-menu">
<div class="menu-first">
<div class="menu-first2">
Show <br />
Info
</div>
</div>
<ul class="down-list" style="display:none;">
<li style="padding-top: 24px;">
<a href="story.php">Story</a>
</li>
<li>
<a href="news.php">News</a>
</li>
<li>
<a href="reviews.php">Reviews</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>
</ul>
<img src="images/lanternBottom.png" alt="" />
</div>
</div>
</div>
<div id="content">
</div>
</div>
</body>
対応する CSS は次のとおりです。
/*-------------------------------*/
/* Contains every Division Layer */
/*-------------------------------*/
body
{
margin: 0px;
padding: 0px;
background-color: #FFF0E0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
/*-------------------------------------------------------------------*/
/* Primary Division Layer and the ONLY one with a Relative Position */
/* permitting entire page to resize according to browser window size */
/* */
/* Used on Home Page and contains all subsequent Division Layers */
/*-------------------------------------------------------------------*/
#container
{
position: relative;
margin: 0 auto 0 auto;
width: 1600px;
height: 1238px;
}
/*---------------------------------*/
/* Contains Menu Image Label Links */
/*---------------------------------*/
#menuLinks
{
position: absolute;
top: 200px;
left: 491px;
width: 582px;
height: 200px;
}
.dropHolder
{
width: 90px;
float: left;
height: 1px;
margin-left: 2px;
line-height: 1.2em;
color: #000;
font-variant: normal;
font-size: 13.5px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bolder;
}
.dropHolder html, .dropHolder div, .dropHolder span, .dropHolder applet, .dropHolder object, .dropHolder iframe, .dropHolder blockquote, .dropHolder pre,
.dropHolder a, .dropHolder abbr, .dropHolder acronym, .dropHolder address, .dropHolder big, .dropHolder cite, .dropHolder code,
.dropHolder del, .dropHolder dfn, .dropHolder em, .dropHolder font, .dropHolder img, .dropHolder ins, .dropHolder kbd, .dropHolder q, .dropHolder s, .dropHolder samp,
.dropHolder small, .dropHolder strike, .dropHolder strong, .dropHolder sub, .dropHolder sup, .dropHolder tt, .dropHolder var,
.dropHolder dl, .dropHolder dt, .dropHolder dd, .dropHolder ol, .dropHolder ul, .dropHolder li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
.dropHolder ol, .dropHolder ul
{
list-style: none;
}
.dropdown-menu
{
position: absolute;
width: 90px;
cursor: pointer;
z-index: 1000px;
}
.dropdown-menu a:link, .dropdown-menu a:visited
{
color: #000 !important;
display: block !important;
text-decoration: none !important;
margin: 0 !important;
width: 90px;
}
.dropdown-menu a:hover
{
color: #cb0202 !important;
text-decoration: none !important;
width: 90px;
}
.dropdown-menu .slide-down
{
background: url(../images/lanternTop.png) no-repeat;
width: 90px;
}
.menu-first
{
background: transparent url(../images/lanternTop.png) no-repeat;
width: 90px;
height: 38px;
text-align: center;
padding: 0px 0px 0px 0px;
vertical-align: bottom;
line-height: 14px;
}
.menu-first2
{
position: relative;
bottom: -23px;
z-index: 100;
}
.down-list
{
background: url(../images/lanternMiddle.png) repeat-y;
width: 90px;
margin-left: 0px;
z-index: 500;
font-size: 13px;
}
.down-list li
{
background: url(../images/lanternMiddle.png) repeat-y;
width: 90px;
height: 25px;
padding: 0px 0px 0px 0px;
text-align: center;
line-height: 24px;
vertical-align: bottom;
}
.down-list_OFF .lastLI_OFF
{
background: url(../images/lanternMiddle.png) repeat-y;
width: 88px;
height: 8px;
line-height: 12px;
vertical-align: bottom;
}
/*-----------------------*/
/* Contains Page Content */
/*-----------------------*/
#content
{
position: absolute;
top: 316px;
left: 413px;
width: 771px;
height: 825px;
text-align: justify;
overflow-x: hidden;
overflow-y: auto;
}
jquery-1.7.2.min.js を使用しています。
助けてくれてありがとう。
ブランドン