Portfolio
INDEX
趣旨と著作権について
使用上の注意事項
データの記述方法
みやけ工房へのメール
TOP PAGE
HTMLと簡単なスクリプト
汎用スライドショー
スライドショー&ギャラリー
貼り付けるスライドショー
ホームページ制作の小技集
TEMPLATE
テンプレート集Top
・ スライドショー
・ ギャラリー
・ 複数アルバム表示
・ 複合ページ
・ メニュー
・ ボタンとリンク
・ その他
プルダウンメニューの応用
サンプルのソース
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <style type="text/css"> <!-- div.koboMenu{position:absolute;top:0px;width:195px;height:40px;overflow:hidden;} div.koboMenu table{width:100%;height:100%;font-family:'メイリオ';} div.koboMenu th{height:40px;background-color:#356;color:#fff;font-size:14px;} .koboMenuA{text-decoration:none;color:#000;display:block;background-color:#eee;border:1px solid #bbb;padding:5px 20px;font-size:12px;} .koboMenuA:hover{color:#f00;background-color:#ffc;} --> </style> </head> <body style="text-align:center;font-family:'メイリオ';"> <table style="width:960px;height:120px;margin:auto;" cellpadding="0" cellspacing="0"> <tr> <td style="width:355px;font-size:70px;text-align:center;font-family:'Andalus';background-color:#fc3;"> Portfolio <!---ページのタイトルを記述↑---> </td> <td style="vertical-align:bottom;text-align:right;"> <!-- ここからプルダウンメニュー。 --> <div style="position:relative;top:0px;left:0px;z-index:2;width:600px;height:40px;margin:auto;"> <!-- １番目のメニュー。左からの位置と、onmouseover="this.style.height='〜';"に開いた時の高さを設定。 --> <div class="koboMenu" style="left:0px;" onmouseover="this.style.height='180px';" onmouseout="this.style.height='40px';"> <table cellpadding="0" cellspacing="0"> <tr><th onmouseover="this.style.backgroundColor='#900';" onmouseout="this.style.backgroundColor='#356';"> INDEX </th></tr> <tr><td><a class="koboMenuA" href="../home.html?3">趣旨と著作権について</a></td></tr> <tr><td><a class="koboMenuA" href="../home.html?3">使用上の注意事項</a></td></tr> <tr><td><a class="koboMenuA" href="../home.html?3">データの記述方法</a></td></tr> <tr><td><a class="koboMenuA" href="../home.html?3">みやけ工房へのメール</a></td></tr> </table> </div> <!-- ２番目のメニュー。左からの位置と、onmouseover="this.style.height='〜';"に開いた時の高さを設定。 --> <div class="koboMenu" style="left:200px;" onmouseover="this.style.height='215px';" onmouseout="this.style.height='40px';"> <table cellpadding="0" cellspacing="0"> <tr><th onmouseover="this.style.backgroundColor='#900';" onmouseout="this.style.backgroundColor='#356';"> TOP PAGE </th></tr> <tr><td><a class="koboMenuA" href="../html/ichiyaduke.html">HTMLと簡単なスクリプト</a></td></tr> <tr><td><a class="koboMenuA" href="../js/index.html">汎用スライドショー</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/koukai.html">スライドショー&ギャラリー</a></td></tr> <tr><td><a class="koboMenuA" href="../cp_ez/index.html">貼り付けるスライドショー</a></td></tr> <tr><td><a class="koboMenuA" href="../kowaza/index.html">ホームページ制作の小技集</a></td></tr> </table> </div> <!-- ３番目のメニュー。左からの位置と、onmouseover="this.style.height='〜';"に開いた時の高さを設定。 --> <div class="koboMenu" style="left:400px;" onmouseover="this.style.height='320px';" onmouseout="this.style.height='40px';"> <table cellpadding="0" cellspacing="0"> <tr><th onmouseover="this.style.backgroundColor='#900';" onmouseout="this.style.backgroundColor='#356';"> TEMPLATE </th></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index.html">テンプレート集Top</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index_hyoujun.html">・ スライドショー</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index_ichiran.html">・ ギャラリー</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index_hukusuu.html">・ 複数アルバム表示</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index_haikei.html">・ 複合ページ</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index_menu.html">・ メニュー</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index_button.html">・ ボタンとリンク</a></td></tr> <tr><td><a class="koboMenuA" href="../dl/temp/index_script.html">・ その他</a></td></tr> </table> </div> </div> <!-- ここまでプルダウンメニュー。 --> </td> </tr> </table> </body> </html>
戻る
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.