JavaScript + Ajax 実践サンプル集 - イメージ付ドロップダウンメニュー (No Hack版）

イメージ付ドロップダウンメニュー (No Hack版）　《プログラマーがネットで副収入を得る方法とは》

説明コード分割コード関連書籍コメント投稿

このサンプルは、スタイルシートを利用してイメージ付のドロップダウンメニューを表示します。マウスをトップメニューに移動するとサブメニューがイメージ付で表示されます。このサンプルは、IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC),Google Chromeで動作します。 ※スタイルシートに著作権を明示することにより個人サイトで利用できるようです。詳細は、ここを参照してください。

このサンプルを編集して試してみる

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>An image dropdown menu no hacks</title>
 <link href="DhtmlAdvanced/imageDropdown/imagedropdown.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="nav">
	<li class="nav1 drop"><a class="main" href="#url">Home</a></li>
	<li class="nav2 drop"><a class="main" href="#url">Products</a>
		<ul>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic1.gif" alt="" />GamesLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus diam, tristique.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic2.gif" alt="" />FilingVestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic3.gif" alt="" />HeadphonesAenean consectetur mi vel ante congue congue. Integer at augue quam.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic4.gif" alt="" />GlobesAenean interdum interdum nisi, sit amet elementum metus tempus eget.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic5.gif" alt="" />FirefoxVivamus massa odio, posuere at bibendum id, accumsan vitae lorem.</a></li>
		</ul>
	</li>
	<li class="nav3 drop"><a class="main" href="#url">Services</a>
		<ul>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic6.gif" alt="" />D.I.Y.Vestibulum laoreet velit et urna pellentesque porta venenatis odio fermentum. </a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic7.gif" alt="" />RepairsPraesent vitae aliquam eros. Fusce nec nisi sagittis justo consequat tincidunt.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic8.gif" alt="" />PhotographySed scelerisque cursus aliquet. Cum sociis natoque penatibus et magnis.</a></li>
		</ul>
	</li>
	<li class="nav4 drop"><a class="main" href="#url">Special Offer</a>
		<ul>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic9.gif" alt="" />SecurityDonec eget est vehicula eros vestibulum posuere. Donec elementum nisi justo.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic10.gif" alt="" />RackingSed at sapien eros. Quisque ultrices risus eu lorem porttitor dignissim.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic11.gif" alt="" />Binocularsnteger sit amet molestie justo. Maecenas malesuada consequat porta.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic12.gif" alt="" />Fault findingInteger lacinia, felis ac mollis viverra, elit enim hendrerit ligula.</a></li>
			<li><a href="#url"><img src="DhtmlAdvanced/imageDropdown/pic14.gif" alt="" />SalesQuisque vulputate condimentum condimentum. Vestibulum elementum, arcu.</a>
			</li>
		</ul>
	</li>
	<li class="nav5 drop"><a class="main" href="#url">Privacy Policy</a></li>
</ul>

<a href="http://cssplay.co.uk" target="_blank" style="text-decoration: none;">original: cssplay.co.uk</a>

</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* default styling */
.nav, .nav ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.nav a
{
  text-decoration: none;
}
.nav
{
  font-family: arial, sans-serif;
  font-size: 12px;
  width: 547px;
  margin: 0 auto;
  text-align: left;
  height: 32px;
}

/* style the links */
/* needs a background for IE6 - can be a color or a transparent gif */
.nav a
{
  background: #f00;
  height: 32px;
}
.nav ul a
{
  height: auto;
}
/* style the <b> element so that is does not affect the size of the link */
.nav a i
{
  position: absolute;
  left: -9999px;
}

.nav a b
{
  display: block;
  border: 1px solid #1552ad;
  border-width: 1px 1px 0 1px;
  background: #fff;
  color: #444;
  font-size: 11px;
  line-height: 15px;
  font-weight: normal;
  padding: 10px;
  cursor: pointer;
}
.nav a b.last
{
  border-bottom-width: 1px;
}
.nav b img
{
  display: block;
  float: left;
  padding-right: 5px;
  border: 0;
}
.nav b span
{
  display: block;
  font-size: 14px;
  color: #069;
  padding-top: 5px;
  font-weight: bold;
}
/* WIDTH change this WITH CARE to suit your requirements */

/* FOR NAV1 */
.nav1, .nav1 a
{
  width: 70px;
}
.nav1 a
{
  background: url(home.gif) no-repeat left top;
}

/* FOR NAV2 */
.nav2, .nav2 a
{
  width: 102px;
}
.nav2 a
{
  margin-right: -101px;
  background: url(products.gif) no-repeat left top;
}
/* 1px less than the top level link width */
.nav2 ul li
{
  max-width: 102px;
}

/* FOR NAV3 */
.nav3, .nav3 a
{
  width: 95px;
}
.nav3 a
{
  margin-right: -94px;
  background: url(services.gif) no-repeat left top;
}
/* 1px less than the top level link width */
.nav3 ul li
{
  max-width: 95px;
}

/* FOR NAV3 */
.nav4, .nav4 a
{
  width: 143px;
}
.nav4 a
{
  margin-right: -142px;
  background: url(offers.gif) no-repeat left top;
}
/* 1px less than the top level link width */
.nav4 ul li
{
  max-width: 143px;
}

/* FOR NAV5 */
.nav5, .nav5 a
{
  width: 137px;
}
.nav5 a
{
  background: url(privacy.gif) no-repeat left top;
}

.nav li.drop ul li a
{
  width: 230px;
  margin-right: -200px;
}
/* ----------------------------------------------------------------------------	*/

/* DO NOT CHANGE ANYTHING BELOW */
.nav li
{
  float: left;
}
/* fixes several IE related bugs, and allows for clearing */
.nav ul
{
  float: left;
  position: relative;
  z-index: 20;
  left: 1px;
  top: -1px;
}
/* necessary for float drop and to stack the <ul>s */
.nav ul li
{
  clear: left;
}
/* must clear the floated list item inside sublist */
.nav a
{
  position: relative;
  display: block;
}
/* needs to have a position, to be above the rest */
.nav a.main
{
  float: left; /* necessary for float drop */
  margin-top: 10000px;
}
/* bring the top level links back into view */
.nav .drop
{
  margin-top: -10000px;
}
/* hide the sub links and their containers, opera has low upper limits */
.nav ul
{
  margin-bottom: -5000px;
}
/* avoid any interaction between the subs, can be any large size */
/* ----------------------------------------------------------------------------	*/

/* The bit that does ALL the work to bring the sub menus into view */
.nav a:hover, .nav a:focus, .nav a:active
{
  margin-right: 0;
  z-index: 10;
  outline: 0;
  background-position: left bottom;
}

.nav a:hover b, .nav a:focus b, .nav a:active b
{
  background: #f8f8f8;
}

.nav .nav2 ul a:hover, .nav .nav2 ul a:focus, .nav .nav2 ul a:active
{
  margin-right: -128px;
}
/* The margin-right value is the dropdown link width minus the top level link width */

.nav .nav3 ul a:hover, .nav .nav3 ul a:focus, .nav .nav3 ul a:active
{
  margin-right: -135px;
}
/* The margin-right value is the dropdown link width minus the top level link width */

.nav .nav4 ul a:hover, .nav .nav4 ul a:focus, .nav .nav4 ul a:active
{
  margin-right: -87px;
}
/* The margin-right value is the dropdown link width minus the top level link width */

/* OPERA fix */
.nav ul:hover
{
  clear: left;
}
/* to stop intermittent sub link :hover problems */

/* IE6 and 7 fix */
a:active
{
}

/* ----------------------------------------------------------------------------	*/

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/imageDropdown/imagedropdown.css" rel="stylesheet" type="text/css" />

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<ul class="nav">
	<li class="nav1 drop"><a class="main" href="#url"><i>Home</i></a></li>
	<li class="nav2 drop"><a class="main" href="#url"><i>Products</i></a>
		<ul>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic1.gif" alt="" /><span>Games</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus diam, tristique.</b></a></li>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic2.gif" alt="" /><span>Filing</span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia</b></a></li>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic3.gif" alt="" /><span>Headphones</span>Aenean consectetur mi vel ante congue congue. Integer at augue quam.</b></a></li>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic4.gif" alt="" /><span>Globes</span>Aenean interdum interdum nisi, sit amet elementum metus tempus eget.</b></a></li>
			<li><a href="#url"><b class="last"><img src="DhtmlAdvanced/imageDropdown/pic5.gif" alt="" /><span>Firefox</span>Vivamus massa odio, posuere at bibendum id, accumsan vitae lorem.</b></a></li>
		</ul>
	</li>
	<li class="nav3 drop"><a class="main" href="#url"><i>Services</i></a>
		<ul>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic6.gif" alt="" /><span>D.I.Y.</span>Vestibulum laoreet velit et urna pellentesque porta venenatis odio fermentum. </b></a></li>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic7.gif" alt="" /><span>Repairs</span>Praesent vitae aliquam eros. Fusce nec nisi sagittis justo consequat tincidunt.</b></a></li>
			<li><a href="#url"><b class="last"><img src="DhtmlAdvanced/imageDropdown/pic8.gif" alt="" /><span>Photography</span>Sed scelerisque cursus aliquet. Cum sociis natoque penatibus et magnis.</b></a></li>
		</ul>
	</li>
	<li class="nav4 drop"><a class="main" href="#url"><i>Special Offer</i></a>
		<ul>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic9.gif" alt="" /><span>Security</span>Donec eget est vehicula eros vestibulum posuere. Donec elementum nisi justo.</b></a></li>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic10.gif" alt="" /><span>Racking</span>Sed at sapien eros. Quisque ultrices risus eu lorem porttitor dignissim.</b></a></li>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic11.gif" alt="" /><span>Binoculars</span>nteger sit amet molestie justo. Maecenas malesuada consequat porta.</b></a></li>
			<li><a href="#url"><b><img src="DhtmlAdvanced/imageDropdown/pic12.gif" alt="" /><span>Fault finding</span>Integer lacinia, felis ac mollis viverra, elit enim hendrerit ligula.</b></a></li>
			<li><a href="#yrl"><b><img src="DhtmlAdvanced/imageDropdown/pic13.gif" alt="" /><span>General</span>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</b></a></li>
			<li><a href="#url"><b class="last"><img src="DhtmlAdvanced/imageDropdown/pic14.gif" alt="" /><span>Sales</span>Quisque vulputate condimentum condimentum. Vestibulum elementum, arcu.</b></a>
			</li>
		</ul>
	</li>
	<li class="nav5 drop"><a class="main" href="#url"><i>Privacy Policy</i></a></li>
</ul>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージ付ドロップダウンメニュー (No Hack版）　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージ付ドロップダウンメニュー (No Hack版） 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージ付ドロップダウンメニュー (No Hack版）　《プログラマーがネットで副収入を得る方法とは》