質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

268閲覧

ナビゲーションバーとドロップダウンメニュー、両方の位置を固定するには?

BetterEveryday

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/05/23 10:54

編集2023/05/26 22:35

前提・実現したいこと

  • 要件 1. ナビゲーションバーの位置を固定する (ドロップダウンメニューが展開されてもナビゲーションバーのメニュー位置は動かず操作可能)

  • 要件 2. ドロップダウンメニューの開始位置は当該メニューの真下

  • 要件 3. ナビゲーションバーは長くする

イメージ説明

発生している問題・エラーメッセージ

.Mdropdown-content に position: absolute; を

要件説明追加するとイメージ説明削除するとイメージ説明イメージ説明
1ナビゲーションバーの位置を固定○ (ナビゲーションメニューが分断されない)× (分断される)
2ドロップダウンメニューの開始位置は当該メニューの真下× (ナビゲーションバーに追随しない)○ (追随する)
3ナビゲーションバーは長くする○ (メニュー量に関わらず余白大)× (メニュー文言の長さのみ)

該当のソースコード

html

1位置 : メニュー挿入前 2<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop"> 3 <div id="DeltaHorizontalQuickLaunch" role="navigation"> 4 <div class="ms-quicklaunchouter"> 5 <div class="ms-quickLaunch"> 6 </div> 7 </div> 8 </div> 9</div> 10位置 : メニュー挿入後

CSS

1body {margin:0;font-family:Arial} 2 3.topnav { 4 overflow: hidden; 5 background-color: #5A7FA2; 6} 7 8.topnav a { 9 float: left; 10 display: block; 11 color: #f2f2f2; 12 text-align: center; 13 padding: 14px 16px; 14 text-decoration: none; 15 font-size: 17px; 16} 17 18.active { 19 background-color: #4CAF50; 20 color: white; 21} 22 23.topnav .icon { 24 display: none; 25} 26 27.dropdown { 28 float: left; 29 overflow: hidden; 30} 31 32.dropdown .dropbtn { 33 font-size: 17px; 34 border: none; 35 outline: none; 36 color: white; 37 padding: 14px 16px; 38 background-color: inherit; 39 font-family: inherit; 40 margin: 0; 41} 42 43.dropdown-content { 44 display: none; 45 position: absolute; 46 background-color: #f9f9f9; 47 min-width: 160px; 48 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 49 z-index: 1; 50} 51 52.dropdown-content a { 53 float: none; 54 color: black; 55 padding: 12px 16px; 56 text-decoration: none; 57 display: block; 58 text-align: left; 59} 60 61.topnav a:hover, .dropdown:hover .dropbtn { 62 background-color: #555; 63} 64 65.dropdown-content a:hover { 66 background-color: #ddd; 67 color: black; 68} 69 70.dropdown:hover .dropdown-content { 71 display: block; 72} 73 74/*MEGA-MENU*/ 75* { 76 box-sizing: border-box; 77} 78 79.Mnavbar { 80 overflow: hidden; 81 background-color: #333; 82 font-family: Arial, Helvetica, sans-serif; 83} 84 85.Mnavbar a { 86 float: left; 87 font-size: 16px; 88 color: white; 89 text-align: center; 90 padding: 14px 16px; 91 text-decoration: none; 92} 93 94.Mdropdown { 95 float: left; 96 overflow: hidden; 97} 98 99.Mdropdown .Mdropbtn { 100 font-size: 16px; 101 border: none; 102 outline: none; 103 color: white; 104 padding: 14px 16px; 105 background-color: inherit; 106 font: inherit; 107 margin: 0; 108} 109 110.Mnavbar a:hover, .Mdropdown:hover .Mdropbtn { 111 background-color: #555; 112} 113 114.Mdropdown-content { 115 display: none; 116 position: absolute; 117 background-color: #f9f9f9; 118 width: 100%; 119 left: 0; 120 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 121 z-index: 1; 122} 123 124.Mdropdown-content .Mheader { 125 float: left; 126 background: #555; 127 padding: 16px; 128 color: white; 129 overflow: hidden; 130} 131 132.Mdropdown:hover .Mdropdown-content { 133 display: block; 134} 135 136/* Create three equal columns that floats next to each other */ 137.Mcolumn { 138 margin: 0 -16px -16px; 139 padding: 10px; 140 background-color: #ccc; 141 height: 250px; 142} 143 144.Mcolumn a { 145 float: none; 146 color: black; 147 padding: 16px; 148 text-decoration: none; 149 display: block; 150 text-align: left; 151} 152 153.Mcolumn a:hover { 154 background-color: #ddd; 155} 156 157.Mheader:hover { 158 color: orange; 159} 160 161/* Clear floats after the columns */ 162.Mrow:after { 163 content: ""; 164 display: table; 165 clear: both; 166}

JavaScript

1let myMockListData = [ 2 { 3 URL: "/siteA.aspx", 4 URLNAME: "Home", 5 dropDown: "no", 6 id: "home" 7 }, 8 { URL: "/siteF.aspx", URLNAME: "Site F", dropDown: "training", id: "Training" }, 9 { 10 URL: "/siteA.aspx", 11 URLNAME: "Site A", 12 dropDown: "yes", 13 id: "SiteA" 14 } 15]; 16 17var subList = [ 18 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" }, 19 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" }, 20 { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" } 21]; 22 23var megaMenuCategory = [ 24 { category: "DT", url: "www.gmail.com" }, 25 { category: "親要素の文字数が多いとレイアウトが崩れる", url: "www.gmail.com" }, 26 { category: "IT", url: "www.gmail.com" } 27]; 28 29var categoryMenu = [ 30 { category: "DT", menuItem: "DT-BT", menuUrl: "wwww.gmail.com" }, 31 { category: "DT", menuItem: "DT-SE", menuUrl: "wwww.gmail.com" }, 32 { category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" }, 33 { category: "親要素の文字数が多いとレイアウトが崩れる", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" }, 34 { category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" }, 35 { category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" } 36]; 37 38createNavigation(myMockListData); 39 40function myFunction() { 41 var x = document.getElementById("myTopnav"); 42 if (x.className === "topnav") { 43 x.className += " responsive"; 44 } else { 45 x.className = "topnav"; 46 } 47} 48 49function createNavigation(navData) { 50 var headerElement = document.getElementById("DeltaHorizontalQuickLaunch"); 51 headerElement.insertAdjacentHTML('afterend', '<div class="topnav" id="myTopnav"><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></div>'); 52 var topNav = document.getElementById("myTopnav"); 53 for (var x = 0; x < navData.length; x++) { 54 if (navData[x].dropDown === "no") { 55 var aLink = _createEl("a"); 56 var aTextNode = document.createTextNode(navData[x].URLNAME); 57 aLink.href = navData[x].URL; 58 aLink.appendChild(aTextNode); 59 topNav.appendChild(aLink); 60 } else if (navData[x].dropDown === "yes") { 61 var buildSubNavigation; 62 buildSubNavigation = buildSubNavBar(navData[x].id); 63 topNav.appendChild(buildSubNavigation); 64 } else { 65 //build megamenu 66 var buildSubNavigation; 67 buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id); 68 } 69 } 70} 71 72function buildDirectorateMegaMenu(navDataID) { 73 var buildNav; 74 var headerElement = document.getElementById("DeltaHorizontalQuickLaunch"); 75 var topNav = document.getElementById("myTopnav"); 76 buildNav = buildSubNavBar(navDataID, "training"); //Build mega menu and attach in buildSubNavBar() 77 headerElement.appendChild(buildNav); 78 topNav.appendChild(buildNav); 79} 80 81function buildSubNavBar(subNavID, isDirectorate) { 82 //create div and add dropdown class 83 var ddDiv = _createEl("div"); 84 if(isDirectorate === "training"){ 85 ddDiv.classList.add("Mdropdown"); 86 }else{ 87 ddDiv.classList.add("dropdown"); 88 } 89 //create button and add text 90 var btn = _createEl("button"); 91 if(isDirectorate === "training"){ 92 btn.classList.add("Mdropbtn"); 93 }else{ 94 btn.classList.add("dropbtn"); 95 } 96 var btnText = document.createTextNode(subNavID); 97 //append the text to the button 98 btn.appendChild(btnText); 99 100 //create i tag and add "fa fa-caret-down" classes 101 var itag = _createEl("i"); 102 itag.classList.add("fa"); 103 itag.classList.add("fa-caret-down"); 104 itag.classList.add("fa-fw"); 105 btn.appendChild(itag); 106 ddDiv.appendChild(btn); 107 108 var ddContent = _createEl("div"); 109 ddContent.classList.add("dropdown-content"); 110 for (var i = 0; i < subList.length; i++) { 111 if (subList[i].id === subNavID && subList[i].id !== "Training") { 112 var li = _createEl("li"); 113 var a = _createEl("a"); 114 var aTextNode = document.createTextNode(subList[i].URLNAME); 115 116 a.href = subList[i].subURL; 117 a.appendChild(aTextNode); 118 ddContent.appendChild(a); 119 } 120 } 121 122 if(isDirectorate === "training"){ 123 //create div and add dropdown class 124 var megaDivDropDown = _createEl("div"); 125 megaDivDropDown.classList.add("dropdown"); 126 127 var megaBtn = _createEl("button"); 128 megaBtn.classList.add("dropbtn"); 129 130 megaDivDropDown.appendChild(megaBtn); 131 var megaI = _createEl("i"); 132 megaI.classList.add("fa"); 133 megaI.classList.add("fa-caret-down"); 134 135 megaBtn.appendChild(megaI); 136 137 var megaDDivContent = _createEl("div"); 138 megaDDivContent.classList.add("Mdropdown-content"); 139 140 //Loop through categories & sub-categories items 141 for (var i = 0; i < megaMenuCategory.length; i++) { 142 143 var headerDiv = _createEl("div"); 144 headerDiv.classList.add("Mheader"); 145 146 var megaH2 = _createEl("h2"); 147 megaH2.appendChild(document.createTextNode(megaMenuCategory[i].category)); 148 headerDiv.appendChild(megaH2); 149 150 var megaDDivRow = _createEl("div"); 151 megaDDivRow.classList.add("Mrow"); 152 153 var megaDivCol = _createEl("div"); 154 megaDivCol.classList.add("Mcolumn"); 155 var colHr = _createEl("h3"); 156 colHr.appendChild(document.createTextNode("")); 157 megaDivCol.appendChild(colHr); 158 for (var x = 0; x < categoryMenu.length; x++) { 159 if (megaMenuCategory[i].category === categoryMenu[x].category) { 160 var colAnchor = _createEl("a"); 161 colAnchor.href = categoryMenu[x].menuUrl; 162 colAnchor.appendChild(document.createTextNode(categoryMenu[x].menuItem)); 163 164 megaDivCol.appendChild(colAnchor); 165 megaDDivRow.appendChild(megaDivCol); 166 headerDiv.appendChild(megaDDivRow); 167 megaDDivContent.appendChild(headerDiv); 168 ddDiv.appendChild(megaDDivContent); 169 } 170 } 171 console.log("megaDdivRow:"); 172 console.log(ddDiv); 173 } 174 } 175 ddDiv.appendChild(ddContent); 176 return ddDiv; 177} 178function _createEl(el) { 179 return document.createElement(el); 180}

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こうするとどうでしょうか。

css

1 .Mdropdown-content { 2 display: none; 3 position: absolute; 4 background-color: #f9f9f9; 5 /* width: 100%; */ 6 width: auto; 7 /* left: 0; */ 8 left: auto; 9 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 10 z-index: 1; 11 }

投稿2023/05/26 04:44

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BetterEveryday

2023/05/26 13:35

Lhankor_Mhy さま、確認遅れまして申し訳ございません。 教示いただきました、.Mdropdown-content への width と left の変更のみで 3 要件を実現できました。 (css のみの解決は自分では思いつかず、JavaScript で .dropdown の配下に .Mheader や .Mrow、.Mcolumn を追加する、 大規模修正になっていました。) 私の問題解決のために貴重なお時間とお気持ちをいただきまして どうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問