css+js实现导航条菜单横竖选中滑动效果代码

代码语言:html

所属分类:菜单导航

代码描述:css+js实现导航条菜单横竖选中滑动效果代码

代码标签: css js 导航条 菜单 横竖 选中 滑动

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!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">
    <style>
        @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap);.nav,.nav-item{position:relative}.nav-item:before,.nav1 .nav-item:before{width:100%;height:5px;background-color:#dfe2ea;opacity:0}*{-webkit-box-sizing:border-box;box-sizing:border-box}body{margin:0;padding:0}.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:30px 0}.nav{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;overflow:hidden;max-width:660px;min-width:600px;background-color:#fff;padding:0 20px;border-radius:20px;-webkit-box-shadow:0 8px 36px rgba(157,160,175,.8);box-shadow:0 8px 36px rgba(157,160,175,.8)}.nav-item{color:#83818c;padding:30px 20px;text-decoration:none;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;margin:0 6px;z-index:1;font-family:'Open Sans',sans-serif;font-weight:700}.nav-item:before{content:"";position:absolute;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.nav-item:not(.active):hover:before{opacity:1;bottom:0}.nav-item:not(.active):hover{color:#333}.nav-indicator{position:absolute;bottom:0;-webkit-transition:.4s;-o-transition:.4s;transition:.4s;height:5px;z-index:1}.nav1 .nav-indicator{height:5px;left:0;border-radius:8px 8px 0 0}.nav1 .nav-item:before{bottom:-6px;left:0;border-radius:8px 8px 0 0;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.nav2,.nav3{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:20px}.nav2 .nav-indicator{width:5px;left:0;border-radius:0 8px 8px 0}.nav2 .nav-item:before{bottom:0;left:-27px;width:6px;height:100%;border-radius:0 8px 8px 0}.nav3 .nav-indicator{width:5px;border-radius:8px 0 0 8px;left:initial;right:0}.nav3 .nav-item:before{bottom:0;left:initial;right:-27px;width:6px;height:100%;border-radius:8px 0 0 8px}@media(max-width:992px){.wrapper{padding:30px 0}}@media only screen and (max-width:768px){.nav{min-width:100%}.nav1{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.nav-item{padding:25px 15px}}@media(max-width:580px){.nav1{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow-x:auto}}
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- Nav 1 - Horizontal -->
        <nav class="nav nav1">
            <!-- To change color of indicator and text you should change the value of data-color(hex,rgb,rgba or text color value) =================================== data-color="black" data-color="#006400" data-color="rgb(0, 0, 255)" data-color="rgba(255, 0, 0, 1)" =================================== --><a href="#" class="nav-item active" data-color="#663399">Home</a><a href="#" class="nav-item" data-color="#446A46">About</a><a href="#" class="nav-item" data-color="#D82148">Testimonials</a><a href="#" class="nav-item" data-color="#FFB72B">Blog</a>
            <a href="#" class="nav-item" data-color="#1C0A00">Contact</a><span class="nav-indicator"></span></nav>
        <!-- Nav 1 - Horizontal -->
    </div>
    <div class="wrapper">
        <!-- Nav 2 - Vertical left -->
        <n.........完整代码请登录后点击上方下载按钮下载查看

网友评论0