Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- ホバーしたらメニューがくるっと回転して色が変わるような実装の方法
解説動画
コードと解説
手順
- 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);
}
}
}
Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog