技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

具有滑動(dòng)效果的純CSS菜單[演示/源碼]

作者:admin    時(shí)間:2022-8-13 8:33:16    瀏覽:

本文介紹一個(gè)具有滑動(dòng)效果的純CSS菜單。

demodownload

菜單介紹

當(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 是菜單文字大小及字體類(lèi)型。

總結(jié)

本文介紹了一個(gè)具有滑動(dòng)效果的純CSS菜單，代碼量不多，滑動(dòng)效果是該菜單的特色，是一個(gè)實(shí)用的導(dǎo)航菜單。

相關(guān)文章

標(biāo)簽: 導(dǎo)航菜單  菜單  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */