くるっと切り替わるヘッダーメニューを実装しよう
Share
こんなことを説明しています!
- ホバーしたらメニューがくるっと回転して色が変わるような実装の方法
解説動画
コードと解説
手順
- itemを複製して、2つ縦並びにする
- ホバーしたらそのまま上に移動するようにする
- 周りをoverflow: hidden で隠す
一見複雑そうに見えますが、意外と簡単ですね^^
HTMLの記述
<header class="header"> <div class="header-wrap"> <div class="header-logo"><a href="">ロゴ</a></div> <ul class="header-list"> <li class="header-item"><a href=""><span class="view">item1</span><span class="hover">item1</span></a></li> <li class="header-item"><a href=""><span class="view">item2</span><span class="hover">item2</span></a></li> <li class="header-item"><a href=""><span class="view">item3</span><span class="hover">item3</span></a></li> <li class="header-item"><a href=""><span class="view">item4</span><span class="hover">item4</span></a></li> </ul> </div> </header>
CSSの記述
.header { position: fixed; z-index: 100; width: 100%; height: 100px; top: 0; left: 0; padding: 0 40px; background: rgba(57, 202, 250, 0.304); } .header-wrap { display: flex; justify-content: space-between; align-items: center; height: inherit; } .header-list { display: flex; align-items: center; column-gap: 40px; } .header-item { a { font-size: 40px; line-height: 2; display: inline-block; position: relative; overflow: hidden; } span { display: block; transition: all 0.5s ease; } .hover { color: blue; position: absolute; top: 0; left: 50%; transform: translate(-50%, 100%); } a:hover { .view { transform: translateY(-100%); } .hover { transform: translate(-50%, 0); } } }