ナビゲーションバーをクリックした箇所にスライドさせてグラデーションをかける

■ポイント
・CSSでグラデーションの処理（linear-gradientを使用）
・JavaScriptのdocument.querySelectorで要素を取得
・offsetLeftでクリックした対象要素の左からの幅をpx単位で（左）へ移動させる
・offsetWidthでクリックした対象要素のWidth（幅）を決定
（説明がわかりずらいかもしれません・・・検証ツールで幅の変化等を見て頂くとわかりやすいです）
offsetLeftの説明はこちらのサイト様を参考にいたしました（わかりやすかった、ありがとうございます）
https://syncer.jp/javascript-reference/element/offsetleft
念の為こちらも載せときます↓
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
・addEventListenerでクリックされた場所に反応するように指定
・そしてトップバーだけじゃ寂しいのでビデオ背景載せてます

■出来たサイトの動き

■コード

HTML


<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>グラデーションナビバー</title>
    <link rel="stylesheet" href="30_8.css">
</head>
<body>
    <div class="nav-top">
        <nav>
            <div id="marker"></div>
            <a href="#">Home</a>
            <a href="#">Company</a>
            <a href="#">Work</a>
            <a href="#">Sample</a>
            <a href="#">Team</a>
            <a href="#">Contact</a>
        </nav>
    </div>
    <script type="text/javascript">
        const marker = document.querySelector('#marker');
        const item = document.querySelectorAll('nav a');

        function indicator(e){
            marker.style.left = e.offsetLeft+"px";
            marker.style.width = e.offsetWidth+"px";
        }

        item.forEach(link => {
            link.addEventListener('click', (e)=>{
                indicator(e.target);
            })
        })
    </script>

<video src="goomalling-storm.mp4" loop="" autoplay="" muted=""  width="100%" class="bgv"></video>
</body>
</html>

CSS


*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.nav-top
{
	display: flex;
	justify-content: center;
	background-color:black;
}
nav
{
	position: relative;
	display: flex;
}
nav a
{
	position: relative;
	margin: 10px 20px;
	padding: 5px;
	font-size: 2em;
	color: white;
	text-decoration: none;
}
nav #marker
{
	position: absolute;
	left: 0;
	height: 100%;
	width: 0;
	opacity: 0.5;
	background: linear-gradient(
	black,
	rgb(128, 0, 113),
	blue,
	black);
	bottom: 0px;
	transition: 0.5s;
	border-radius: 4px;
}

■苦労した点
　・querySelectorとgetElementByIdの使い分け

■疑問点とやりたかったこと
　・レスポンシブ最適化までいけませんでした。
　・レスポンシブ最適化のため、少しいじりましたが、今の知識レベルでは時間がかかりそうだったため、タイミングを改めて実装してみようと思います。

以上となります。

ここは違う、ここはこうしたほうが良いかも？といったものございましたらご指摘いただけますと幸いです。
最後までみていただき、ありがとうございます。