css实现电梯导航的项目实践

发布时间：2023-05-06 15:51:15 作者： Mr-Wang-Y-P

我要评论

CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小，本文主要介绍了css实现电梯导航，具有一定的参考价值，感兴趣的可以了解一下

啥叫电梯导航呢？

直接上图

当我们点击左边的小导航栏的时候，页面会自动滑动到我们所要看到部分。也许你可能猜到了实现这样的主要关键点，就是锚点。让我们接着看。

京东(JD.COM) 官网，大家可以自己尝试一下看一下效果。

平常大多数人都会使用js语法进行控件绑定，然后实现其相对效果，可是在css中也可以做到。

命名[锚点]的作用：在同一页面内的不同位置进行跳转。

通俗理解：可以通过锚点跳转到页面中的其他位置，当页面过长时，可以将页面分为几部分，通过顶部设置一些锚点，点击可以方便浏览者快速定位到相应的位置。

使用语法

1)给元素定义命名锚记名
语法：
<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法：
<a href="#命名锚记名称"></a>

注意

href属性的属性值最前面要加**#**（href="#id名）
在要跳转到的位置的标签中添加的是id属性

可是单纯只是用锚点并没有那种滑动的效果，锚点是直接跳转到指定的位置，并不会有动作。那么怎么用css实现自动滑动呢？

css电梯滑动实现

scroll-behavior

在HTML中有这样一个属性。 scroll-behavior 属性规定当用户单击可滚动框中的链接时，是否平滑地（具动画效果）滚动位置，而不是直线跳转。

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

值	描述
auto	默认值。允许在滚动框内的元素间直接跳转的“滚动效果”。
smooth	允许在滚动框内的元素间平滑的“滚动效果”。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

实现代码

<!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电梯导航</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{
            /* 页面滚动条滑动 */
            scroll-behavior: smooth;
        }

到此这篇关于css实现电梯导航的项目实践的文章就介绍到这了,更多相关css电梯导航内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

Tag：css 电梯导航

css旋转导航的示例代码
本文主要介绍了css旋转导航的示例代码，文中通过示例代码介绍的非常详细，该导航可用在一些网站首页导航栏中，需要的朋友们下面随着小编来一起学习学习吧
2023-04-27
CSS+HTML 实现顶部导航栏功能
这篇文章主要介绍了CSS+HTML 实现顶部导航栏功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-08-24
教你做个可爱的css滑动导航条
今天来带大家做一个可爱的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛，感兴趣的小伙伴们可以参考一下
2021-06-15
CSS实现移动端横向滚动导航条(PC端也适用)
这篇文章主要介绍了CSS实现移动端横向滚动导航条(PC端也适用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编
2021-03-17
CSS 带搜索导航栏的示例代码
这篇文章主要介绍了CSS 带搜索导航栏的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
2021-02-22
不可思议的CSS导航栏下划线跟随效果
这篇文章主要介绍了纯CSS实现导航栏下划线跟随效果，本文图文并茂实例代码详解，给大家介绍的非常详细，需要的朋友参考下吧
2019-12-09
css实现流程导航效果(三种方法)
本文通过三种方法给大家介绍css实现流程导航效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下
2019-11-13
html+css 实现简易导航栏功能
这篇文章主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
2021-04-07
css实现导航切换的实例代码
本文通过实例代码给大家介绍了css实现导航切换效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-08-15