「header-menu」ブロックについて(大きな端末で表示される左側メニュー)

<nav id="header-menu">
<ul>
<li><a href="#home">トップ</a></li>
<li><a href="#special">オープニング特別メニュー</a></li>
<li><a href="#kodawari">私たちのこだわり</a></li>
<li><a href="#menu">メニュー</a></li>
<li><a href="#gallery">ギャラリー</a></li>
<li><a href="#shop">ショップ情報</a></li>
</ul>
</nav>

主なスタイルは

cssフォルダのstyle.cssから「header-menu」でテキスト検索してみて下さい。詳しい解説もあります。
数をあまり増やしてしまうと最後の方が切れてスクロールしても見れなくなるので注意して下さい。

ページ内の各セクションとメニュー色の変化が連動します。切り替え処理はmain.jsの「背景切り替え」で行っています。色指定はstyle.cssの方です。

アンカーリンク(ページ内のリンク)

#homeや#specialというidがリンク先になっていますが、これは同一ページ内のそれぞれ同じ名前がつくidへ移動するという意味です。
「id」はcssでは「#」と書き、「class」はcssでは「.(ドット)」と書きます。
例えば、
<a href="#home">
とリンクがある場合は、同一ページの、
id="home"
へ移動する、という意味になります。
このid(#)でつける名前はページ内に1つしか使えないのでその点だけ注意して下さい。



「menubar_hdr」ブロックについて(画面右上のハンバーガーアイコン)

<!--開閉ボタン(ハンバーガーアイコン)-->
<div id="menubar_hdr">
<span></span><span></span><span></span>
</div>

主なスタイルは

style.cssから「menubar_hdr」でテキスト検索して下さい。詳しい解説もあります。

mix-blend-mode: exclusion;の指定があるため、背景色がどんな色(例えば同じ色)でもハンバーガーアイコンが見えるようになります。ただ、任意の線色にしても適用されないので、任意の線色を出したい場合はこの1行を削除して下さい。



「menubar」ブロックについて(ハンバーガーアイコンをクリックすると出るメニュー)

<!--開閉ブロック-->
<div id="menubar">
<nav>
<ul>
<li><a href="#home">トップ</a></li>
<li><a href="#special">オープニング特別メニュー</a></li>
<li><a href="#kodawari">私たちのこだわり</a></li>
<li><a href="#menu">メニュー</a></li>
<li><a href="#gallery">ギャラリー</a></li>
<li><a href="#shop">ショップ情報</a></li>
</ul>
</nav>
</div>
<!--/#menubar-->

主なスタイルは

style.cssから「menubar」でテキスト検索して下さい。詳しい解説もあります。
アンカーリンクについては上で説明しているものと同じです。