teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードの追記を実施しました。

2019/09/16 02:23

投稿

konchi_.
konchi_.

スコア4

title CHANGED
File without changes
body CHANGED
@@ -19,4 +19,48 @@
19
19
 
20
20
  ハンバーガーメニュー自体の高さを調整したのですが、コンテンツより上にくるようにハンバーガーメニューが固定されるとやはりクリックが効かなくなります。
21
21
 
22
- ![イメージ説明](4a06b9ee24ccd2557901b497f7cf466e.png)
22
+ ![イメージ説明](4a06b9ee24ccd2557901b497f7cf466e.png)
23
+
24
+ ### ソース
25
+
26
+ Lhankor_Mhy様よりアドバイス頂きましたので追記させていただきます。ご指摘ありがとうございました。
27
+ htmlにはcssで指定した.mean-container .mean-bar のクラス指定箇所はありません。
28
+
29
+ ```css
30
+ .mean-container .mean-bar {/*----ナビの100%の枠--*/
31
+ float: left;
32
+ width: 100%;
33
+ padding: 4px 0;
34
+ min-height: 42px;
35
+ z-index: 9999;
36
+ position: absolute;/*--position: relative; へ変更すると画面ごと下がるメニューになります-*/
37
+ position: fixed;
38
+ overflow-y: auto;/*--ナビ内スクロールの記述①--*/
39
+ /*--height: 100%; ナビ内スクロールを実現させる為に必要だが、実装するとページ内のボタンがおせなくなる2019.913--*/
40
+ ```
41
+
42
+ jquery.meanmenu.js内にmean-container と記載があるのですがほぼ初めてjsに触れたので
43
+ 内容がほとんどわからず困っております・・・。長文記載となり申し訳ございません
44
+ ```java
45
+
46
+ // re-instate original nav (and call this on window.width functions)
47
+ var meanOriginal = function() {
48
+ jQuery('.mean-bar,.mean-push').remove();
49
+ jQuery(meanContainer).removeClass("mean-container");
50
+ jQuery(meanMenu).css('display', meanDisplay);
51
+ menuOn = false;
52
+ meanMenuExist = false;
53
+ jQuery(removeElements).removeClass('mean-remove');
54
+ };
55
+
56
+ // navigation reveal
57
+ var showMeanMenu = function() {
58
+ var meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos;
59
+ if (currentWidth <= meanScreenWidth) {
60
+ jQuery(removeElements).addClass('mean-remove');
61
+ meanMenuExist = true;
62
+ // add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container'
63
+ jQuery(meanContainer).addClass("mean-container");
64
+ jQuery('.mean-container').prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+meanStyles+'">Show Navigation</a><nav class="mean-nav"></nav></div>');
65
+
66
+ ```