|
|
|
|
|
本文介紹一個(gè)具有滑動(dòng)效果的純CSS菜單。
菜單介紹
當(dāng)鼠標(biāo)移到菜單上時(shí),菜單滑動(dòng)過(guò)渡效果高亮顯示。
完整HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
nav {
--c: #E5DDCB;
--b: #524656;
background: var(--b);
display: flex;
}
ul {
margin: 0 0 0 auto;
padding: 0;
display: flex;
list-style: none;
}
ul li a {
padding: 0 .8em;
display: block;
color: #0000;
background:
linear-gradient(var(--c) 50%,var(--b) 0)
0% var(--_i,100%)/100% 200%;
text-shadow:
0 calc(2em - var(--_i,2em)) var(--c),
0 var(--_i,-2em) var(--b);
text-decoration: none;
font: bold 30px/2em sans-serif;
overflow: hidden;
outline-offset: -5px;
transition: .5s;
}
ul li a:hover,
ul li.active a{
--_i: 0px;
}
ul li a:focus-visible{
outline: 2px dashed var(--c);
}
ul li.active a:focus-visible {
outline-color: var(--b);
}
body {
margin: 0;
}
</style>
</head>
<body translate="no" >
<nav>
<ul id="menu">
<li><a href="/">首頁(yè)</a></li>
<li class="active"><a href="/shop">商品展示</a></li>
<li><a href="/about">關(guān)于我們</a></li>
<li><a href="/contact">聯(lián)系方式</a></li>
</ul>
</nav>
</body>
</html>
代碼分析
HTML外層是一個(gè)<nav></mav>
標(biāo)簽,菜單是一個(gè)<ul><li></li></ul>
項(xiàng)目標(biāo)簽。
nav {
--c: #E5DDCB;
--b: #524656;
}
--c
變量是當(dāng)前菜單項(xiàng)背景顏色。 --b
變量是整個(gè)菜單欄的背景顏色。
ul li a {
...
color: #0000;
...
font: bold 30px/2em sans-serif;
...
}
color
是菜單文字顏色。font
是菜單文字大小及字體類型。
總結(jié)
本文介紹了一個(gè)具有滑動(dòng)效果的純CSS菜單,代碼量不多,滑動(dòng)效果是該菜單的特色,是一個(gè)實(shí)用的導(dǎo)航菜單。
相關(guān)文章