現在のページのメニューの装飾を変更する方法【jQueryだけでOK】

現在のページのメニューの装飾を変更する方法【jQueryだけでOK】

どうもWEBエンジニアのがむしゃらワーカーしゅう丸(@shumarukiti)です!

この記事では、

[voice icon=”https://j-info1.com/wp-content/uploads/2017/12/pose_syourai_man.png” type=”l”]WordPressじゃなくてhtmlベースでサイト制作の話がきた。現在のページでメニューに色をつけたりするのどうすればいいんだろ・・・。WordPressなら簡単だけどhtmlだとわからないな。[/voice]

という疑問にお答えします。

結論ですがhtmlでのサイト制作でも現在のページのメニューに色をつけたりcssをいじることは可能です。

先日、後輩から上記のような質問を受けたので記事にすることにしました。

ちなみにこの記事を書いている僕は、未経験から独学でプログラミングを勉強しまして、WEBエンジニアとして転職して今ではWordPressでのサイト制作を軸としたフリーランスエンジニアとして活動しています。そんな僕がWordPressを無料で勉強して理解度をグッとあげる方法について語ります。

〜本記事の内容〜

  1. htmlで現在のページのメニューの色をつける方法【簡単】
  2. WordPress以外のサイト制作もまだまだある【勉強すべき】

htmlで現在のページのメニューの色をつける方法【簡単】

結論ですが、jQueryを使うだけで実現できます。

jsに描くときはscriptタグはいらないので注意です。

ちなみにこのコードは何も難しいことはしていなくて、表示しているページの「header nav ul li a」に「now」というclassを付けるよという意味です。

皆さんが使う場合は、「header nav ul li a」のみ自分が制作しているサイトに適応させるように変更すれば良いです。

「now」というclassが付いた時にcssで色とかをつけてあげる指定をしてあげれば良いです。

「header nav ul li a.now」の色を指定。

みたいな感じですね。

ここも実装したいものに応じて変更してください。

これで例えば「会社概要」ページにいるときは、メニュー部分が赤色になります。

WordPress以外のサイト制作もまだまだある【勉強すべき】

以上ですが、WordPressでのサイト制作に慣れているとhtmlだけのサイト制作でわからないところが結構出てきたりしますよね。

実際にWordPressではphpで関数を描くだけで解決することが多いので。

なのでhtmlでのサイト制作に備えてjQueryもある程度勉強しておくのがおすすめですよ。htmlベースでのサイト制作ならjQueryがある程度出来ればほぼ何でもできるので。

ちなみにjQueryの基礎はこの1冊で結構身についたのでおすすめです。

〜おすすめ記事〜

[kanren postid=”2040″]

[kanren postid=”960″]

[kanren postid=”1209″]