<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つしか使えないのでその点だけ注意して下さい。
<!--開閉ボタン(ハンバーガーアイコン)--> <div id="menubar_hdr"> <span></span><span></span><span></span> </div>
style.cssから「menubar_hdr」でテキスト検索して下さい。詳しい解説もあります。
mix-blend-mode: exclusion;の指定があるため、背景色がどんな色(例えば同じ色)でもハンバーガーアイコンが見えるようになります。ただ、任意の線色にしても適用されないので、任意の線色を出したい場合はこの1行を削除して下さい。
<!--開閉ブロック--> <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」でテキスト検索して下さい。詳しい解説もあります。
アンカーリンクについては上で説明しているものと同じです。