<!DOCTYPE html>
<html lang="ja">
<head>
<title>Spring-MVCの散歩道 応用の森(jQuery/JavaScript編)</title>
<meta charset="UTF-8" />
<meta name="Robots" content="index, follow" />
<meta name="keywords" content="Spring-MVC,Maven,Eclipse,Thymeleaf,MyBatis,Java,散歩道,小径,小道,小路" />
<meta name="description" content="Spring-MVCアプリケーション開発における、ジャンル別小技集です" />
<link rel="shortcut icon" href="./images/sPromenade_icon.ico" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/popmenu.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.1.3.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="./js/header.js"></script>
<script type="text/javascript" src="./js/slider_popmenu.js"></script>
<script type="text/javascript">
<!--
//フォトメニュー用背景画像
popimg = new Array();
popimg[0] = "dummy";
popimg[1] = "./menuimg/syuro20050729_17_200.jpg";
popimg[2] = "./menuimg/murasakishijimi20060321_134_200.jpg";
popimg[3] = "./menuimg/hanamizuki20051025_36_200.jpg";
popimg[4] = "./menuimg/benishijimi20050712_138_200.jpg";
popimg[5] = "./menuimg/akiakane20051109_6_200.jpg";
popimg[6] = "./menuimg/sarusuberi20051118_4_200.jpg";
//-->
</script>
</head>
<body class="in_background" oncontextmenu="freeMenu('menu10');return false;">
<table class="round">
<tr>
<td class="top left bold cf_title2">
■ポップアップメニュー アラカルト<br />
</td>
</tr>
<tr>
<td class="top">
jQueryとかがまだ産声を上げる前の2005年ごろまでは、<br/>
インタラクティブなページを作ろうと思ったら、とにかく自分でガリガリJavaScriptを書くしかありませんでした。<br/>
しかもその頃はまだ、「JavaScript==悪」 と認定されていて、JavaScripter は肩身の狭い思いをしていました。<br/>
今では、「jQuery(JavaScript)を使わないページ == 悪」 と認定されているようで、<br/>
約10年前とはポリシーが完全に逆転してしまったようです。<br/>
まぁそのころは、jQueryなんてものが無かったので、ポップアップメニュー一つ作るにも苦労して<br/>
タイマー組み込んだりなんたりして、苦労して作ったものです。<br/>
久々に、古いソースを整理してたら、懐かしいJavaScriptだけで動かすポップアップメニューのソースが出てきたので<br/>
Thymeleafで動くようにちょこっと手を入れて公開してみます。<br/>
<br/>
このフレームのソースの中の、「<a href="./js/slider_popmenu.js" target="_blank">./js/slider_popmenu.js</a>」というのが、ポップアップメニューJavaScriptの本体です。<br/>
興味があったら覗いてみてください。<br/>
参考）<a href="./popupmenu.html" target="_blank">このページのソース</a><br/>
自分で作っといて言うのもなんですが、かなり「うざい」ソースです。^^);<br/>
</td>
</tr>
<tr>
<td class="top left">
<table class="cl_round">
<tr>
<td class="cl_round top left">
<a href="javascript:void(0)" onclick="return drawPopupMenu('menu1', 415,50,200,200);">■オーソドックス</a>
<br/>
<span style="color:#666c99;">
まっ、とりあえずは<br/>
オーソドックスに・・
</span>
<div id="area1" style="position:absolute ;top:-200px;left:150px;z-index:1;visibility:visible">
<div id="menu1" style="absolute;top:0;left:0;visibility:hidden;width:200px;z-index:0">
<table class="cl_round">
<tr>
<td class="menu1">
<span class="bold">オーソドックス</span>
</td>
</tr>
<tr>
<td class="cl_round menu1_item">
<span class="sdm"><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo Japan</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu1_item">
<span class="sdm"><a href="https://www.google.co.jp/" target="_blank">Google</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu1_item">
<span class="sdm"><a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank">けいたい ふぉとぎゃらりぃ</a></span>
</td>
</tr>
</table>
</div>
</div>
</td>
<td class="cl_round top left">
<a href="javascript:void(0)" onclick="return drawXWipeMenu('menu2', 415,300,200,200);">■スライドドアー</a>
<br/>
<span style="color:#666c99;">
格子戸をぉ♪<br/>
くぐりぬけぇ～♪♪
</span>
<div id="area2" style="position:absolute ;top:-200px;left:340px;z-index:1;visibility:visible">
<div id="menu2" style="position:absolute;top:0;left:0;visibility:hidden;height:200px;width:200px;z-index:0">
<table class="cl_round">
<tr>
<td class="menu2">
<span style="color:white;font-weight:bold;">スライドドアー</span>
</td>
</tr>
<tr>
<td class="cl_round menu2_item">
<a href="https://www.google.co.jp/" target="_blank"><span class="sdm">Google</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu2_item">
<a href="http://www.yahoo.co.jp/" target="_blank"><span class="sdm">Yahoo Japan</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu2_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
</table>
</div>
</div>
</td>
<td class="cl_round top left">
<a href="javascript:void(0)" onclick="return drawYWipeMenu('menu3', 415, 700,200,200);">■カーテンコール</a><br/>
<span style="color:#666c99;">ブラボォ～ ブラボォ～！！</span>
<div id="area3" style="position:absolute ;top:-200px;left:480px;z-index:1;visibility:visible">
<div id="menu3" style="position:absolute;top:0;left:0;visibility:hidden;height:200px;width:200px;z-index:0">
<table class="cl_round">
<tr>
<td class="menu3">
<span style="color:white;font-weight:bold;">カーテンコール</span>
</td>
</tr>
<tr>
<td class="cl_round menu3_item">
<span class="sdm"><a href="http://www.google.co.jp/" target="_blank">Google</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu3_item">
<span class="sdm"><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu3_item">
<span class="sdm"><a href="http://www.microsoft.com/isapi/redir.dll?prd=ie&pver=6&ar=IStart" target="_blank">MSN Japan</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu3_item">
<span class="sdm"><a href="http://ask.jp/" target="_blank">Ask.jp</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu3_item">
<span class="sdm"><a href="http://search.opera.com/" target="_blank">Opera Search</a></span>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td class="cl_round top left">
<a href="javascript:void(0)" onclick="return drawXSlideMenu('menu4', 490, 50, 300,300, -400, 150);">■フラバー</a>
<br /><span style="color:#666c99;">変幻自在なゴム状物質。</span>
<div id="area4" style="position:absolute ;top:-200px;left:150px;width:150;z-index:1;visibility:visible;">
<div id="menu4" style="position:absolute;top:0;left:0;visibility:hidden;width:150px;z-index:0;">
<table class="cl_round">
<tr>
<td class="cl_round menu4">
<span class="bold">フラバー</span>
</td>
</tr>
<tr>
<td class="cl_round menu4_item">
<a href="#"><span class="sdm">メニュー項目-1</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu4_item">
<a href="#"><span class="sdm">メニュー項目-2</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu4_item">
<a href="#"><span class="sdm">メニュー項目-3</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu4_item">
<a href="#"><span class="sdm">メニュー項目-4</span></a>
</td>
</tr>
</table>
</div>
</div>
</td>
<td class="cl_round top left">
<a href="javascript:void(0)" onclick="return drawYBoundMenu('menu5', 490, 300, 200, 100,-300);">■バウンド</a>
<br/>
<span style="color:#666c99;">スラムダ～ンク！</span>
<div id="area5" style="position:absolute ;top:-200px;left:340px;z-index:1;visibility:visible;">
<div id="menu5" style="position:absolute;top:0;left:0;visibility:hidden;width:150px;z-index:0;">
<table class="cl_round">
<tr>
<td class="menu5">
<span class="bold">バウンド</span>
</td>
</tr>
<tr>
<td class="cl_round menu5_item">
<span class="sdm"><a href="#">メニュー項目-1</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu5_item">
<span class="sdm"><a href="#">メニュー項目-2</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu5_item">
<span class="sdm"><a href="#">メニュー項目-3</a></span>
</td>
</tr>
<tr>
<td class="cl_round menu5_item">
<span class="sdm"><a href="#">メニュー項目-4</a></span>
</td>
</tr>
</table>
</div>
</div>
</td>
<td class="cl_round top left">
<a href="javascript:void(0)" onclick="return drawXYWipeMenu2('menu6', 490, 700, 200, 200);">■スターゲート</a>
<br/><span style="color:#666c99;">それは、別宇宙への扉</span>
<div id="area6" style="position:absolute ;top:-200px;left:500px;width:200px;z-index:1;visibility:visible">
<div id="menu6" style="position:absolute;top:0;left:0;visibility:hidden;width:200px;z-index:0">
<table class="cl_round">
<tr>
<td class="menu6">
<span style="color:gold;font-weight:bold;">スターゲート</span>
</td>
</tr>
<tr>
<td class="cl_round menu6_item">
<a href="https://www.google.co.jp/" target="_blank"><span class="sdm">Google</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu6_item">
<a href="http://www.yahoo.co.jp/" target="_blank"><span class="sdm">Yahoo Japan</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu6_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td class="cl_round top left" colspan="3"> </td>
</tr>
<tr>
<td class="cl_round top left" colspan="3">
<span style="color:#666c99;">ちょっと変わり種のポップアップメニューなど・・・</span>
</td>
</tr>
<tr>
<td class="cl_round top left" >
<a href="javascript:void(0)" onclick="return randomImage(600);">■フォトメニュー</a><br/>
<span style="color:#666c99;">
ありそうで、何故か見かけない。<br/>
ポップアップメニューの背景に<br/>
画像を組み込んでみた。<br/>(画像は１種類とは限らない・・)</span>
<div id="area7" style="position:absolute ;top:600px;left:150px;visibility:visible;z-index:0">
<div id="menu7" style="position:absolute;top:0;left:0;visibility:hidden;width:200px;z-index:1">
<table id="popimg">
<tr>
<td class="menu7">フォトメニュー</td>
</tr>
<tr>
<td class="menu7_item">
<a href="https://www.google.co.jp/" target="_blank"><span class="sdm">Google</span></a>
</td>
</tr>
<tr>
<td class="menu7_item">
<a href="http://www.yahoo.co.jp/" target="_blank"><span class="sdm">Yahoo Japan</span></a>
</td>
</tr>
<tr>
<td class="menu7_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
<tr>
<td class="menu7_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
<tr>
<td class="menu7_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
<tr>
<td class="menu7_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
</table>
</div>
</div>
</td>
<td class="cl_round">
<a href="javascript:void(0)" onclick="return drawXYWipeMenu('menu9', 610, 300, 200, 300);">■ヌーディーメニュー</a><br/>
<img src="./images/komorebi20051118_66_320.jpg" border="0"/><br/>
<span style="color:#666c99;">
思い切って全部脱いじゃいましたっ！<br/>
イャ～ン、背景スケスケ～刺激的～～！！<br/>
でも実際のところ、利用価値はほとんどゼロ？（笑）</span>
<div id="area9" style="position:absolute ;top:300px;left:460px;visibility:visible;z-index:0">
<div id="menu9" style="position:absolute;top:0;left:0;visibility:hidden;width:200px;z-index:1">
<table>
<tr>
<td class="menu9">ヌーディーメニュー</td>
</tr>
<tr>
<td class="menu9_item">
<a href="https://www.google.co.jp/" target="_blank"><span class="sdm">Google</span></a>
</td>
</tr>
<tr>
<td class="menu9_item">
<a href="http://www.yahoo.co.jp/" target="_blank"><span class="sdm">Yahoo Japan</span></a>
</td>
</tr>
<tr>
<td class="menu9_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
<tr>
<td class="menu9_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
<tr>
<td class="menu9_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
<tr>
<td class="menu9_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
</table>
</div>
</div>
</td>
<td class="cl_round top left" colspan="3">
<span style="color:888800;text-decoration:underline">■どこでもメニュ～：</span><br/>
<span style="color:#666c99;">ぼく、アリえもん。<br/>フレーム内の好きな所で、<span class="bold">マウス右ボタン</span>をクリックしてみてネ！</span><br/>
<div id="area10" style="position:absolute ;top:-200px;left:150px;width:150;z-index:1;visibility:visible">
<div id="menu10" style="position:absolute;top:0;left:0;visibility:hidden;width:150px;z-index:0">
<table class="cl_round">
<tr>
<td class="menu10">どこでもメニュ～</td>
</tr>
<tr>
<td class="cl_round menu10_item">
<a href="https://www.google.co.jp/" target="_blank"><span class="sdm">Google</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu10_item">
<a href="http://www.yahoo.co.jp/" target="_blank"><span class="sdm">Yahoo Japan</span></a>
</td>
</tr>
<tr>
<td class="cl_round menu10_item">
<a href="http://arimodoki.dip.jp/kp-gallery/" target="_blank"><span class="sdm">けいたい ふぉとぎゃらりぃ</span></a>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="label"></div>
<!-- ページフッタ -->
<table class="inner_footer">
<tr>
<td class="inner_footer left top bold" >
<a href="./hyakki_jquery.html" target="_self">
jQuery/JavaScriptの小技集 <img src="./images/allow_left.gif" height="12"/>
</a>
</td>
<td class="inner_footer center">
ポップアップメニュー アラカルト
<div>
<a href="./" target="_top" alt="Spring-MVCの散歩道 HOME" title="Spring-MVCの散歩道 HOME"><span class="bold">HOME</span></a>
</div>
</td>
<td class="inner_footer right top bold"></td>
</tr>
</table>
<!-- ページフッタ -->
</body>
</html>
|