このサイト(http://external.pcc.jp/~biso/)のトップページなどで使われている、スクロールしてもついてくる、Pop-up MENUを作りたいのですが、どうやったらいいのかわかりません。
やりかたがわかる方いましたら、ぜひ教えてくださぃ。
できれば、外部ファイルに保存し、それを読み込むかたちにしたいと思っています。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

外部ファイルだと分かりませんが、昔、下記のソースを元に作成したことがあります。


ソースをコピペしただけなので、何かのヒントになればなと思います。

-------------------------------------------
<script>
// レイアの最初の横位置
def_left = 18;

// レイアの最初の縦位置
def_top = 0;

function init() {
N4 = IE = GK = 0;
if (document.layers)
{ N4 ++; obj = document.layers["lay"]; }
else if (document.all)
{ IE ++; obj = document.all("lay").style; }
else if (document.getElementById)
{ GK ++; obj = document.getElementById("lay").style; }

with (obj) {
left = def_left;
top = def_top;
}
lay_ud();
}

function lay_ud() {
if (N4) y = pageYOffset + def_top;
if (IE) y = document.body.scrollTop + def_top;
if (GK) y = window.pageYOffset + def_top;
obj.top = y;
setTimeout("lay_ud()",0);
}

onload = init;
</script>
<div id=lay style="position:absolute;">
<img src="●●.gif" width="65" height="17" border="0">

</div>
    • good
    • 0

http://dynamicdrive.com/
に、多くのサンプルがあります。

Home > Menus and navigation systems
に行けば、様々なサンプルを見れます。

該当するサンプルは「 Floating Menu Script 」です。

</body>の下に埋め込むスクリプトかと存じます。
頑張ってください。(^^)

参考URL:http://dynamicdrive.com/dynamicindex1/staticmenu …
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qしおりの作り方教えてください!!困ってます

小5です。今年の春に転校してしまう友達がいます。そのため、手作りプレゼントで「しおり」(本の)をプレゼントしようと思っています。
ところが、作り方があまり分からないので、簡単なしおりの作り方を教えてください!!お願いします。

Aベストアンサー

さんこうですが

http://www.24tadoku.com/column/column_18.html
http://search.yahoo.co.jp/search?p=%A4%B7%A4%AA%A4%EA%A4%CE%BA%EE%A4%EA%CA%FD&fr=top_v2&tid=top_v2&ei=euc-jp&search.x=1&x=16&y=14

Qonmouseover="this.className=をjsファイルにまとめて、指定する場所はid=menu1,2~....かclass=menuで統一したい

<div class="font1 bor1"
onmouseover="this.className=this.className+' bgcol txcol'"
onmouseout="this.className='font1 bor1'">
というものがあったとしてこれを
<div id="menu1・・・2・・・">だけにして
onmouseover=~をjsに略記できるようにしたいのですが
何かいい手はありませんか?

idで指定できる版のほかに
classで指定できる版があるとうれしいです。classだと難しいでしょうか?

また、こちらももしできればでいいのですが、this.classNameを
指定IDのclassName等もできるのでしょうか?

質問に不足があれば答えられる範囲で答えます。よろしくお願いします。

Aベストアンサー

もうひとつ、質問内容を把握できてませんが、
jQueryを使ったサンプルを。中身は
「font1」ってclassを持つ要素のマウスオーバーで
bgcol と txcol の二つのクラスを追加する。
マウスアウトで
bgcol と txcol の二つのクラスを取り除く。
です。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){

$('.font1').hover(function(){
$(this).addClass("bgcol");
$(this).addClass("txcol");
},function(){
$(this).removeClass("bgcol");
$(this).removeClass("txcol");
});

});
</script>

$('.font1') という部分を $('#font1') と書けば id="font1" の要素に対する設定になります。 

jQueryの解説、入手先等は
http://www.openspc2.org/JavaScript/Ajax/jQuery_study/index.html
とか、参考にしてください。

もうひとつ、質問内容を把握できてませんが、
jQueryを使ったサンプルを。中身は
「font1」ってclassを持つ要素のマウスオーバーで
bgcol と txcol の二つのクラスを追加する。
マウスアウトで
bgcol と txcol の二つのクラスを取り除く。
です。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){

$('.font1').hover(function(){
$(this).addClass("bgcol");
$(this).addClass("txcol");
},function(){
$(this).removeClass("bgcol");...続きを読む

Qしおりの作り方

PCのイラストを印刷してしおりにしたいけどどうやったらいいのかわからないので教えてください
ラミネート加工の機械ないです
できるだけ丈夫なのがいいです

Aベストアンサー

イラストを好きな大きさに印刷は出来るのですよね?
あとはその印刷した紙を丈夫に保護しつつしおりに出来ればいいわけで。

ラミネーターの機械・・・・あれは専用ラミネートフィルムを熱で貼り付けラミネートするわけですが。
ラミネートにこだわるならば方法は二つ。

好きな印刷物をラミネートしてくれるサービスがあります。お近くにあれば良いのですが。
住所の番地までは結構ですが、お住まいの市町村名だけでも補足いただければ調べ紹介することは出来るかも知れません。(あればの話ですが)
しおり程度であれば使うフィルムもハガキサイズ程度ですよね?
一枚100円程度でしてもらえるかと思います。

もう一つは熱で貼り付けるのではなく、いわゆる粘着テープで貼り合わせるみたいに機械のいらないラミネートフォルムを購入。
これ、貼り合わせるだけでお手軽ではありますが、言い換えると位置合わせが確定しないうちに張り付いてしまったり、気泡が入ったり仕上がりとしては難しいかも?

あとは、ラミネーターをお持ちのお友達を探すとか?

Qhttp://www.ajaxmail.jp/のAjaxmailを使用

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type="text/javascript" src="js/protoculous-effects-packer.js"></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>

<body>

<div style="margin:200px">

<form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.php" method="post">
<input type="hidden" name="str" value="xxxx@xxxx.xx.xx">
</form>

<a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a>
</form>

フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。

恐れ入りますがどなたかご教授頂けると幸いです

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<li...続きを読む

Aベストアンサー

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_Mail="hogehoge3@fuga.fuga";
form_data="3";
break;
default:
Kanrisya_Mail="";
form_data="";
break;
}
document.getElementById("E-mail").value=Kanrisya_Mail;
document.getElementById("内容").value=form_data;
Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム",
options:{autosize:true,topclose:true}});
document.observe('lightview:opened',function(){
new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]});
new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]});
});
}
function ajaxsend(){
var form_data={"E-mail":document.getElementById("E-mail").value,
"内容":document.getElementById("内容").value};
Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax',
options:{autosize: true,topclose:true,ajax:{parameters:form_data,}}
});
}
</script>
</body>
</html>

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_...続きを読む

QPDFでしおりの作り方

PDF Writerでword文書をPDFに変換しているのですが、
その時に変換元のword文書の目次をPDFの「しおり」
として作りたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

Wordで目次を作り、それをPDFに変換すれば、出来ると思うのですが・・・???。

意味が違っていましたら、ゴメンナサイ。σ(^_^;)

Q元々あるデモデータ(http://css-tricks.com/dow

元々あるデモデータ(http://css-tricks.com/downloads/)に変更を加えたいです。
デモ二番目【Grid Accordion】を参考に少しいじっているのですが、なぜだか<a>~</a>のリンクが効きません。具体的には…

オリジナルは、
<dl>
<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

...
</dl>

こういった作り方で、<dd>の中はテキストだけが入っている状態です。
やりたい事は、この<dd>の中に、更に

<ul>
<li><a></a></li>
</ul>

を入れて変更を加えて、最終的に<a>のURLにジャンプさせたいのですが、なぜだかこの<a>のリンクが効かなくなりました。

リンクを正常に効くようにするにはどうすればいいでしょうか?
おそらくセットになっていたinfogrid.jsの一部を変えればいいと思ったのですが、ここで詰まっています。
アドバイスよろしくお願いします。

Aベストアンサー

ざっとしか見ていませんが…

16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな(正確には親要素がclass="curCol"の)カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。 ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみてください。
このため、他のリンクタグも(親要素がclass="curCol"でないので)一律にキャンセルされてしまっています。

キャンセルしているのは
 e.preventDefault();
の行の部分ですので、それをコメントアウトすればリンクは効くようになりますが、もともとの機能が損なわれてしまいます。


両立させるのなら、(↑)の画像のリンクと他のリンク要素を識別できるようにして(画像リンクだけに共通のclassを与えるとか)、それ以外はキャンセルしないようにすればよろしいかと思います。


きちんと全部を読み取って回答しているわけではありませんので、見落としがあったらご容赦。

ざっとしか見ていませんが…

16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな(正確には親要素がclass="curCol"の)カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。 ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみ...続きを読む

Qマックのナゲット・ソースの作り方

マックのナゲットとナゲットソースが大好き
です。自分で作ってみたいのでお知恵を
貸して下さい。
○ナゲットの作り方
○バーベキュウソースの作り方
○マスタードソースの作り方
よろしくおねがいします。

Aベストアンサー

チキンナゲットの作り方は以下です。

<材料>
皮なし鶏むね肉・・・200g
タマネギ・・・1/4個
砂糖・・・大盛り大さじ1
塩・・・大盛り小さじ1
天ぷら粉・・・大さじ2
卵黄・・・1個

<作り方>
1)鶏肉、タマネギを適当な大きさに切り、材料を全部入れ、フードプロセッサーにペースト状になるまでかける。

2)スプーンで形を整え、油に落とし、キツネ色になったらできあがり。

ソースの作り方は知らないのですが、マックで一つ10円で売ってくれるのでたくさん買ってはどうでしょう?2ヶ月くらいは賞味期限がありますよ。

Q【短い】1つだけ展開/表示/非表示/開閉【Javascript】

このスクリプト、もっと短くなりませんか?
idがdisp0,disp20などdisp+数字になっているものを開閉するスクリプト。
動作:対象を開き他を閉じる、対象が開いていた場合対象を閉じる。
条件:連番(0から順番)じゃなくても(0,1,2,7みたいに飛んでも)動作する。
<html>
<head>
<title>1つだけ展開/表示/非表示/開閉</title>
<script>
//idがdisp+数字のものを格納
var kakunou = new Array();
window.onload=function(){
var tags=document.getElementsByTagName("*");
for(var i=0;i<tags.length;i++){
if(tags[i].id.match(/^disp[0-9]+$/)){
mituketa=tags[i].id.match(/^disp[0-9]+$/);
kakunou.push(mituketa);
}
}
}

//開閉処理部分
function disp(tage) {
for(i=0;i<kakunou.length;i++){
cb = document.getElementById(kakunou[i]).style;
if(kakunou[i]==tage){
if (cb.display == 'none') cb.display = "block"; else cb.display = "none";
} else {
cb.display = 'none';
}
}
}
</script>

</head>
<body>
<a href="javaScript:disp('disp1')">+</a>■検索サイト1<br>
<div id="disp1" style="display:none">
├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br>
├<a href="http://www.goo.ne.jp/" >Goo</a><br>
└<a href="http://www.lycos.co.jp/">Lycos</a><br>
</div>
<a href="javaScript:disp('disp200')">+</a>■検索サイト2<br>
<div id="disp200" style="display:none">
├<a href="http://www.infoseek.co.jp/">Infoseek</a><br>
├<a href="http://www.google.com/" >Google</a><br>
└<a href="http://kids.goo.ne.jp/">Kids Goo</a><br>
</div>
<a href="javaScript:disp('disp30')">+</a>■検索サイト3<br>
<div id="disp30" style="display:none">
├<a href="http://www.excite.co.jp/">Excite</a><br>
└<a href="http://www.msn.com/" >MSN</a><br>
</div>
</body>
</html>

このスクリプト、もっと短くなりませんか?
idがdisp0,disp20などdisp+数字になっているものを開閉するスクリプト。
動作:対象を開き他を閉じる、対象が開いていた場合対象を閉じる。
条件:連番(0から順番)じゃなくても(0,1,2,7みたいに飛んでも)動作する。
<html>
<head>
<title>1つだけ展開/表示/非表示/開閉</title>
<script>
//idがdisp+数字のものを格納
var kakunou = new Array();
window.onload=function(){
var tags=document.getElementsByTagName("*");
for(var i=0;i<tags.length;i...続きを読む

Aベストアンサー

あえて他人とは違う方法で!
idも使わず、classだけ!
それから
<a href="javascript:~
は、使わないほうが・・・

<html>
<head>
<title>1つだけ展開/表示/非表示/開閉</title>
<style>
.h{display:none; }
.d{display:block; }
</style>
<script>
window.onload = function(){
document.body.onclick = chk;
}
function chk(e){
var obj = e?e.target:event.srcElement;
var objs = document.getElementsByTagName('a');
for(var i=0,m=objs.length;i<m;i++){
if(objs[i].className=='m'){
var d=objs[i];
do{ d=d.nextSibling;} while(d.nodeName!='DIV')
d.className=(obj==objs[i]&&d.className=='h')?'d':'h';
}
}
}
</script>
</head>
<body>
<a href="#" class="m">+</a>■検索サイト1<br>
<div class="h">
├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br>
├<a href="http://www.goo.ne.jp/" >Goo</a><br>
└<a href="http://www.lycos.co.jp/">Lycos</a><br>
</div>
<a href="#" class="m">+</a>■検索サイト2<br>
<div class="h">
├<a href="http://www.infoseek.co.jp/">Infoseek</a><br>
├<a href="http://www.google.com/" >Google</a><br>
└<a href="http://kids.goo.ne.jp/">Kids Goo</a><br>
</div>
<a href="#" class="m">+</a>■検索サイト3<br>
<div class="h">
├<a href="http://www.excite.co.jp/">Excite</a><br>
└<a href="http://www.msn.com/" >MSN</a><br>
</div>
</body>
</html>

あえて他人とは違う方法で!
idも使わず、classだけ!
それから
<a href="javascript:~
は、使わないほうが・・・

<html>
<head>
<title>1つだけ展開/表示/非表示/開閉</title>
<style>
.h{display:none; }
.d{display:block; }
</style>
<script>
window.onload = function(){
document.body.onclick = chk;
}
function chk(e){
var obj = e?e.target:event.srcElement;
var objs = document.getElementsByTagName('a');
for(var i=0,m=objs.length;i<m;i++){
if(objs[i].className=='m')...続きを読む

Qすすきのふくろう みみずくの作り方は?

むかしおばあちゃんが作ってくれた「すすきのふくろう」の作り方を知りたくなって、探してみたのですが、作り方を紹介しているページを見つけることが出来ませんでした。

どなたか、すすきのふくろう、あるいはみみずくの作り方を紹介しているページを御存知の方、ページを紹介していただけないでしょうか?
もちろん、作り方そのものを教えていただけるかたも歓迎です。
宜しくお願いします。

Aベストアンサー

僕は小学生のときに作ったことがあったんですが、
作り方は忘れました。
作り方を簡単に紹介しているサイトを見つけたのでお知らせします。

参考URL:http://www01.u-page.so-net.ne.jp/fa2/sakaeya/MIMIZUKU.html

Qmenuの表示

質問です。
以下の例1のような左右に分かれたページで、「サービスガイド」をクリックすると、その下のメニューが下に移動して、その間にサブメニューが表示され、さらにマウスが移動したら、そのサブメニューが閉じて、元に戻るようなスクリプトを探しています。そのようなスクリプトってないでしょうか?
ご存知の方、よろしくお願いいたします。
例1 http://www.starcat.ne.jp/mediacat/

Aベストアンサー

ちょっと作ってみました。 こういうものでは、いかがでしょうか。

<html>
<head>
<title></title>
<script type="text/javascript"><!--
var HD= new Array();

function showdown(tgt){//サブメニューの表示調整
if (document.getElementById){
tar=document.getElementById(tgt);
if(tar.style.display=="block"){//サブメニューが表示されている時は隠す
tar.style.display="none"
}
else {//サブメニューが表示されていなければ、表示させる
tar.style.display="block";
}
}
}

function hideaway(tgt){// サブメニューからポインタが離れた時の処理
if (document.getElementById){
HD[tgt]=setTimeout('document.getElementById("'+tgt+'").style.display="none"',2000);
// サブメニューからポインタが離れたら、2秒後に隠す
}
}

function keepit(tgt){//ポインタがメニューの上に戻った時の処理
if (HD[tgt]){
clearTimeout(HD[tgt]);
// サブメニューを2秒後に隠す処理を停止
}
}
//--></script>
</head>
<body>
<div>
<p onMouseout="hideaway('subm1')" onMouseover="keepit('subm1')">
<a href="#" onClick="showdown('subm1'); return false;">メニュー1</a>
<span id="subm1" style="display: none;">
<a href="#">サブメニュー1-1</a><br>
<a href="#">サブメニュー1-2</a>
</span>
</p>
<p onMouseout="hideaway('subm2')" onMouseover="keepit('subm2')">
<a href="#" onClick="showdown('subm2'); return false;">メニュー2</a>
<span id="subm2" style="display: none;">
<a href="#">サブメニュー2-1</a><br>
<a href="#">サブメニュー2-2</a>
</span>
</p>
<p onMouseout="hideaway('subm3')" onMouseover="keepit('subm3')">
<a href="#" onClick="showdown('subm3'); return false;">メニュー3</a>
<span id="subm3" style="display: none;">
<a href="#">サブメニュー3-1</a><br>
<a href="#">サブメニュー3-2</a>
</span>
</p>
</div>

</body>
</html>

サブメニューについては、ここではspan要素に入れて、それをdisplay:none;で隠してあります。 この要素には、必ずidを設定する必要があります。
メニューの方は、a要素でクリックするとサブメニューを表示させるようにしてあります。
これらのメニューをまとめてp要素に入れて、このp要素からマウスが離れたら、サブメニューが2秒後に隠れるように仕掛け、またこのp要素の上にポインタが戻ってきた時にはサブメニューを隠す処理を破棄するようにしてあります。

スクリプトにも説明を入れましたが、それぞれの関数は、
「showdown('表示するspan要素のID')」:指定のサブメニューを表示させる
「hideaway('隠すspan要素のID')」:指定のサブメニューを隠す
「keepit('表示させ続けるspan要素のID')」:指定のサブメニューを隠す処理を破棄する
このような処理をまとめてあります。

この他の点については、JavaScriptの解説書や解説サイトなどで確認してみてください。
とりあえず、WinMe上のIE6、Netscape7.1で動作を確認してあります。 Netscape4.xx以前などでは動作しないかもしれません。

参考になれば幸いです。

ちょっと作ってみました。 こういうものでは、いかがでしょうか。

<html>
<head>
<title></title>
<script type="text/javascript"><!--
var HD= new Array();

function showdown(tgt){//サブメニューの表示調整
if (document.getElementById){
tar=document.getElementById(tgt);
if(tar.style.display=="block"){//サブメニューが表示されている時は隠す
tar.style.display="none"
}
else {//サブメニューが表示されていなければ、表示させる
tar.style.display="block";
}...続きを読む


人気Q&Aランキング

おすすめ情報