css實(shí)現(xiàn)電梯導(dǎo)航的項(xiàng)目實(shí)踐

發(fā)布時(shí)間：2023-05-06 15:51:15 作者： Mr-Wang-Y-P

CSS梯形導(dǎo)航圖是一種使用 CSS 布局實(shí)現(xiàn)的導(dǎo)航設(shè)計(jì),可以根據(jù)需要靈活調(diào)整導(dǎo)航菜單的上下位置和大小，本文主要介紹了css實(shí)現(xiàn)電梯導(dǎo)航，具有一定的參考價(jià)值，感興趣的可以了解一下

啥叫電梯導(dǎo)航呢？

直接上圖

當(dāng)我們點(diǎn)擊左邊的小導(dǎo)航欄的時(shí)候，頁(yè)面會(huì)自動(dòng)滑動(dòng)到我們所要看到部分。也許你可能猜到了實(shí)現(xiàn)這樣的主要關(guān)鍵點(diǎn)，就是錨點(diǎn)。讓我們接著看。

京東(JD.COM) 官網(wǎng)，大家可以自己嘗試一下看一下效果。

平常大多數(shù)人都會(huì)使用js語(yǔ)法進(jìn)行控件綁定，然后實(shí)現(xiàn)其相對(duì)效果，可是在css中也可以做到。

命名[錨點(diǎn)]的作用：在同一頁(yè)面內(nèi)的不同位置進(jìn)行跳轉(zhuǎn)。

通俗理解：可以通過(guò)錨點(diǎn)跳轉(zhuǎn)到頁(yè)面中的其他位置，當(dāng)頁(yè)面過(guò)長(zhǎng)時(shí)，可以將頁(yè)面分為幾部分，通過(guò)頂部設(shè)置一些錨點(diǎn)，點(diǎn)擊可以方便瀏覽者快速定位到相應(yīng)的位置。

使用語(yǔ)法

1)給元素定義命名錨記名
語(yǔ)法：
<標(biāo)記 id="命名錨記名"> </標(biāo)記>
2)命名錨記連接
語(yǔ)法：
<a href="#命名錨記名稱(chēng)"></a>

注意

href屬性的屬性值最前面要加**#**（href="#id名）
在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加的是id屬性

可是單純只是用錨點(diǎn)并沒(méi)有那種滑動(dòng)的效果，錨點(diǎn)是直接跳轉(zhuǎn)到指定的位置，并不會(huì)有動(dòng)作。那么怎么用css實(shí)現(xiàn)自動(dòng)滑動(dòng)呢？

css電梯滑動(dòng)實(shí)現(xiàn)

scroll-behavior

在HTML中有這樣一個(gè)屬性。 scroll-behavior 屬性規(guī)定當(dāng)用戶(hù)單擊可滾動(dòng)框中的鏈接時(shí)，是否平滑地（具動(dòng)畫(huà)效果）滾動(dòng)位置，而不是直線跳轉(zhuǎn)。

scroll-behavior: auto|smooth|initial|inherit;

值	描述
auto	默認(rèn)值。允許在滾動(dòng)框內(nèi)的元素間直接跳轉(zhuǎn)的“滾動(dòng)效果”。
smooth	允許在滾動(dòng)框內(nèi)的元素間平滑的“滾動(dòng)效果”。
initial	將此屬性設(shè)置為其默認(rèn)值。參閱 initial。
inherit	從其父元素繼承此屬性。參閱 inherit。

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css電梯導(dǎo)航</title>
</head>
<body>
    <div style="display: flex;">
    <div>
        <div class="box1" id="box1">服飾</div>
        <div class="box2" id="box2">家電</div>
        <div class="box3" id="box3">生鮮</div>
    </div>
    <div class="slidebar">
        <a href="#box1">服飾</a>
        <a href="#box2">家電</a>
        <a href="#box3">生鮮</a>
    </div>
</div>
</body>
</html>

.box1{
            width: 80vw;
            height: 800px;
            background-color: aqua;
        }
        .box2{
            width:80vw ;
            height: 800px;
            background-color:chartreuse;
        }
        .box3{
            width: 80vw;
            height: 800px;
            background-color:red
        }
        .slidebar{
            display: flex;
            flex-direction: column;
            margin-left: 85vw;
            margin-top: 50px;
            position: fixed;
        }
        .slidebar a{
            text-align: center;
            width: 50px;
            height: 50px;
            font-size: 10px;
        }
        .slidebar a:nth-child(1) {
            background-color: aqua;
        }
        .slidebar a:nth-child(2) {
            background-color: chartreuse;
        }
        .slidebar a:nth-child(3) {
            background-color: red;
        }
        html{
            /* 頁(yè)面滾動(dòng)條滑動(dòng) */
            scroll-behavior: smooth;
        }

到此這篇關(guān)于css實(shí)現(xiàn)電梯導(dǎo)航的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)css電梯導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！