web初心者です。分かりにくい部分多々あると思いますがよろしくお願いいたします。

ただいま1のCSSのみで実装できるメニューを実装していたのですが、こちらのメニューを2のようにクリックしたところ、最後にマウスオーバーしたところにアンダーバーをとどめておくような設定は可能でしょうか？

また普通にマウスホイールでスクロールした場合それに合わせメニューのアンダーバーの位置をスライドさせて今どこにいるかわかりやすくすること可能でしょうか？

======================= 参考サイト ========================

1：CSSのみで実装可能
https://theorthodoxworks.com/web-design/moving-menu-bar-with-mouse-hover/

2：jsで実装可能
http://weblabla.m-pokoj.net/nav02/

======================= 追記 ========================
初心者マークの存在を知らず大変申し訳ありません。
教えていただきありがとうございました。
下記に記載されている内容でおおよそすべてかと思います。

一部記載内容に問題がある為削除しています。
・CSSのリンク
・画像のalt
・メニューボタンのリンクなど

また以下の記述は固定で変更不可です。
・<div id="Contents">
・<div class="GridSet">
・<div class="Grid4">
・

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title></title>
5
6<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
7<script type="text/javascript" src="scroll.js"></script>
8
9<link rel="index" title="" />
10<link href="" type="text/css" rel="stylesheet" media="screen,print" />
11</head>
12
13<body>
14<!-- ============== content_start ============= -->
15<div id="Contents">
16<div class="GridSet">
17<div class="Grid4">
18
19<div class="product">
20
21<div id="header-fixed">
22<div id="header-bk">
23<a class="logo" href=""><img src=""></a>
24<nav class="global-nav">
25<p><a href="#top">Menu name</a></p>
26<p><a href="#content_1">Menu name</a></p>
27<p><a href="#content_2">Menu name</a></p>
28<p><a href="#content_3">Menu name</a></p>
29<p><a href="#content_4">Menu name</a></p>
30<span class="global-nav--bar"></span>
31</nav>
32</div>
33</div>
34
35<main id="top">
36<div id="content_1">
37</div>
38
39<div id="content_2">
40</div>
41
42<div id="content_3">
43</div>
44
45<div id="content_4">
46</div>
47</main>
48<div class="Section">
49<ul class="PageTop">
50</ul>
51</div><!--/Section-->
52
53</div><!--/product-->
54
55</div><!--/Grid4-->
56</div><!--/GridSet-->
57</div><!--/ContentsArea-->
58
59<!--#include virtual="/ssi/footer.txt"-->
60</body>
61</html>

CSS
1html{overflow-y: scroll;}
2
3ul li{
4	list-style-type: none;
5}
6
7img {
8	border: 0px;
9}
10
11body {
12	margin: 0;
13	padding: 0;
14	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
15	color: #333;
16	font-size: 100%;
17	line-height: 100%;
18	text-align: center;
19	background-color:#333333;
20	-webkit-text-size-adjust: 100%;
21	line-height: 160%;
22}
23
24sup {
25	margin: auto 1px auto;
26	font-size: 92.2%;
27	vertical-align: 0.15em;
28	line-height: 100%;
29}
30* html body sup {font-size: 105%;}
31*:first-child+html body sup {font-size: 105%;}
32
33/*========== h3タグ設定 ==========*/
34.title {
35	margin:0 0 25px 0;
36	padding:0;
37	line-height:40px;
38}
39
40/*========== 画像中央配置 ==========*/
41.img_center {
42	display: block;
43	margin-left: auto;
44	margin-right: auto;
45}
46
47/*========== ヘッダー ==========*/
48/* ヘッダーの固定 */
49div#header-fixed {
50	background-color:#000000;/* 背景色(黒) */
51	position: fixed;/* ヘッダーの固定 */
52	top: 0px;/* 位置(上0px) */
53	left: 0px;/* 位置(右0px) */
54	width: 100%;/* 横幅100%*/
55	height: 50px;/* 縦幅140px */
56} 
57 
58div#header-bk { 
59	background-color:#000000;/* 背景色(黒) */
60	margin:0 auto;
61	padding:0;
62	height:50px;/* 縦の高さ*/
63	width:965px;/* 横の幅*/
64}
65
66/*========== ヘッダーボタン ==========*/
67/* メニュー全体のスタイル */
68.global-nav {
69	position: relative;
70	width: 100%;
71	height: 50px;
72	line-height: 20px;
73	max-width: 720px;
74	margin: 0;
75	float: right;
76}
77
78/* 各メニューのスタイル */
79.global-nav p {
80	float: left;
81	width: 20%;
82}
83.global-nav p a {
84	display: block;
85	color: #ffffff;
86	text-decoration:none;
87}
88
89/* 黒いバーのスタイル */
90.global-nav--bar {
91	position: absolute;
92	display: block;
93	bottom: 0;
94	left: 0;
95	width: 20%;
96	height: 5px;
97	background: #ffffff;
98	-webkit-transition: all .5s;
99	transition: all .5s;
100}
101
102/* ホバーでバーの位置を変化 */
103.global-nav p:nth-child(1):hover ~ .global-nav--bar {
104	left: 0;
105}
106.global-nav p:nth-child(2):hover ~ .global-nav--bar {
107	left: 20%;
108}
109.global-nav p:nth-child(3):hover ~ .global-nav--bar {
110	left: 40%;
111}
112.global-nav p:nth-child(4):hover ~ .global-nav--bar {
113	left: 60%;
114}
115.global-nav p:nth-child(5):hover ~ .global-nav--bar {
116	left: 80%;
117}
118
119.logo{
120	margin:0;
121	padding:0;
122	height:50px;
123	width:200px;
124	float:left;
125}
126
127/*========== メインコンテンツ基本設定 ==========*/
128div.product {
129	margin:0;
130	padding:0;
131	width:965px;
132	display:inline-block;
133	font-size:83%;
134}
135
136/*========== メイン ==========*/
137main#top{
138	background-color:#333333;
139	margin:0;
140	padding:80px 0 0 0;
141}
142
143/*========== メインコンテンツ ==========*/
144div.top_img{
145	margin:0;
146	padding:0;
147	width:965px;
148	height:600px;
149}
150
151div#content_1 {
152	margin:0 30px 0 30px;
153	padding:60px 0 0 0;
154	width:905px;
155	height:500px;
156}
157
158div#content_2{
159	margin:0 30px 0 30px;
160	padding:60px 0 0 0;
161	width:905px;
162	height:500px;
163}
164
165div#content_3{
166	margin:0 30px 0 30px;
167	padding:60px 0 0 0;
168	width:905px;
169	height:500px;
170}
171
172div#content_4{
173	margin:0 30px 0 30px;
174	padding:60px 0 0 0;
175	width:905px;
176	height:500px;
177}
178
179div#content_5{
180	margin:0 30px 0 30px;
181	padding:60px 0 0 0;
182	width:905px;
183	height:500px;
184}
185
186/*========== 一覧 ==========*/
187
188.item_box1 {
189	margin:0;
190	padding:0;
191	width:905px;
192	height:173px;
193	font-size:0;
194}
195
196.item_box2 {
197	margin:10px 0 0 0;
198	padding:0;
199	width:905px;
200	height:173px;
201	font-size:0;
202}
203
204.item1 {
205	margin:0 10px 0 0;
206	padding:0;
207	width:173px;
208	height:173px;
209	line-height:173px;
210	float: left;
211}
212
213.item2 {
214	margin:0;
215	padding:0;
216	width:173px;
217	height:173px;
218	line-height:173px;
219	float: left;
220}
221
222/*==========リンクボタン ==========*/
223.button2 {
224	margin:15px 0 0 0;
225	padding:0px;
226	background-color: #C4C4C4;
227	color: #fff;
228	display: inline-block;
229	width:905px;
230	height:35px;
231	text-align: center;
232	text-decoration: none;
233	line-height:35px;
234	outline: none;
235}
236
237.button:hover{
238	background-color: #009933;
239}
240
241.button::before,
242.button::after {
243	position: absolute;
244	z-index: -1;
245	display: block;
246	content: '';
247}
248
249.button,
250.button::before,
251.button::after{
252	-webkit-box-sizing: border-box;
253	-moz-box-sizing: border-box;
254	box-sizing: border-box;
255	-webkit-transition: all .3s;
256	transition: all .3s;
257}
258
259/*========== フッター ==========*/
260#Footer {
261	clear: both;
262	min-width: 965px;
263	padding: 30px 0;
264	background-color: #e5e5e5;
265	overflow: hidden;
266	clear:both;
267}
268
269#Footer h2 {
270	margin: 0;
271	padding: 0;
272	border: none;
273	line-height: 0;
274	text-indent: -9999px;
275}
276
277#Footer ul {
278	width: 965px;
279	margin: 0 auto;
280	font-size: 67%;
281}
282
283#Footer li {
284	float: left;
285	padding: 0 10px;
286	border-left: solid 1px #bbb;
287	line-height: 1.5em;
288	vertical-align: top;
289}
290* html #Footer li {
291	position: relative;
292	z-index: 2;
293}
294*:first-child+html #Footer li {
295	position: relative;
296	z-index: 2;
297}
298
299#Footer li.FirstItem {
300	padding: 0 10px 0 0;
301	border-left: none;
302}
303#Footer li a:link,
304#Footer li a:visited {
305	color: #333;
306	text-decoration: none;
307}
308#Footer li a:hover,
309#Footer li a:active {
310	color: #b1000e;
311	text-decoration: underline;
312}
313
314#Footer p {
315	width: 965px;
316	margin: 0 auto;
317	font-size: 65%;
318	text-align: right;
319	line-height: 1.5em;
320	color: #333;
321	vertical-align: top;
322}
323* html #Footer p {margin: -1.5em auto 0;}
324*:first-child+html #Footer p {margin: -1.5em auto 0;}

scroll.js
1$(function(){
2   // #で始まるアンカーをクリックした場合に処理
3   $('a[href^="#"]').click(function() {
4      // スクロールの速度
5      var speed = 400; // ミリ秒
6      // アンカーの値取得
7      var href= $(this).attr("href");
8      // 移動先を取得
9      var target = $(href == "#" || href == "" ? 'html' : href);
10      // 移動先を数値で取得
11      var position = target.offset().top;
12      // スムーススクロール
13      $('body,html').animate({scrollTop:position}, speed, 'swing');
14      return false;
15   });
16});

Footer
1<div id="Footer">
2<h2</h2>
3<ul>
4<li class="FirstItem"><a href=""></a></li>
5<li><a href=""></a></li>
6<li><a href=""></a></li>
7<li><a href=""></a></li>
8</ul>
9</div><!--/FooterArea-->
10
11<!-- START OF SmartSource Data Collector TAG -->
12<!-- Copyright (c)-->
13<!-- Version: 9.4.0 -->
14<!-- Tag Builder Version: 3.3  -->
15<!-- Created:-->
16<script src="/scripts/webtrends.js" type="text/javascript"></script>
17<!-- ----------------------------------------------------------------------------------- -->
18<!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
19<!-- JavaScript include file can cause serious problems with cross-domain tracking.      -->
20<!-- ----------------------------------------------------------------------------------- -->
21<script type="text/javascript">
22//<![CDATA[
23var _tag=new WebTrends();
24_tag.dcsGetId();
25//]]>
26</script>
27<script type="text/javascript">
28//<![CDATA[
29_tag.dcsCustom=function(){
30// Add custom parameters here.
31//_tag.DCSext.param_name=param_value;
32}
33_tag.dcsCollect();
34//]]>
35</script>
36<noscript>
37<div></div>
38</noscript>
39<!-- END OF SmartSource Data Collector TAG -->

m.ts10806

2017/07/10 00:27 編集

実装中のソースコードもご提示ください。また初心者と名乗るのは結構なのですが、できれば質問投稿画面のタイトル左にある「初心者アイコン」もご利用ください。

m.ts10806

2017/07/10 00:57

ありがとうございます。。。ただ、結構閉じる箇所とかの問題で結構変な感じになっています。質問投稿画面右にリアルタイムでプレビューがでていると思いますので、お手数ですがそちらを確認しながら調整をお願いします。

yuika39

2017/07/10 00:58

何度も大変失礼しました。ただいま修正しました。

m.ts10806

2017/07/10 01:16 編集

ちなみに「scroll.js」「/ssi/footer.txt」にはどのような内容が含まれていますか？開示可能な範囲で構いません。

m.ts10806

2017/07/10 01:17

あ、、、cssのリンクも削除されたんですね。

yuika39

2017/07/10 01:25

すみません、、、CSSのタイトルがちょっと問題がありそうだったので削除してしまいました。js、フッター追記しました。

m.ts10806

2017/07/10 01:27

なるほど。了解です。中身さえわかれば問題ありません。cssソースに書いてある内容が全てですか？（念のため、補足コメントつけておいてもらえると助かります）

yuika39

2017/07/10 01:33

お手間おかけして申し訳ありません。はい。おそらくこれですべてかと思います。補足コメントとはここで大丈夫でしょうか？本日始めたのでシステムもわかっていなくてすみません…

m.ts10806

2017/07/10 01:49

こちらのコメントだと埋もれてしまうので質問本文に追記をお願いします。私自身も2ヶ月程度で今のところ回答しかしていないのでよく分かっていない部分もありますが、お互い誠意と礼儀をこめて対応していれば問題はないと思います。

yuika39

2017/07/10 02:07

一応本文に追記いたしました。また不備などありましたらご指摘いただけるとありがたいです。丁寧にありがとうございます。そうですねこれからこちらのサイトにお世話になることも多いと思いますので誠意と礼儀大切にしていきたいと思います。

m.ts10806

2017/07/10 02:43

質問２つの要件が若干違うので検証しつつ回答に追記していきます。少々お待ちください。

yuika39

2017/07/10 02:48

かしこまりました。よろしくお願い致します。

m.ts10806

2017/07/10 04:25

質問内容についてざっくり検証したもので回答しました。参考にしてください。

行動規範の内容に同意します

回答1件

ベストアンサー

注記：

動作検証はある程度してはいるものの、あくまでサンプルであり最適解とは限りません。
自身の環境に導入するための参考程度にとどめておいてください。

質問１：

最後にマウスオーバーしたところにアンダーバーをとどめておくような設定は可能でしょうか？

hoverからoutしたときに戻ってしまうのはcssのhoverの特性だと思います。
hoverしたときのみに反映されるので、hoverしてない場合は初期値となります。

これを「hoverした箇所にとどめておく」はjavascriptとあわせることで可能です。
cssでhoverとアンダーバーの位置を指定しているところをマウスホバーイベントをjavascript側で取得し、
そのindexによってアンダーバーの位置を変えます。

javascript
1    //グロナビhover時のイベントをキャッチ
2    $('.global-nav p').on({
3		'mouseenter' : function(){
4            var index = $("p").index($(this));//何番目のpタグをマウスオーバーしたか取得
5            var left_position = index * 20; //アンダーバーの位置を決定
6            $(".global-nav--bar").css("left",left_position+"%"); //アンダーバー移動
7            },
8	});

javascriptが効いているのでcssはそのままでも動作はしますが（Chrome最新で確認）、
処理としては不要な記述となるのでhoverでアンダーバーの位置を動かしているcss記述は
コメントアウトするか、削除して無効にしておくことを推奨します。

質問２：

普通にマウスホイールでスクロールした場合それに合わせメニューのアンダーバーの位置をスライドさせて今どこにいるかわかりやすくすること可能でしょうか？

イメージは例えばCSSフレームワークのPushpinのようなものと推察されます。
Qiitaの記事とサブタイトルを連動してるやつも同じですね。
現在のスクロール位置と対象の記事のトップ位置をスクロール毎のイベントで取得し、比較してた上で
アンダーバーを移動させることで可能となると思います。

javascript
1   
2    $(window).scroll(function(){ //スクロール時のイベント
3      var doc_pos = $(document).scrollTop(); //現在のスクロール位置を取得
4        var left_position = 0;  
5        if(doc_pos == 0){ //0の場合はTOPとする
6            $(".global-nav--bar").css("left",left_position+"%");
7        }else{
8            for(i=1;i<5;i++){
9                c_pos = $('#content_'+i).offset().top; //各コンテンツの位置を取得
10                if(c_pos <= doc_pos){ //各コンテンツの位置を越えていたらアンダーバーを移動
11                    left_position = i * 20;
12                    $(".global-nav--bar").css("left",left_position+"%");
13                }
14            }
15        }
16   })
17

※ただし上記ソースは、グロナビメニュークリックでちょっとアンダーバーが横に動いて正位置に戻るような動作をします。
また「コンテンツは4つ（＋トップ）」と決め打ちなので増減した場合に対応させる必要があります。
その部分を含めてご自身のサイトに合うように調整してみてください。

投稿2017/07/10 02:52

編集2017/07/10 04:24

m.ts10806

総合スコア80850

yuika39

2017/07/10 05:30

実装可能なコードのみではなく丁寧な解説までつけていただきとても分かりやすく大変感謝しております。自分のサイトに合わせ少し改良してみたいと思います。本当にありがとうございました！

m.ts10806

2017/07/10 05:39

解説というよりコードに書くコメントはもはや癖ですね。時間たってから見直したときに自分でもなぜこう書いたか分からなくなることはざらにあるので（「3日経てば他人のコード」というプログラマ格言があります。。。）少し未来の自身へ向けて書いたものでもあります。それで本当の他人が理解できればコメントとしては成功なので、こうやって喜んでもらえると自信がつきます。こちらこそありがとうございます。たぶんこれだけでは合わない部分も多々出てくると思うので、もしつまづいたり不明点がでてくれば、別途質問たてていただければと思います。がんばってください。

行動規範の内容に同意します