- ベストアンサー
メニューバーのカスタマイズ
- Javascriptを使用して折りたたみ型のメニューバーをカスタマイズする方法について教えてください。
- サンプルコードを入手したものの、知識が不足していて進めることができません。
- 特に、折りたたんだ状態で一部が見えるようにし、それに触れるとバーが横展開するような状態を作りたいです。
- shuu07
- お礼率47% (10/21)
- JavaScript
- 回答数8
- ありがとう数4
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
やっぱりmootools.jsの中身は、解析する気になれませんでした。 demo.js の中の $('....').addEvent('click', function(e){～ の'click'部分を、'mouseover'とかマウス関連のイベントに 書き換えれば、触れる(?)と展開できるようになると思います。
その他の回答 (7)
<!DOCTYPE ～ </script> の部分をエディタにコピペして、ファイル名は適当にtest.html にしてブラウザで見てみるだけなんだけど
お礼
あ、、ほんとですね！ 大変失礼致しました。 完全に僕の勘違いですね。。。 ちなみに問題なく作動します。ありがとうございます！！ 早速利用させていただいております。
No3が要望に近くない？ 実行してみましたか？ （読み込みに時間がかかると問題があるようですが、再読み込みすると動くのだけれど・・・） no1はプログラムを普通に書いて no2は短くして no3は現在勉強中のオブジェクト指向的な書き方 メニューにあたる部分をdivでくくって new Slide('メニューのDIVのID'); するだけなんだけど・・・
ひとつ逆に教えてほしい。 No.3のどこが駄目だったの？ 今後の参考にしたい
補足
NO1~NO3まで、メモ代わりに利用されているように感じたからです。 （あのコードはpipiさんの勉強中のコードなのですよね？） [ 今、オブジェクト指向の勉強中。「最初からこうかけよ！」ってことで。＞自分に ] と書かれてましても、私にはよくわからないことですし、学びたいことに対する回答をいただいたのかもしれませんが、私には知識不足ですのでよくわかりませんでした。
コードを解析するより、早いかなぁ～と思ってね 気を悪くしたなら謝るよ。ごめんなさい。
今、オブジェクト指向の勉強中。「最初からこうかけよ！」ってことで。＞自分に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Slider</title> <style type="text/css"> .mblue { border:1px #88f solid; background-color:#ddf; } .mred { border:1px #f88 solid; background-color:#fdd; } .mgreen { border:1px #8f8 solid; background-color:#dfd; } </style> <div id="a" class="mblue">ここに適当なメニュー１</div> <div id="b" class="mred">ここに適当なメニュー２</div> <div id="c" class="mgreen">ここに適当なメニュー３</div> <script type="text/javascript"> //@cc_on function Slide(){ this.init.apply(this, arguments); this.close() } Slide.prototype.init = function (eId) { var e = document.getElementById(eId); this.style = e.style; this.limit = 50; this.mode = 2; this.width = e.offsetWidth; this.start = 0; e.style.position = 'relative'; e.style.left = '0px'; e./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', (function (f) { return function () { f.open.call(f); }; })(this), false); e./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseout', (function (f) { return function () { f.close.call(f); }; })(this), false); } Slide.prototype.open = function () { if (this.mode == 0) { this.mode = 1; this.start = this.width; } if (this.mode == 1) { this.start -= this.start / 5; if (this.start < 1) { this.start = 0; this.mode = 2; } this.style.left = - this.start + 'px'; } if (this.mode == 1) { setTimeout ( (function (f) { return function () { f.open.call(f); }; })(this), 20); } } Slide.prototype.close = function () { if (this.mode == 2) { this.mode = 3; this.start = this.width - this.limit; } if (this.mode == 3) { this.start -= this.start / 5; if (this.start < 1) { this.start = 0; this.mode = 0; } this.style.left = - this.width + this.start + this.limit + 'px'; } if (this.mode == 3) { setTimeout ( (function (f) { return function () { f.close.call(f); }; })(this), 20); } } new Slide('a'); new Slide('b'); new Slide('c'); </script>
補足
このコードから学べということでしょうか？ それとも、メモがわりでしょうか。 私がURLを記載したページからソースをDLしてそれをいじっているので、 そのソースが初心者の私にとってはキモとなっています。 （理解が薄くトンチンカンなこといっている場合はご容赦を。）
ちょっとだけ見直し <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Slider</title> <style type="text/css"> .mblue { border:1px #88f solid; background-color:#ddf; } .mred { border:1px #f88 solid; background-color:#fdd; } .mgreen { border:1px #8f8 solid; background-color:#dfd; } </style> <div id="a" class="mblue">ここに適当なメニュー１</div> <div id="b" class="mred">ここに適当なメニュー２</div> <div id="c" class="mgreen">ここに適当なメニュー３</div> <script type="text/javascript"> //@cc_on function Slide(eId){ this.open=function() { if(m==0){m=1;s=w}if(m==1){s-=s/5;if(s<1){s=0;m=2}es.left=-s+'px'} if (m==1)setTimeout((function(f){return function(){f.open.call(f)}})(this),20) } this.close=function() { if(m==2){s=w-l;m=3}if(m==3){s-=s/5;if(s<1)s=m=0;es.left=-w+s+l+'px'} if(m==3)setTimeout((function(f){return function(){f.close.call(f)}})(this),20) } var l=50,m=2,s,e=document.getElementById(eId),w=e.offsetWidth,es=e.style; es.position='relative';es.left='0px';this.close() e./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', (function(f){return function(){f.open.call(f)}})(this),false) e./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseout', (function(f){return function(){f.close.call(f)}})(this),false) } new Slide('a'); new Slide('b'); new Slide('c'); </script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Slider</title> <style type="text/css"> .mblue { border:1px #88f solid; background-color:#ddf; } .mred { border:1px #f88 solid; background-color:#fdd; } .mgreen { border:1px #8f8 solid; background-color:#dfd; } </style> <div id="a" class="mblue"> ここに適当なメニュー１ </div> <div id="b" class="mred"> ここに適当なメニュー２ </div> <div id="c" class="mgreen"> ここに適当なメニュー３ </div> <script type="text/javascript"> //@cc_on function Slide(eId){ this.open = function(f) { if (f) { if(m) return; m = 1; s = w; } s -= s/5; if (s<0) s = 0; e.style.left = -s+ 'px'; if (s>1) setTimeout( (function (f_){ return function(){ f_.open.call(f_); }; })(this) ,20); else m=2; } this.close = function(f) { if (f) { if(m!=2) return; m = 3; s = w; } s -= s/5; if (s<0) s = 0; e.style.left = -w + s+ l + 'px'; if (s>1) setTimeout( (function (f_){ return function(){ f_.close.call(f_); }; })(this) ,20); else m=0; } var e = document.getElementById(eId); var w = e.offsetWidth; var s; var l = 50; var m = 2; with (e.style){ position = 'relative'; left = '0px'; } addEvent (e, 'mouseover', (function(f_){ return function(){ f_.open.call(f_,true); }; })(this), false); addEvent (e, 'mouseout', (function(f_){ return function(){ f_.close.call(f_,true); }; })(this), false); this.close(true); } function addEvent(element, evt, eventHandler, flag){ element./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, flag); } new Slide('a'); new Slide('b'); new Slide('c'); </script>
お礼
アドバイスありがとうございます！！！ 助かります。おっしゃるとおり、mouseoverにて触れるとバーが出るようになりました。 この状態ですと、メニューバーをcloseした時にすべて消えてしまうのですが、「少しだけメニューバーの端を出しておいて、触れることができる」ようにしたいと、希望しています。（つまりUNIQLOCKのようにしたい) もしご都合、お時間あれば教えていただけますでしょうか。 >やっぱりmootools.jsの中身は、解析する気になれませんでした。 そうですよね・・・おいそがしいところ、ありがとうございました。