<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Navigation &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/navigation/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Fri, 23 Apr 2010 21:55:00 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>ナビゲーションの現在地をアクティブにするJS小技</title>
		<link>https://blog.mach3.jp/2010/04/23/js-activate-navigation.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Fri, 23 Apr 2010 21:55:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[UI]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/04/23/%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e7%8f%be%e5%9c%a8%e5%9c%b0%e3%82%92%e3%82%a2%e3%82%af%e3%83%86%e3%82%a3%e3%83%96%e3%81%ab%e3%81%99%e3%82%8bjs%e5%b0%8f%e6%8a%80.html</guid>

					<description><![CDATA[わざわざ投稿するほどのものか、というぐらいちょこざいな小技です。 JavaScriptでナビゲーションを操作して、 現在いるディレクトリのナビゲーションに「.active」クラスを付加してみます。 例えばこんなナビゲーシ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>わざわざ投稿するほどのものか、というぐらいちょこざいな小技です。<br />
JavaScriptでナビゲーションを操作して、<br />
現在いるディレクトリのナビゲーションに「.active」クラスを付加してみます。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh5.ggpht.com/_JJkNs5Ixl70/S9GYPwo8MbI/AAAAAAAAA2o/_7j_yk_jYa8/s800/201004232122.png" alt="ナビゲーションの現在地をアクティブにする"/></figure>



<p></p>



<span id="more-49"></span>



<p>例えばこんなナビゲーションがあるとしますね。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh6.ggpht.com/_JJkNs5Ixl70/S9GYQLKE44I/AAAAAAAAA2s/kvqKPhujwz4/s800/201004232108.png" alt="ナビゲーション"/></figure>



<p></p>



<p>こんなかんじにマークアップされているとしましょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navi"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navi-home"</span>&gt;</span>HOME<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navi-product"</span>&gt;</span>PRODUCTS<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navi-about"</span>&gt;</span>ABOUT<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navi-blog"</span>&gt;</span>BLOG<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navi-contact"</span>&gt;</span>CONTACT<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
</code></span></pre>


<p>アクティブに見せる為の「.active」クラスを用意します。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh5.ggpht.com/_JJkNs5Ixl70/S9GYQDLDhPI/AAAAAAAAA2w/rx1rGG1ZkT0/s800/201004232126.png" alt=".activeクラス"/></figure>



<p></p>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-id">#navi</span> <span class="hljs-selector-tag">li</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-class">.active</span> {
    <span class="hljs-comment">/* なんらかのスタイル */</span>
}
</code></span></pre>


<p>仕上げにスクリプトを書きます。jQuery使ってます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> naviConfig = &#91;
    { <span class="hljs-attr">rule</span>:<span class="hljs-string">"/product/"</span>, <span class="hljs-attr">selector</span>:<span class="hljs-string">"#navi-product"</span> },
    { <span class="hljs-attr">rule</span>:<span class="hljs-string">"/about/"</span>, <span class="hljs-attr">selector</span>:<span class="hljs-string">"#navi-about"</span> },
    { <span class="hljs-attr">rule</span>:<span class="hljs-string">"/blog/"</span>, <span class="hljs-attr">selector</span>:<span class="hljs-string">"#navi-blog"</span> },
    { <span class="hljs-attr">rule</span>:<span class="hljs-string">"/contact/"</span>, <span class="hljs-attr">selector</span>:<span class="hljs-string">"#navi-contact"</span> }
];
(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">config</span>)</span>{
    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;config.length;i++){
        <span class="hljs-keyword">if</span>( location.href.match(config&#91;i].rule) ){
            $(config&#91;i].selector).addClass(<span class="hljs-string">"active"</span>);
            <span class="hljs-keyword">return</span>;
        }
    }
})( naviConfig );
</code></span></pre>


<p>ご覧の通り、ruleの文字列に現在のURLがマッチした場合に、<br />
selectorにあてはまる要素にactiveクラスを付加しています。<br />
それだけです。</p>



<p>例えば、URLが「http://www.example.com/product/hogehoge.html」等だった場合に、<br />
「/product/」の部分がマッチして#navi-productの要素がアクティブになります。<br />
複雑なルール付けが必要な場合は、ruleに正規表現を使用してもいいですね。</p>



<p>静的にclass=&#8221;active&#8221;を書くのが良いとも言えますが、<br />
Dreamweaverのライブラリや各CMSでモジュール化してあるナビゲーションだと、<br />
条件分岐などが面倒な場合があります。<br />
そんな時はこんな感じにJavaScriptを使ってさっくり処理してしまうのも一手かと。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
