E-store step03

ショップサーブのサイトリニューアルについての第4回目です。

第1回目:プロローグとして『したいこと』

第2回目:『ページ毎にスタイルを変更する方法』

第3回:『別のサーバーで作成したWordPressの記事を読み込む』

と順番にまとめてきました。

第4回目は『サイドナビ吹き出しを下層ページにも反映させる』について書いていきたいと思います。

ショップサーブでは、デフォルトで、サイドバーのメニューが自動読み込みされています。
CMSの良いところは、こういった自動読み込みがひとつだと思います。

しかしながら、デザインを変更したり、新たな機能を増やす場合には、難しいことも出てきてしまいます。

今回の案件では、カテゴリー数が多く、どのようにすればお客様に分かりやすく商品を探していただけるか…
ということが、焦点となっていました。

そこで見つけたのがデフォルトの機能にある吹き出しスタイル。

第一階層のみが表示されており、
第一階層をホバーすることで、第二階層が現れるという仕組みです。

しかし、デフォルトのままですと、この機能はトップページのみ、さらに第二階層までという制限がありました。

トップページと下層ページでサイドバーの仕組みが違うということはお客様を混乱させてしまうかもしれない。ということ。

そして、第二階層以上あるページに関しては、そこまで表示出来る方が、商品を探しやすい。ということ。

この2点が、自動読み込みであることより、重要ということで、

今回はデフォルトの機能を使用せず、HTMLとCSSで実装することにしました。

前置きが長くなりましたが、HTML・CSSは
以下の通りです。

HTML

<div id="sideNavi">
<ul class="mainMenu">
<li><a href="#"><span>→</span>メインカテゴリー</a>

<div class="secondMenu">
<ul class="inner">

<li><a href="#"><span>→</span>第2階層カテゴリー</a>
<div class="thirdMenu">
<ul class="inner">
<li><a href="#"><span>→</span>第3階層カテゴリー</a></li>
<li><a href="#"><span>→</span>第3階層カテゴリー</a></li>
<li><a href="#"><span>→</span>第3階層カテゴリー</a></li>
</ul>
</div><!--thirdMenu-->
</li>

<li><a href="#"><span>→</span>第2階層カテゴリー</a></li>

<li><a href="#"><span>→</span>第2階層カテゴリー</a></li>
</ul>
</div><!--secondMenu-->

</ul><!--mainMenu-->

CSS

#sideNavi{
width:230px;
}
#sideNavi ul.mainMenu li{
padding-left:20px;
font-size:12px;
line-height:35px;
height:35px;
position:relative;
}
#sideNavi ul.mainMenu li span{
font-size:10px;
padding-right:10px;
}
#sideNavi ul.mainMenu li .secondMenu{
display: none;
}
#sideNavi ul.mainMenu li:hover .secondMenu,
#sideNavi ul.mainMenu li:active .secondMenu,
#sideNavi ul.mainMenu li .secondMenu li:hover .thirdMenu,
#sideNavi ul.mainMenu li .secondMenu li:active .thirdMenu{
display: block;
position:absolute;
top:-1px;
left:225px;
width:230px;
background:#fff;
}
#sideNavi ul.mainMenu li:hover .secondMenu .thirdMenu,
#sideNavi ul.mainMenu li:active .secondMenu .thirdMenu{
display: none;
}
#sideNavi ul.mainMenu li a{
display:block;
width:100%;
height:100%;
}
#sideNavi ul li:hover{
background:#f1f1f1;
}
.secondMenu ul li,
.thirdMenu ul li{
padding-left:10px;
}

これをサイトのスタイルに合わせカラーやデザインを変更して、実装となりました。

Written by IShiko.