「ホームページのメニューを制するものは、WEBマーケティングを制す」とはよく言ったもので・・・
ウソです。誰もそんな事は言ったこと無いし、聞いたこと無いし、今はじめて書いてみました。
しかし、ホームページを制作している人あるあるですが、あって当たり前、項目のセットは簡単にできると思われがちなメニュー項目は意外と製作依頼者からの問い合わせが多い箇所でもあります。
ホームページを作り終わってから、「あの項目消しといて」とか「新たに追加しておいて」などはまだよく、「スマホで使いづらいので折りたたみはやめて」とか、「サイズをもっと大きくして」などなど・・・
おそらくユーザー側も問い合わせするレベルではないが、ホームページで最初に見る箇所、触る箇所は、大体において「メニュー項目」であることがほとんどのはずです。
こうした「メニューマーケティング」もしかしたら改善ポイントにより、サイトコンバージョンをアップさせるポイントにもなりえるかもしれませんね。
「PMO」(PageMenuOptimyzation)というジャンルはプロマネ用語と似ていますが、新たに立ち上げてもいいかもしれませんね。
こういうネタ、得意なんですよね・・・
というわけで、本日も前回に引き続いてサイドメニューサンプルをお届けします。
今回はCSSのみのバージョンでJavascriptを使わないヤツです。
デモ
See the Pen Side-Menu-1-css by YugetaKoji (@geta1972) on CodePen.
ソースコード
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML-parts SideMenu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="side-menu.css">
</head>
<body>
<div class="side-menu">
<ul>
<li data-dropdown="1">
<a href="javascript:void(0)">Menu-1</a>
<ul>
<li><a href="#menu-1-1">Menu-1-1</a></li>
<li><a href="#menu-1-2">Menu-1-2</a></li>
</ul>
</li>
<li>
<a href="#menu-2">Menu-2</a>
</li>
</ul>
<ul>
<li data-dropdown="1">
<a href="javascript:void(0)">Menu-3</a>
<ul>
<li><a href="#menu-3-1">Menu-3-1</a></li>
<li>
<a href="#menu-3-2">Menu-3-2</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
html,body{
margin : 0;
padding : 0;
border : 0;
width : 100%;
height : 100%;
}
*, *:before, *:after {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
/* Side-menu */
.side-menu{
width : 200px;
background-color:white;
border-right:1px solid #ccc;
}
.side-menu ul{
padding:0;
margin:0;
border:0;
}
.side-menu li{
padding:0;
margin:0;
border:0;
list-style:none;
min-height:60px;
line-height:60px;
}
.side-menu a{
display:block;
border-bottom:1px solid #ccc;
}
.side-menu > ul > li > a{
padding-left:10px;
}
.side-menu > ul > li > ul > li > a{
padding-left:20px;
}
.side-menu li[data-dropdown="1"] > a:after{
content: "";
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 6px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
box-sizing: border-box;
margin-left:4px;
}
.side-menu a:hover{
background-color:#eee;
}
/* expand-default */
.side-menu > ul li > ul{
display:none;
}
/* ecpand-open */
.side-menu li:hover > ul{
display:block;
}
/* expand-close */
.side-menu li > ul{
display:none;
}
@keyframes menu-noactive{
0%{
background-color:#eee;
}
100%{
background-color:rgba(255,255,255,0.0);
}
}
@keyframes menu-close{
0%{
opacity:1.0;
visibility:visible;
}
100%{
opacity:0.0;
visibility:hidden;
}
}
@keyframes menu-list-open{
0%{
transform : scaleY(0);
}
100%{
transform : scaleY(1);
}
}
@keyframes menu-list-close{
0%{
transform : scaleY(1);
}
100%{
transform : scaleY(0);
}
}
