JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5
ホーム
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を購読する
複数列のスライド型メニュー
《
プログラマーがネットで副収入を得る方法とは
》
説明
補足説明
コード
分割コード
関連書籍
コメント投稿
このサンプルは、CSS3のスタイルシートを適用して複数列のスライド型メニューを表示します。マウスをトップメニューに移動すると複数列のサブメニューが上下にスライドして表示されます。このサンプルは、
SafariとGoolge Chromeに最適化
されています。Firefoxの場合、サブメニューがスライドされません。IEの場合、メニューがフラットの状態で表示されます。
このサンプルを編集して試してみる
SafariとChromeの場合、CSSのradius corners, text-shadows, gradient fillsが適用されます。そしてサブメニューが上下にスライドします。Firefoxの場合、border radii, text-shadows, drop shadows, gradient fillsが適用されます。IEの場合フラットがメニューが表示されます。
multi column slide / border radius / drop shadow / gradient fill / animation
Menu1
Menu2 with Description
Menu 2.1
Menu 2.1.1
Menu 2.1.2
Menu 2.1.3
Menu 2.1.4
Menu 2.1.5
Menu2.2
Menu2.2.1
Menu2.2.2
Menu2.2.3
Menu2.2.4
Menu2.3
Menu2.3.1
Menu2.3.2
Menu2.3.3
Menu2.4
Menu2.4.1
Menu2.4.2
Menu2.4.3
Menu2.5
Menu2.5.1
Menu2.5.2
Menu2.5.3
Menu2.6
Menu2.6.1
Menu2.6.2
Menu2.6.3
Menu2.7
Menu2.7.1
Menu2.7.2
Menu2.7.3
Menu2.7.4
Menu2.7.5
Menu3
Menu3.1
Menu3.1.1
Menu3.1.2
Menu3.1.3
Menu3.1.4
Menu3.2
Menu3.2.1
Menu3.2.2
Menu3.2.3
Menu3.2.4
Menu3.3
Menu3.3.1
Menu3.3.2
Menu3.3.3
Menu3.3.4
Menu4
Menu4.1
Menu4.1.1
Menu4.1.2
Menu4.1.3
Menu4.1.4
Menu4.2
Menu4.2.1
Menu4.2.2
Menu4.2.3
Menu5 with Description
Menu5.1
Menu5.1.1
Menu5.1.2
Menu5.1.3
Menu5.1.4
Menu5.1.5
Menu5.2
Menu5.2.1
Menu5.2.2
Menu5.2.3
Menu5.3
Menu5.3.1
Menu5.3.2
Menu5.3.4
Menu5.4
Menu5.4.1
Menu5.4.2
Menu5.4.3
Menu5.4.4
Menu5.5
Menu5.5.1
Menu5.5.2
Menu5.5.3
Menu5.6
Menu5.6.1
Menu5.6.2
Menu5.6.3
Menu5.6.4
Menu5.6.5
Menu6
Menu7
source:
cssplay.co.uk
CSS部
HEAD部
BODY部
ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー&ペーストしてください。
/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. Copyright (c) 2010 Stu Nicholls. All rights reserved. =================================================================== */ .menu, .menu ul {padding:0; margin:0; list-style:none;} .menu {position:relative; width:675px; padding-left:25px; margin:0 auto -1px auto; height:35px; background:#ccc; border:1px solid #888; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; border-top-right-radius:8px; border-top-left-radius:8px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.4)), color-stop(30%, rgba(255, 255, 255, 0.2))); background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0)); } .menu li {float:left;} .menu li a {display:block; font:normal 12px/35px verdana, sans-serif; color:#000; text-decoration:none; padding:0 10px;text-shadow: -1px -1px 6px rgba(255, 255, 255, 0.6), -1px -1px 1px #fff; } * html .menu li a:hover {background:#069; color:#fff;} .menu li a:hover, .menu li:hover > a {background:#069; color:#fff; text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000; text-decoration:none; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.4)), color-stop(30%, rgba(255, 255, 255, 0.2))); background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0)); } .menu table {border-collapse:collapse; padding:0; margin:0 0 -1px 0; border:0;} .menu div.holder {width:720px; opacity:0.92; alpha(opacity=92); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=92); height:0; left:-10px; top:35px; position:absolute; overflow:hidden; -webkit-transition: height 0.8s linear;} .menu div.slide {background:#ccc; width:670px; padding:0 15px 15px; border:1px solid #888; border-top:1px solid #069; position:relative; top:-300px; left:9px; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; border-bottom-right-radius:8px; border-bottom-left-radius:8px; -moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6); box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6); background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)), color-stop(10%, rgba(255, 255, 255, 0.4)), color-stop(20%, rgba(255, 255, 255, 0.2))); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0)); -webkit-transition: top 0.8s linear; } .menu div.slide dl {float:left; width:200px;} .menu :hover div.p1 {height:275px;} .menu :hover div.p2 {height:127px;} .menu :hover div.p3 {height:136px;} .menu :hover div.p4 {height:228px;} .menu :hover div.slide {top:0px;} .menu li .slide dl {padding:0; margin:0;} .menu li .slide dl dt {font-family:verdana, sans-serif; font-size:13px; font-weight:bold; padding:10px 0 0; margin:0; height:18px; line-height:18px; color:#069;} .menu li .slide dl dd {padding:0; margin:0;} .menu li .slide dl dd a {background:transparent; height:18px; line-height:18px;} * html .menu li .slide dl dd a:hover {background:transparent;} #info .clear {clear:left;} #info img {display:block; margin:0 auto;}
ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー&ペーストしてください。
ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー&ペーストしてください。
Menu1
Menu2 with Description
Menu 2.1
Menu 2.1.1
Menu 2.1.2
Menu 2.1.3
Menu 2.1.4
Menu 2.1.5
Menu2.2
Menu2.2.1
Menu2.2.2
Menu2.2.3
Menu2.2.4
Menu2.3
Menu2.3.1
Menu2.3.2
Menu2.3.3
Menu2.4
Menu2.4.1
Menu2.4.2
Menu2.4.3
Menu2.5
Menu2.5.1
Menu2.5.2
Menu2.5.3
Menu2.6
Menu2.6.1
Menu2.6.2
Menu2.6.3
Menu2.7
Menu2.7.1
Menu2.7.2
Menu2.7.3
Menu2.7.4
Menu2.7.5
Menu3
Menu3.1
Menu3.1.1
Menu3.1.2
Menu3.1.3
Menu3.1.4
Menu3.2
Menu3.2.1
Menu3.2.2
Menu3.2.3
Menu3.2.4
Menu3.3
Menu3.3.1
Menu3.3.2
Menu3.3.3
Menu3.3.4
Menu4
Menu4.1
Menu4.1.1
Menu4.1.2
Menu4.1.3
Menu4.1.4
Menu4.2
Menu4.2.1
Menu4.2.2
Menu4.2.3
Menu5 with Description
Menu5.1
Menu5.1.1
Menu5.1.2
Menu5.1.3
Menu5.1.4
Menu5.1.5
Menu5.2
Menu5.2.1
Menu5.2.2
Menu5.2.3
Menu5.3
Menu5.3.1
Menu5.3.2
Menu5.3.4
Menu5.4
Menu5.4.1
Menu5.4.2
Menu5.4.3
Menu5.4.4
Menu5.5
Menu5.5.1
Menu5.5.2
Menu5.5.3
Menu5.6
Menu5.6.1
Menu5.6.2
Menu5.6.3
Menu5.6.4
Menu5.6.5
Menu6
Menu7
コメント・提案の投稿!
名前
メール
件名
本文
送信中です...
ASP.NET 3.5
|
Akio's Blog