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

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

代码语言：html

代码描述：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-i.........完整代码请登录后点击上方下载按钮下载查看