JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
jQueryテンプレート42選!
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
ショーアップ型メニュー (No Hacks版)
説明
補足説明
コード
分割コード
関連書籍
コメント投稿
このサンプルは、イメージとスタイルシートを利用したショーアップ型のメニューを表示します。マウスをメニューに移動するとサブメニューがトップメニューの上に表示されます。 このサンプルは、 IE5.01, IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari (PC) and Google Chromeで動作します。Mac版は未検証ですが動作するはず・・・
このサンプルを編集して試してみる
このサンプルで利用しているスタイルシートとイメージは、
ここ
からダウンロードすることができます。 このサンプルを個人サイトで利用するときは、CSSに著作権を明示して著者のサイトにバックリンクを掲載する必要があります。
CSSを勉強するには、以下の本がお勧めです。
<!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>Showup </title> <link href="DhtmlAdvanced/showup/showup.css" rel="stylesheet" type="text/css" /> <style type="text/css"> p.info { float:right; margin: 10px; } </style> </head> <body> <ul class="nav"> <li class="pad2"></li> <li><a class="top-a" href="#x">menu1</a></li> <li><a class="top-a" href="#x">menu2</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu2.1</a></li> <li><a class="sub" href="#x">menu2.2</a></li> <li><a class="sub" href="#x">menu2.3</a></li> <li><a class="sub" href="#x">menu2.4</a></li> <li><a class="sub" href="#x">menu2.5</a></li> <li><a class="sub" href="#x">menu2.6</a></li> </ul> </div> </div> </li> <li><a class="top-a" href="#x">menu3</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu3.1</a></li> <li><a class="sub" href="#x">menu3.2</a></li> <li><a class="sub" href="#x">menu3.3</a></li> <li><a class="sub" href="#x">menu3.4</a></li> <li><a class="sub" href="#x">menu3.5</a></li> </ul> </div> </div> </li> <li><a class="top-a" href="#x">menu4</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu4.1</a></li> <li><a class="sub" href="#x">menu4.2</a></li> <li><a class="sub" href="#x">menu4.3</a></li> <li><a class="sub" href="#x">menu4.4</a></li> </ul> </div> </div> </li> <li class="right"><a class="top-a" href="#x">menu5</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu5.1</a></li> <li><a class="sub" href="#x">menu5.2</a></li> <li><a class="sub" href="#x">menu5.3</a></li> <li><a class="sub" href="#x">menu5.4</a></li> <li><a class="sub" href="#x">menu5.5</a></li> </ul> </div> </div> </li> <li class="right"><a class="top-a" href="#x">menu6</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu6.1</a></li> <li><a class="sub" href="#x">menu6.2</a></li> <li><a class="sub" href="#x">menu6.3</a></li> <li><a class="sub" href="#x">menu6.4</a></li> <li><a class="sub" href="#x">menu6.5</a></li> </ul> </div> </div> </li> </ul> <p class="info"> Source: <a href="http://cssplay.co.uk" target="_blank">cssplay.co.uk</a></p> <br style="clear: both; " /> </body> </html>
CSS部
HEAD部
BODY部
ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。
/* ================================================================ This copyright notice must be kept untouched in the stylesheet 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. =================================================================== */ a, a:visited, a:hover, a:active { } .nav, .nav ul { padding: 0; margin: 0; list-style: none; } .nav { margin: 0 auto; position: relative; width: 700px; height: 52px; } .nav div div { position: absolute; left: 0; height: 0; width: 700px; } .nav ul { position: absolute; left: 0; bottom: 0; } .nav li { float: left; margin-top: 26px; } .nav li.pad2 { position: absolute; left: 0; top: 0; width: 700px; height: 26px; background: url(back.gif) left bottom; z-index: 10; } .nav li li { margin-top: 0; } .nav a { display: block; position: relative; height: 26px; line-height: 26px; display: block; font-family: verdana, sans-serif; font-size: 11px; text-decoration: none; color: #fff; font-weight: bold; outline: 0; } .nav a.top-a { z-index: 10; min-width: 1px; padding: 0 15px; background: url(trans.gif); } * html .nav a.top-a { width: 1px; } .nav ul a { float: left; font-weight: normal; } .nav ul a.sub { padding: 0 15px; } .nav ul a.pad b { position: absolute; left: 0; height: 26px; display: block; width: 700px; cursor: default; background: url(back.gif) left top; } .nav li:hover > a { color: #cf6; } .nav a.top-a:hover, .nav a.top-a:active, .nav a.top-a:focus { margin-bottom: -26px; color: #cf6; } .nav ul a:hover, .nav ul a:active, .nav ul a:focus { padding-bottom: 26px; color: #cf6; }
ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。
<link href="DhtmlAdvanced/showup/showup.css" rel="stylesheet" type="text/css" />
ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。
<ul class="nav"> <li class="pad2"></li> <li><a class="top-a" href="#x">menu1</a></li> <li><a class="top-a" href="#x">menu2</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu2.1</a></li> <li><a class="sub" href="#x">menu2.2</a></li> <li><a class="sub" href="#x">menu2.3</a></li> <li><a class="sub" href="#x">menu2.4</a></li> <li><a class="sub" href="#x">menu2.5</a></li> <li><a class="sub" href="#x">menu2.6</a></li> </ul> </div> </div> </li> <li><a class="top-a" href="#x">menu3</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu3.1</a></li> <li><a class="sub" href="#x">menu3.2</a></li> <li><a class="sub" href="#x">menu3.3</a></li> <li><a class="sub" href="#x">menu3.4</a></li> <li><a class="sub" href="#x">menu3.5</a></li> </ul> </div> </div> </li> <li><a class="top-a" href="#x">menu4</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu4.1</a></li> <li><a class="sub" href="#x">menu4.2</a></li> <li><a class="sub" href="#x">menu4.3</a></li> <li><a class="sub" href="#x">menu4.4</a></li> </ul> </div> </div> </li> <li class="right"><a class="top-a" href="#x">menu5</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu5.1</a></li> <li><a class="sub" href="#x">menu5.2</a></li> <li><a class="sub" href="#x">menu5.3</a></li> <li><a class="sub" href="#x">menu5.4</a></li> <li><a class="sub" href="#x">menu5.5</a></li> </ul> </div> </div> </li> <li class="right"><a class="top-a" href="#x">menu6</a> <div> <div> <ul> <li><a class="pad" href="#x"><b></b></a></li> <li><a class="sub" href="#x">menu6.1</a></li> <li><a class="sub" href="#x">menu6.2</a></li> <li><a class="sub" href="#x">menu6.3</a></li> <li><a class="sub" href="#x">menu6.4</a></li> <li><a class="sub" href="#x">menu6.5</a></li> </ul> </div> </div> </li> </ul>
コメント・提案の投稿！
名前
メール
件名
本文
送信中です...
ASP.NET 3.5
|
Akio's Blog