css模仿电商首页类目菜单选择效果代码
代码语言：html
所属分类：菜单导航
代码描述：css模仿电商首页类目菜单选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper制作小米官网幻灯片/轮播图演示</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
<style>
body {
background: white;
}
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style-type: none;
}
a {
text-decoration: none;
}
.dwo-wrap {
position: relative;
width: 1226px;
height: 460px;
margin: 0 auto;
}
.swiper-container {
width: 1226px;
height: 460px;
}
.swiper-slide img {
display: block;
width: 1226px;
height: 460px;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
left: auto;
right: 30px;
bottom: 20px;
width: auto;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
border: 2px solid #fff;
border-color: hsla(0, 0% ,100% , 0.3);
background-color: rgba(0, 0, 0, 0.4);
opacity: 1;
}
.swiper-pagination-bullet-active {
border-color: rgba(0,0,0,.4);
background-color: hsla(0,0%,100%,.4);
}
.swiper-button-next, .swiper-button-prev {
width: 41px;
height: 69px;
background-image: url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png);
}
.swiper-button-prev {
left: 234px;
background-position: -83px 0;
}
.swiper-button-prev:hover {
background-position: 0 0;
}
.swiper-button-next {
right: 0;
background-position: right 0;
}
.swiper-button-next:hover {
background-position: -41px 0;
}
.swiper-button-next:after, .swiper-button-prev:after {
display: none;
}
.nav-wrapper {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 234px;
background-color: #fff;
background-color: rgba(105, 101, 101, 0.6);
}
.nav {
position: relative;
padding: 20px 0;
}
.nav-item.active .children {
display: block;
}
.nav-item:hover .nav-item-link {
background-color: #ff6700;
}
.nav-item:hover .children {
display: block;
}
.nav-item-link {
display: block;
height: 42px;
padding-left: 30px;
line-height: 42px;
font-size: 14px;
color: #fff;
background-image: url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png);
background-position: 200px;
background-repeat: no-repeat;
background-size: 14px 14px;
}
.children {
display: none;
position: absolute;
left: 234px;
top: 0;
border: 1px solid #e0e0e0;
border-left: 0;
font-size: 0;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
}
.children-col-2 {
width: 496px;
}
.children-col-3 {
width: 744px;
}
.children-col-4 {
width: 992px;
}
.children-list {
display: inline-block;
width: 248px;
padding: 1px 0;
font-size: 14px;
vertical-align: top;
}
.children-list a {
display: block;
padding: 18px 20px;
height: 40px;
line-height: 40px;
color: #333;
font-size: 0;
}
.children-list a:hover {
color: #ff6700;
}
.children-list a span {
display: inline-block;
width: 158px;
font-size: 14px;
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
}
.children-list img {
width: 40px;
height: 40px;
margin-right: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1 style="margin: 50px 0; text-align: center;">Swiper制作小米官网幻灯片/轮播图演示</h1>
<div class="dwo-wrap">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/image/5e59c0f1eb029.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1220,h_460,/quality,q_90" alt="">
</a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="nav-wrapper">
<ul class="nav">
<li class="nav-item">
<a class="nav-item-link" href="javascript:">手机 电话卡</a>
<div class="children children-col-4" style="display: block1;">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 9</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 10X 4G</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 10X 5G</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>小米10 青春版</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi K30 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi K30 Pro 变焦版</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>腾讯黑鲨游戏手机3</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>腾讯黑鲨游戏手机3 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>小米10 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>小米10</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi K30 4G</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi K30 5G</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 8A</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 8</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>小米MIX Alpha</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi Note 8 Pro</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi Note 8</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 7A</span>
</a>
</li>
</ul>
<ul class="children-list">
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>移动4G+专区</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>小米移动 电话卡</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>手机上门维修</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>云服务空间月卡</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>中国电信</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-item-link" href="javascript:">电视 盒子</a>
<div class="children children-col-4">
<ul class="children-list">
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>小米电视 大师 65英寸OLED</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 智能电视 X65</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt="">
<span>Redmi 智能电视 X55</span>
</a>
</li>
<li>
<a href="javascript:">
<img src="//repo.bfw.wiki/bfwrepo/icon/5fa73c837b995.png" alt=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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