ホーム へ サンプルページ 折り畳みコンテンツ18 hidden18.htm
タイトルバナーのマウスオーバーで、リンクテーブルを表示/折り畳み。 DHTML、jQuery。 メニュー構成、ハイパーリンクなどのカスタマイズはテキストエディターなどで可。 all 対応
(≠IE互換表示)。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
デモは、メニューの展開で。
< ご使用方法 >
・ ローカル(=PC)への保存は、hidden18/ をクリック、開いたホルダーで、hidden18.htm、0058794210.js(遅延時間)、0058794210.css(フォント、配色、位置、余白) を右クリック、 [対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 変わってしまった、ファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、hidden18.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに
<body> 〜 </body>の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2)
(*3 )を参考に太字部分の編集を任意に行います。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。 更新の確認は [F5]キー を押し、サーバーやブラウザーのキャッシュクリアー、最新データ読み込み(≠再アクセス)で行います。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.js、*.css なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わってしまったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 :
色記号5、〃6、スタイルシートリファレンス、ホームページ開設入門。 Web Development、Web開発、IE10
互換性クックブック、〃開発者向けガイド、IE
API リファレンス、IE 開発
> HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、XML、〃リファレンス、DHTML。
(*1)
: hidden18.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
|
HTMLの編集方法 |
(*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
シフトJIS使用(削除不可)
互換表示
ieなどに表示するアイコンファイル名(削除可)
<style type= 〜
</style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)
|
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link REL="SHORTCUT ICON" href="favicon.ico">
<style type="text/css"><!--
.xxx0
{ background: #F9F8F9 url('wttec.gif');
}
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9
url('wttec.gif'); text-decoration:none;
}
Xa:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
Xa:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
Xa:hover { color:#1F002E; background-color:#D2F3F4;
text-decoration:underline; }
Xa:active { color:#1F002E; background-color:#F5FFD2;
text-decoration:underline; }
font {font-size:12px;
line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
--></style>
<base target="_blank">
<title>サンプルページ 折り畳みコンテンツ</title>
<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<LINK rel="stylesheet" type="text/css" href="0058794210.css">
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<SCRIPT src="0058794210.js">
/* Split Menu Buttons: created: Aug 8th, 2012 by DynamicDrive.com. This
notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
</SCRIPT>
<SCRIPT>
jQuery(function(){ // on document load
$('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to
links with "data-showmenu" attr
})
</SCRIPT>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
(*2)
: hidden18.htm (例) 挿入先の <body> 〜
</body> の、〜
部分にペーストします。
|
HTMLの編集方法 |
(*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
URL サイト名
以下、同様。
背景色
サイト 1 〜 サイト 3 の不要メニュー(サイト1、サイト2など)は削除。
|
<body>
<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" startspan -->
<A class="splitmenubutton" href="http://www./……/xxx.html"
data-splitmenu="false" data-showmenu="dropmenu1">サイト 1</A>
<A class="splitmenubutton" href="http://www …… .html"
data-showmenu="dropmenu2" title="ホームページ">太陽風ДζΨΠ∀ </A>
<A class="splitmenubutton diffarrow" href="http://www./……/xxx.html"
data-showmenu="dropmenu2" data-menucolors="#8BD502">サイト 3</A>
<UL id="dropmenu1" class="splitdropdown">
<LI><A
href="../google_api/google_feed.htm"
title="Google Feed API サンプル">RSS(ニュースインデックス) </A></LI>
<LI><A
href="../google_map/google_map3a.htm"
title="Google Maps API サンプル">路線案内 </A></LI>
<LI><A href="http://www./……/xxx.html">サイト 13</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 14</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 15</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 16</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 17</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 18</A></LI>
</UL>
<UL id="dropmenu2" class="splitdropdown">
<LI><A
href="http://xml-xsl.sakura.ne.jp/oritatami3c.html">Java、JavaScript、DHTMLサンプル
≫</A></LI>
<UL>
<LI><A href="../tree35/tree35.htm"
title="JavaScript サンプル">ツリーメニュー35 </A></LI>
<LI><A href="../database15/database15.htm"
title="JavaScript サンプル">データベース35 </A></LI>
<LI><A href="http://www./……/xxx.html">サイト 213</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 214</A></LI>
</UL></LI>
<LI><A href="http://www./……/xxx.html">サイト 22 ≫</A>
<UL>
<LI><A href="http://www./……/xxx.html">サイト 221</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 222</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 223 ≫</A>
<UL>
<LI><A href="http://www./……/xxx.html">サイト 2231</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 2232</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 2233</A></LI>
<LI><A href="http://www.apple.com/">Apple </A></LI>
<LI><A href="http://www.apple.com/itunes/">iTune </A></LI>
</UL></LI></UL></LI>
<LI><A href="http://www./……/xxx.html">サイト 23</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 24</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 25</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 26</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 27</A></LI>
<LI><A href="http://www./……/xxx.html">サイト 28</A></LI></UL>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
<body>
==== この間、説明を省略。 ====
|
(*3)
: 0058794210.css (例) テキストエディターで開き、編集しhogehoge.htmlと同ディレクトリーに転送・配置します。
|
*.css、*.js の編集方法 |
(*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
|
〔この列ペースト不要〕
メニュー 1、2 文字色
メニュー 1、2 背景色
メニュー 1、2 マウスオーバー時背景色
|
.splitmenubutton, .downtoggler{ /* .downtoggler element is dynamically added
by script */
color: white;
font: bold 13px Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
background: #6500D7; /* default color of menu button */
display: inline-block;
}
==== この間、説明を省略。 ====
a.downtoggler.selected{ /* CSS to add to toggler element when it's
selected */
background: #5C2DAA; /* default hover background color of menu */
}
.downarrow, rightarrow{
cursor: pointer;
}
==== この間、説明を省略。 ====
|
< 補足 > 適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。