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-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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0