- 締切済み
ヘッダー部フッター部の固定とスライドメニュー
はじめまして。 表題のように、スマホ風に、ヘッダー部、フッター部を固定とし、スライドメニューが出るようにしたいと考えています。 <div id="content" style="position:absolute;"> 本分 </div> <div id="header" style="position:fixed;"> <p>ヘッダー部 固定</p> </div> <div id="footer" style="position:fixed;"> <p>フッター部 固定</p> </div> 画像は、上記ソースを基に、フッター部とヘッタ―部を固定した状態ですが、 下記URLにあるような、スライドメニューを加えようとしているのですが、 いずれも正常に動いてくれません。 http://shibuso.github.io/side_menu_test/jquerymobile.html このスライドメニューも、複数のプラグインがあるようですが、ここ丸二日、色々なものを試していますが、いずれも失敗の連続です。 お忙しいとは思いますが、アドバイスのほど頂戴出来れば幸いです。 宜しくお願い致します。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
jQueryを使用するのであれば、参照URLをご覧ください！
http://shibuso.github.io/side_menu_test/jquerymobile.htmlのソースを見ると、以下のようになっています。 head内で、bootstrapのフレームワークとJQueryのscriptを、読み込んでいることに気づかれるのでは？ この二つを読み込まないと、同じような動作は望めません！ 同じするなら、アコーディオンメニューにされたほうがユーザビリティが高いと思いますが？・・・ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <title>サイドメニューテスト(jQuery Mobile)</title> <link rel="stylesheet" href="./stylesheet/bootstrap.min.css"> <link rel="stylesheet" href="./stylesheet/bootstrap-responsive.min.css"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="./javascript/bootstrap.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> bootstrapは、レスポンシブに対応をしているので、そのscriptを読み込んでいるようです。 もっと独自の動きをつけるのであれば、Scriptではなく、サーバーサイドのプログラミングをされたほうがいいと思います。 JAVAあるいは、ＰＨＰあたりかな？・・・ Scriptの場合は、ユーザーが動作を禁止していれば、まったく意味をなさないものになることを、知る必要もあるでしょう。
お礼
nanden1548さん はじめまして。貴重なアドバイスをありがとうございます。 今回の質問、固定したヘッダー部にサイドメニューを開くボタンを設置し、それにて開閉をしたいと考えていたのですが、それぞれ単体では動くものの（javascript等のソースは読込み済み）、2つを合わせると動かないという状況になっています。 ２つを合わせたソースを見れば「動かなくて当然？動かすにも無理がある？」とは思うものの、 ・ヘッタ―部フッター部を固定 ・ヘッダー部に設置したボタンでサイドメニューを展開。 という方法が他に見当たらなく、質問した次第です。 お勧めアコーディオンメニューとはどのようなものがありますでしょうか？ お教え頂けると幸いです。
お礼
nanden1548さん こんばんは。 アコーディオンとは縦に開閉するものなのですね。 質問に書いたような仕組みはやはり難しいのでしょうか・・・ 忙しい中ご親切にありがとうございました！