- 締切済み
ポップアップメニューをつくるには
メニューのところにマウスを乗せたとき、メニューのすぐ下にリンクが出る形のポップアップメニューを作りたいと思っています。 Dreamweaver2004を使ってるので、ソフトの機能でポップアップメニューを作れますが、これでやると長々と分かりにくい文がついてくるので、できれば他の方法でやりたいです。 もっとすっきりしたプログラムで、マウスを乗せると出てきてはずすと消えるタイプのポップアップメニューの参考例はないでしょうか？ ずっと探していますが、どうしても見つけることができません。 HPなど教えていただけるとありがたいです。 よろしくお願いします。
- mutu560
- お礼率76% (109/142)
- JavaScript
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
みんなの回答
Firefoxで動かない件を修正。CSSの指定も外してシンプルにしました new setPopupMenu( きっかけ, イベント, 開く窓); 開く窓は、最初から消しておけば使えます！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .hid { display:none; } .box { border:2px #ddd outset; background-color:#eee; width:400px; position:absolute; } p span:hover{ color:red; text-decoration:underline; } </style> <p>質問者は、<span title="詳細が表示されます" id="a" >？？？？？？？</span>と思う</p> <div id="b" class="box hid"> <a href="#" onClick="">まったくその通り！</a><br> <a href="#" onClick="">そんなことはない！</a><br> <a href="#" onClick="">登録日に質問する人ほど！</a><br> </div> <p>回答者は、<span title="詳細が表示されます" id="c">？？？？？？？</span>で専門家となのることができる</p> <div id="d" class="box hid"> <a href="#" onClick="">知ったかぶり</a><br> <a href="#" onClick="">第一種情報処理保持者</a><br> <a href="#" onClick="">第二種情報処理保持者</a><br> </div> <script type="text/javascript"> //@cc_on new setPopupMenu( 'a', 'mouseover', 'b' ); new setPopupMenu( 'c', 'click', 'd' ); function setPopupMenu( triggerId, evt, popmenuId ){ this.check = function(){ var obj = arguments.callee.caller.arguments[0].target || window.event.srcElement; if( !pchk( obj, this.pobj ) && this.flag ) this.pobj.style.display = ( this.flag = 0, 'none' ); if( this.flag ==0 && obj == this.tobj && this.pobj.style.display != 'display' ) this.pobj.style.display = ( this.flag = 1, 'block' ); } this.flag = 0; this.tobj = getId( triggerId ); this.pobj = getId( popmenuId ); this.pobj.style.top = this.tobj.offsetTop + this.tobj.offsetHeight + 'px'; this.pobj.style.left= this.tobj.offsetLeft + 'px'; addEvent( window.document, evt, (function(f_){ return function(){ f_.check.call(f_); }})(this) ); function pchk( c, pobj ){ do if( c == pobj ) return c; while( c = c.parentNode ) return false } function getId( o ) { return ( typeof( o ) == 'string' )? document.getElementById( o ): o } } function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } </script>
#5です。Firefoxで動きませんでした！再考します。
遅ればせながら、自分なりに考えてみました オンマウスならそこそこ正常に動作するのですが オンクリックだと、一度ポップメニューをクリックしてから 他をクリックしないと消えません。（検討中！） また文章が途切れたところでBODY領域が終わっているので それ以外（つまり「回答者は～」の行より下は、クリックしても トリガーの対象とはなりません。;_; もちろんオブジェクト指向？的な考え方で作ってあるので 複数動作が可能です。（でも間違いを指摘してくれる人がいないので 正しいのかは不明です） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .hid { display:none; } .box { border:2px #ddd outset; background-color:#eee; width:400px; position:absolute; } </style> <p>質問者は、<span title="詳細が表示されます" id="a">？？？？？？？</span>と思う</p> <div id="b" class="box hid popmenu"> <a href="#" onClick="">まったくその通り！</a><br> <a href="#" onClick="">そんなことはない！</a><br> <a href="#" onClick="">登録日に質問する人ほど！</a><br> </div> <p>回答者は、<span title="詳細が表示されます" id="c">？？？？？？？</span>で専門家となのることができる</p> <div id="d" class="box hid popmenu"> <a href="#" onClick="">知ったかぶり</a><br> <a href="#" onClick="">第一種情報処理保持者</a><br> <a href="#" onClick="">第二種情報処理保持者</a><br> </div> <script type="text/javascript"> //@cc_on new setPopupMenu( 'a', 'mouseover', 'b' ); new setPopupMenu( 'c', 'click', 'd' ); function setPopupMenu( triggerId, evt, popmenuId ){ this.check = function( evt ){ if( !evt ) evt = event; var obj = evt.target || event.srcElement; if( !parentSearchCSS( obj, 'popmenu' ) && this.flag==2){ this.pobj.style.display = 'none'; this.flag = 0; } if( this.flag ==1 && parentSearchCSS( obj, 'popmenu' )) this.flag=2; if( obj == this.tobj ){ if( this.flag==1 ) return; else this.flag=1; if( this.pobj.style.display != 'display' ){ with( this.pobj.style ){ display = 'block'; top = document.body.scrollTop + evt.clientY + 'px'; left= document.body.scrollLeft + evt.clientX + 'px'; } } this.flag =1; } } this.flag = 0; this.tobj = ( typeof( triggerId ) == 'string' )? document.getElementById( triggerId ): triggerId; this.pobj = ( typeof( popmenuId ) == 'string' )? document.getElementById( popmenuId ): popmenuId; addEvent( document.body, evt, (function(f_){ return function(){ f_.check.call(f_); }})(this) ); function parentSearchCSS( element, css ){ do if( element.className && element.className.match( RegExp( css ) ) ) return element; while( element = element.parentNode ) return false; } } function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } </script>
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 使おうとなさっているもので、高さを決める要因となっているものとしては 1.ボーダーの上枠 2.pdding 3.文字の高さ（大きさ） があります。 その他に、明示されていませんが 4.margin がありますね。 これらを調節すればよろしいと思います。 なお、全体の高さを指定する方法として、height指定がありますが、ブラウザによっては1行以下の大きさに指定しても、最低1行を確保しようとするみたいです。 height指定で制御する場合は、合わせてoverflowも設定することで指定通りの高さにすることが可能です。 大して知らない私が言うのもなんですが、CSSについても勉強してください。
- ryupyon
- ベストアンサー率17% (29/163)
噴出しのサイズを変えたいんですよね？ それでしたら、 a:hover .setumei { display: block; background-color: #e79221; padding:3px; color:#ffffff; border-top:#ffffff solid 10px; /*フキダシ用*/ border-left:#e79221 solid 5px; /*フキダシ用*/ } この部分の｛から｝の間に 高さなら height: サイズpx; 幅なら width: サイズpx; 文字の大きさなら font-size: サイズpx; を追加する事で変更できますよ。
- fujillin
- ベストアンサー率61% (1594/2576)
ネット検索すればたくさんヒットするはずです。 主な方法は （1）質問のようなスクリプトを利用する方法 （2）CSSをの擬似クラスを利用する方法 ですが、(2)の方を探してみればよろしいかと…
- yyr446
- ベストアンサー率65% (870/1330)
ポップアップじゃないけれど、ここについ最近投稿された 「滑らかに開閉するメニューを作りたいのですが。」http://oshiete1.goo.ne.jp/qa4503833.html で紹介されている滑らかに開閉するメニュー を使ったらいかがでしょう
お礼
ありがとうございます。 実はここもチェック入れていました。 大体こんな感じを求めていましたが、メニューが下がるのが少し遅いのと、やっぱり文が長くなるのでどうしようか悩んでいました。 やはりjavascriptで書くと長くなってしまうのですね。
お礼
ありがとうございます。 （１）は大体探しつくしたのではないかと思い、 （２）の方で探してみました。 すごく簡単でよさそうなページを見つけました。 http://www.k5.dion.ne.jp/~i-araki/css/popup.html この見本１をアレンジしようとしてみてるところですが、分からないところがあります。 a.hover.setumei で出てくるものの高さをもっと細くする方法です。 paddingなしにしても、高さを指定してみても、変化がないようです。 どうしたら変わるでしょうか？ 初歩的な質問ですみません。