@bunappuposted at 2025-03-26

HTMLによるページ切り替えメニューについて

Q&A

Closed

お世話になります。
慣れないHTML開発でつまずいております。

よくある、トップページにメニューがついていて、クリックすると、
トップ / 会社概要 / 事業内容 / 採用情報 / ...
とか切り替えられるやつです。

メニュー部は各ページで共通なので、以下の記事を参考に、
https://wand.witchserver.jp/archives/46
SSIを使用して、メニュー部の共通HTML化に成功しました。

  <!--#include file="Header.html" -->

ここまではすんなりいきました。
ただ、選択メニューのハイライト表示がうまくいきません。

メニュー部は、

  <ul> <li> <a href=...
  <ul> <li> <a href=...
   ：

で実現しており、現在選択中のメニューは以下のようにして、CSSによりハイライトされるようにしました。

  <ul> <li class="active"> <a href=...

<a href=... でジャンプした際に、
classsを動的に変更する必要があると思うのですが、どうやるのでしょう？
知識が少なすぎて、まるで見当が付きません。

よろしくお願いいたします。

0 likes

3Answer

@Verclene posted at 2025-03-26

単にリンクのタグにIDを指定しておいて,適当にJavaScriptから参照すればいいです.

SSIはCGIを小分けにして実行したい時よく使ってましたが,サーバーが無理やり出力をまとめる方法なのでIDEとの相性が悪いですし移植性もよくないです(意図せずCSSが当たってしまうなんて問題とかあります).UIの駆動の為だけに使うのであれば個人的にはWeb Componentsを使うか,ajaxでそれっぽいことをする方がおすすめです.

2Like

Comments

@bunappu
Questioner
ありがとうございます。

やはり、スクリプトが必要ですか。
リンクの方は

みたくして、どのページをアクティブにするか伝えるのかな？
@bunappu
Questioner
albireoさんのコメントで解決しました。
ありがとうございました。

@changkejun posted at 2025-03-26

多分いわれたactiveは、「:」を付けているものでしょうと思います。これはクラスではなく擬似クラスです。タグに設定する必要がありません。動きがあったら自動的に動作します。以下の例を試してみればわかります。

<style>
li:hover {
  text-decoration: underline;
}
li:active {
  color:red
}
a{
  text-decoration: none;
}
</style>
<li><a href="https://www.google.co.jp">aaaaaaaaaaaaaaa</a></li>
<li><a href="https://www.google.co.jp">aaaaaaaaaaaaaaa</a></li>

2Like

Comments

@bunappu
Questioner
ありがとうございます。

activeは実際にクラスになります。

CSSでは以下のようにして、ハイライト表示しています。
li.active{
background:#48370d;
border-radius:5px;
}
@bunappu
Questioner
albireoさんのコメントで解決しました。
ありがとうございました。

@albireo posted at 2025-03-27

CSSだけで実現するなら

共通部.html

<style>
#common_menu li {
  background: #ffffff;
}
</style>

<ul id="common_menu">
<li class="menu_top"><a href="....">トップ</a></li>
<li class="menu_overview"><a href="....">会社概要</a></li>
<li class="menu_businesses"><a href="....">事業内容</a></li>
</ul>

トップ.html

<style>
#common_menu li.menu_top {
  background: #48370d;
}
</style>

会社概要.html

<style>
#common_menu li.menu_overview {
  background: #48370d;
}
</style>

事業内容.html

<style>
#common_menu li.menu_businesses {
  background: #48370d;
}
</style>

「現在のページに対応する項目にactiveクラスをつける」ではなく
「現在のページに対応する項目に紐づいているクラスをハイライトにする」
の方が簡単です。

1Like

Comments

@bunappu
Questioner
素晴らしい、まさに求めていたものです。
「CSSだけで出来たらいいな」とは思っていましたが、本当にできてしまうとは。

クラス名を指定しておいて、HTML側でクラススタイルを指定する。
なるほどです。
目からうろこでした。

本当にありがとうございました。

Are you sure you want to delete the question?

HTMLによるページ切り替えメニューについて

3Answer

Comments

Comments

Comments

Your answer might help someone💌