メニューバーのカスタマイズ
- Javascriptを使用して折りたたみ型のメニューバーをカスタマイズする方法について教えてください。
- サンプルコードを入手したものの、知識が不足していて進めることができません。
- 特に、折りたたんだ状態で一部が見えるようにし、それに触れるとバーが横展開するような状態を作りたいです。
- ベストアンサー
メニューバーのカスタマイズ
javascriptについて教えてください。 いわゆる 折りたたみ型？のメニューバーを作成したく、 サンプルコードを入手したのですが知識が薄いため、進める事ができておりません。。 このページの内容です。slide in slide out でメニューバーを表示／非表示にしています。 http://demos.mootools.net/Fx.Slide 下のhorizon型の折りたたみ時に、以下の状態を作成したいのです。 １.メニューが少し見えるようにする（非表示は嫌なのです） 2.それに触れる（クリックでもOK)とバーが横展開する uniqlockのイメージに近いですね。 なんとか、ご指導いただけないでしょうか。 よろしくお願い致します。
- 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>
関連するQ&A
- メニューバーが特定のページで動作が止まります
みなさまこんにちは。 下記のURLを参考にjQueryを使ったナビゲーションメニューを設置しました。 http://tympanus.net/codrops/2010/01/17/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/ トップページをはじめとしてほとんどのページで正常に動作するのですが、 商品詳細ページでのみ、動作しません。 正常動作時は、ページの読み込み直後はすべてのアイコンが展開された状態で表示され、 一呼吸置いてメニューバーの下に格納されます。 商品詳細ページでは、アイコンが展開された状態で表示されたまま、 待ってもメニューバーの下に格納されません。 見よう見まねで設置しているため、原因を究明できず困っています。 何から試して原因を探ればよいでしょうか？ よろしくお願いいたします。
- 締切済み
- JavaScript
- エクセルのメニューバーの表示
エクセルのメニューバーの表示が、ファイル・表示・ヘルプだけになってしまいました。 （しかも、「表示」を展開しても、標準・改ページプレビュ・ヘッダとフッタ・ズームの４つしか展開されません。） また、ツールバーを右クリックしても「ユーザー設定」は灰色となり、そこから展開できません。 どのようにしたら、メニューバーがフルに表示されるでしょうか。
- ベストアンサー
- Windows XP
- InternetExplorereのメニューバー等を非表示にする方法
InternetExplorereのメニューバー等を非表示にする方法を教えて下さい。 JAVAScriptでwindow.openする際にメニューバー等を非表示にはできましたが、既に起動しているブラウザのバーを非表示にさせる事ができません。 お力添え頂けると助かります。
- 締切済み
- JavaScript
- InterfaceBuilderでメニューバー作成
XcodeのInterfaceBuilderで、メニューバーを新たに作る方法がわかりません。 Cocoaアプリケーションを新規で作成すると、MainMenu.xibの中にメニューバーが作成されていますが、 一旦このメニューバーを削除してしまった場合、どうやったら再作成できるのでしょうか？ オブジェクトライブラリ内のMenuを配置しても、ウィンドウ上部に表示されるメニューバーの形になりません。
- 締切済み
- その他（プログラミング・開発）
- メニューバーがおかしいです
「ファイル」や「編集」、「表示」といったものが表示されているメニューバーですが、クリックすると通常、左側が揃ってその下にサブメニューが表示されますよね？ ところが、私のパソコンでは右側が揃って表示されてしまいます。 さらにサブメニューの中でサブメニューがあるものでは、右側に追加で出てくるはずなのですが、これも左側にでてきていしまいます。 また、新たにアカウントを作成して確認してみたところ、通常通り表示されたので、何か設定でいじってしまったのだと思います。 どのように設定するればよいのかわかる方、教えていただけませんか？
- ベストアンサー
- Windows Vista
- access2000のメニューバー表示が上手く行きません
ＡＣＣＥＳＳ２０００を使ってソフトを作っているのですが、 メニューバーをマクロで作成し、 フォームプロパティ内のメニューバーに設定していて メニューバーの表示はされるのですが 次のフォームを開くボタンで開き、開いたフォームを閉じると、 何故だかメニューバーが一旦閉じて開いたように カクカクした動きをします 見難いのでその動きを止めたいのですが 何か良い方法は有りませんでしょうか。 無理ならメニューバーを表示させないように出来ないでしょうか。 宜しくお願い致します
- 締切済み
- その他(データベース)
- メニューバーなしのHTMLページの作り方を教えて
どなたかご存知でしたら教えてください。 配布用CDを作るのに、これまでAutorunするフォームを作成できるフリーソフトを使っていましたたが、これが、Windows7で動かないことが分かりましたので、次のCDでは、HTMLのページをAutoで開くようにしたいと思っています。 そこで、質問なのですが、指定サイズのメニューバーのないページの作り方をご存じないでしょうか？できれば、ブラウザの種類を問わずに、同じように動いて、できればマックOSでも同様になると有難いと思っています。 Javascriptで、可能性があるように思い、サイズ指定などのサンプルを真似て貼り付けたことがありますがダメでした。巧くいきそうでも、CDやHDのJavascriptを開くとブラウザでブロックされるようで、配布用CDではこれをスルーで着なければいけないと思っています。これも、<!-- saved from url=(0013)about:internet -->なるサンプルを貼り付けるとスルーすると呼んだのですが、使い方が分かりません。 是非、教えてください。よろしくお願いします。
- 締切済み
- JavaScript
- 自分のウィンドウをツールバーやメニューバーを出さずに表示するには？
JavaScriptで、サブウィンドウをツールバーやメニューバーを出さずに表示する方法は知っているんですが、 サブウィンドウじゃなく自分自身のウィンドウをツールバーやメニューバーを出さずに表示（更新）する方法がわかりません。 教えてください。
- ベストアンサー
- JavaScript
- メニューバーが表示されないウィンド
教えてください。 今よくあるメニューバーが表示されないウィンド（例えばhttp://for-u.presen.to/）このようなものは以前javascriptで作ってあると聞きましたが、どこで配付しているのかを、知っている方がいたら教えてください。
- ベストアンサー
- JavaScript
お礼
アドバイスありがとうございます！！！ 助かります。おっしゃるとおり、mouseoverにて触れるとバーが出るようになりました。 この状態ですと、メニューバーをcloseした時にすべて消えてしまうのですが、「少しだけメニューバーの端を出しておいて、触れることができる」ようにしたいと、希望しています。（つまりUNIQLOCKのようにしたい) もしご都合、お時間あれば教えていただけますでしょうか。 >やっぱりmootools.jsの中身は、解析する気になれませんでした。 そうですよね・・・おいそがしいところ、ありがとうございました。