マウスオン（ホバー）でサブメニューなどを横から出す

最近サイトを作成していてアーカイブページでサブカテゴリーにアンカーリンクするときに、右側や左側に固定でサブカテゴリーのメニューが欲しくて、すっと実装できなかったので念のため備忘録として
残しておこうと思います～

では早速DEMOから！

See the Pen マウスオン（ホバー）でサブメニューなどを横から出す by sayuri (@giraffeweb) on CodePen.default

いいかんじに、ぬるっとでてきますね笑
出し方はいろいろあると思いますが、私はクリックではなく
ホバーで出したりひっこめたりしたかった。

では肝心なソースから。

jQueryを読み込む

基本的なところではありますが、必ずJSを読みこんでおいてくださいね。
下記はCDNでひっぱってきてます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

HTMLはメジャーな感じです。
class=”fas fa-barsの部分はfontawesomeからメニューぽいアイコンを持ってくる想定で記述してます。

<div id="tabMenu">
	<div class="flexbox">
		<p><i class="fas fa-bars"></i><span>MENU</span></p>
		<ul>
			<li><a href="#">menu01</a></li>
			<li><a href="#">menu02</a></li>
			<li><a href="#">menu03</a></li>
		</ul>
	</div>
</div>

javascript

単純にパディングで隠してます笑
このやり方が最適なのかどうかはわかりませんがこの方法しか浮かばなかった…。

単純にホバーさせる前はパディング0でホバーさせてからはサブメニュー幅分のパディングを右側に与えて出すようにしてます。

$(function() {
   $('#tabMenu').hover(
    function(){
      $(this).stop(true).animate({'padding-right':'220px' }, 500);
    },
    function () {
      $(this).animate({'padding-right':'0px'}, 500);
    }
  );
});

CSS

下記はみていただくとわかる通りSCSSで記載してます。
適宜自分の仕様に代えてください。

$siteColor:#139cb7;

@mixin vertical-align {
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0%,-50%);
	-moz-transform: translate(0%,-50%);
	-ms-transform: translate(0%,-50%);
	-o-transform: translate(0%,-50%);
	transform: translate(0%,-50%);
}

#tabMenu {
			@include vertical-align();
			position: fixed;
			right: -220px;
			width: 280px;
			background-color: $siteColor;
			z-index: 20;
			.flexbox {
				p {
					width: 60px;
					background-color: $siteColor;
					align-self: center;
					i {
						font-size: 24px;
						display: block;
						text-align: center;
						color: #fff;
						margin-bottom: 10px;
					}
					span {
						color: #fff;
						display: block;
						font-size: 10px;
						text-align: center;
						font-weight: 600;
						letter-spacing: .1em;
					}
				}
				ul {
					width: calc(100% - 61px);
					max-width: 220px;
					border-left: 1px solid #fff;
					li {
						border-bottom: 1px solid #fff;
						background-color: $siteColor;
						a {
							font-size: 13px;
							padding: 0.6vw 0;
							font-weight: 600;
							color: #fff;
							text-align: center;
							display: block;
							&:hover {
								background-color: rgba(#fff,0.8);
								color: $siteColor;
							}
						}
					}
				}
			}
		}

以上です！

同じような人が効率的にサクッと実装できると嬉しいな！

Share: