ヘッダー部フッター部の固定とスライドメニュー

締切済

質問者：a4_chapp
質問日時：2014/03/02 01:00
回答数：2件

はじめまして。
表題のように、スマホ風に、ヘッダー部、フッター部を固定とし、スライドメニューが出るようにしたいと考えています。

<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/jquerymo …

このスライドメニューも、複数のプラグインがあるようですが、ここ丸二日、色々なものを試していますが、いずれも失敗の連続です。

お忙しいとは思いますが、アドバイスのほど頂戴出来れば幸いです。
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： nanden1548
回答日時：2014/03/02 22:32

http://shibuso.github.io/side_menu_test/jquerymo …のソースを見ると、以下のようになっています。
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.mobil … />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></sc …
<script src="./javascript/bootstrap.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobil …
</head>

bootstrapは、レスポンシブに対応をしているので、そのscriptを読み込んでいるようです。
もっと独自の動きをつけるのであれば、Scriptではなく、サーバーサイドのプログラミングをされたほうがいいと思います。

JAVAあるいは、ＰＨＰあたりかな？・・・
Scriptの場合は、ユーザーが動作を禁止していれば、まったく意味をなさないものになることを、知る必要もあるでしょう。

- 0
- 件

通報する

この回答へのお礼

nanden1548さん

はじめまして。貴重なアドバイスをありがとうございます。

今回の質問、固定したヘッダー部にサイドメニューを開くボタンを設置し、それにて開閉をしたいと考えていたのですが、それぞれ単体では動くものの（javascript等のソースは読込み済み）、2つを合わせると動かないという状況になっています。

２つを合わせたソースを見れば「動かなくて当然？動かすにも無理がある？」とは思うものの、

・ヘッタ―部フッター部を固定
・ヘッダー部に設置したボタンでサイドメニューを展開。

という方法が他に見当たらなく、質問した次第です。

お勧めアコーディオンメニューとはどのようなものがありますでしょうか？
お教え頂けると幸いです。