css+jquery实现pc商城菜单分类效果代码
代码语言：html
所属分类：菜单导航
代码描述：css+jquery实现pc商城菜单分类效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.hand {
cursor: pointer;
}
img {
border: 0;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
input {
vertical-align: middle;
}
body {
background: #fff
}
/*边框*/
.border_gray {
border: solid 1px #ddd;
}
.borderT_none {
border-top: 0 !important;
}
.borderB_none {
border-bottom: 0 !important;
}
.border_none {
border: none;
}
/*文本对齐方式*/
.text_c {
text-align: center;
}
.text_r {
text-align: right;
}
.text_l {
text-align: left!important;
}
/*内外边距*/
.push_all {
margin: 10px;
}
.push_t {
margin-top: 10px;
}
.push_r {
margin-right: 10px;
}
.push_b {
margin-bottom: 10px;
}
.push_l {
margin-left: 10px;
}
.push_t0 {
margin-top: -10px;
}
.fill_all {
padding: 10px;
}
.fill_t {
padding-top: 10px;
}
.fill_r {
padding-right: 10px;
}
.fill_b {
padding-bottom: 10px;
}
.fill_l {
padding-left: 10px;
}
/*浮动和清除浮动*/
.clear_both {
clear: both;
}
.float_l {
float: left;
}
.float_r {
float: right;
}
/*定位*/
.position_ab {
position: absolute;
}
.position_re {
position: relative;
}
/*显示隐藏*/
.text_hide {
text-indent: -9999px;
}
.tag_show {
display: block!important;
}
.tag_hide {
display: none!important;
}
.tag_c {
margin: 0 auto;
}
.tag_line {
display: inline;
}
.over_hide {
overflow: hidden;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
/* End hide from IE-mac */
/*字体颜色*/
.orange {
color: #e37513;
}
.orange2 {
color: #f90;
}
.orange3 {
color: #e30;
}
.blue {
color: #1292cd;
}
.gray {
color: #6d6d6d;
}
.oatmeal {
color: #ccc;
}
.red {
color: #f00;
}
.green {
color: #093;
}
.white {
color: #fff;
}
/*字体大小*/
.font_12 {
font-size: 12px;
}
.font_14 {
font-size: 14px;
}
.font_16 {
font-size: 16px;
}
/*文字修饰*/
.font_bold {
font-weight: bold;
}
.font_lineThrough {
text-decoration: line-through;
}
.font_underline {
text-decoration: underline;
}
.lineH_20 {
line-height: 20px;
}
.lineH_24 {
line-height: 24px;
}
/*链接样式1-----------默认黑色，悬停红色，按下灰色---------*/
.a_default {
color: #000;
}
.a_default:hover {
color: #f00;
}
.a_default:active {
color: #ccc;
}
/*链接样式2-----------默认红色，悬停灰色---------*/
.a_red {
color: #f00;
}
.a_red:hover {
color: #ccc;
}
/*链接样式3-----------默认蓝色，悬停红色---------*/
.a_blue {
color: #1292cd;
}
.a_blue:hover {
color: #f00;
}
/*整体居中，宽度1000*/
.of_whole {
width: 1000px;
margin: 0 auto;
}
/*顶部*/
#of_top {
width: 100%;
height: 28px;
line-height: 29px;
background: url(images/ofcard_bg.png) repeat-x 0 0;
overflow: hidden;
}
#of_topNav a {
margin: 0 5px;
padding: 2px;
}
/*登录区*/
.of_login {
display: block;
width: 360px;
}
.of_login li {
float: left;
margin-right: 3px;
height: 28px;
overflow: hidden;
}
.loginMenu {
display: block;
width: 44px!important;
height: 14px!important;
_height: 12px!important;
line-height: 16px!important;
border: 1px solid #999!important;
background: #fff!important;;margin: 6px;
color: #f90!important;
_color: #f90 !important;
}
.registerMenu {
width: 63px!important;
}
.loginMenu:hover {
border: 1px solid #f90;
}
#login_div {
width: 220px;
height: 120px;
padding: 5px;
border: 1px solid #ccc;
background: #f4f4f4;
top: 23px;
left: 6px;
}
#login_div p {
height: 24px;
line-height: 24px;
}
#login_close {
width: 50px;
height: 24px;
line-height: 24px;
bottom: 0;
right: 0;
}
#loginover {
padding: 0;
margin: 0;
height: 30px;
line-height: 30px;
overflow: hidden;
}
#loginover li {
font-weight: normal;
margin-right: 10px;
}
/*logo和搜索区*/
#of_logo {
width: 320px;
height: 50px;
background: url(images/ofcard_logo.png) no-repeat 0 0;
margin: 20px 0;
overflow: hidden;
}
#of_logo div {
text-align: left;
margin-left: 180px;
margin-top: 10px;
font-size: 14px;
font-weight: bold;
color: #D25400;
line-height: 20px;
}
#of_logo span {
color: #FF3300;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
}
#of_search {
width: 460px;
height: 35px;
padding-top: 5px;
text-align: left;
background: url(images/ofcard_bg.png) no-repeat 0 -50px;
margin: 25px;
margin-right: 0;
overflow: hidden;
}
.lgh16 {
line-height: 16px!important;
}
#of_s_keyword {
width: 355px;
height: 26px;
line-height: 30px;
color: #999999;
float: left;
}
#of_s_keyword input {
border: 0;
background-color: transparent;
width: 300px;
height: 26px;
line-height: 26px;
margin-left: 40px;
}
#of_submit input {
border: 0;
background-color: transparent;
width: 95px;
height: 30px;
float: left;
cursor: pointer;
}
/*导航和站点栏*/
#of_mainBody {
height: 680px;
overflow: hidden;
}
/*导航和站点栏*/
#of_NavSets {
width: 100%;
height: 32px;
}
.of_nav {
z-index: -1;
}
.of_nav li {
float: left;
width: 92px;
height: 32px;
line-height: 36px;
background: url(images/ofcard_bg.png) no-repeat -100px -100px;
margin: 0 3px;
}
.of_nav li a {
display: block;
width: 92px;
height: 32px;
line-height: 36px;
text-align: center;
}
#of_homeNav {
width: 96px;
background: url(images/ofcard_bg.png) no-repeat 0 -100px;
}
#of_homeNav a {
width: 96px;
color: #fff;
font-weight: bold;
}
.of_set {
height: 21px;
margin-top: 5px;
}
.of_set li {
float: left;
width: 66px;
height: 21px;
line-height: 21px!important;
background: url(images/ofcard_bg.png) no-repeat -300px -100px;
margin-left: 10px;
}
.of_set li a {
color: #c64f00;
_color: #c64f00 !important;
height: 21px;
line-height: 21px!important;
line-height: 23px\9!important;
}
.of_set li a:hover {
color: #f00;
_color: #f00 !important;
height: 21px;
line-height: 21px!important;
line-height: 23px\9!important;
}
.of_setMenu {
width: 80px !important;
height: 21px;
line-height: 21px!important;
line-height: 23px\9!important;
background: url(images/ofcard_bg.png) no-repeat -400px -100px !important;
padding-left: 9px;
cursor: pointer;
text-align: left;
z-index: 1000;
}
.of_setMenu_click {
width: 80px!important;
background: url(images/ofcard_bg.png) no-repeat -400px -400px !important;
padding-left: 9px;
cursor: pointer;
text-align: left;
}
of_setMenu li,.of_setMenu_click li {
border: none;
height: 20px;
line-height: 20px;
background: none;
}
#of_sideList {
width: 590px;
height: 110px;
top: 21px;
right: 0;
background-image: url(images/ofcard_bg.png);
background-position: 0 -530px!important;
margin: 0;
padding: 0;
right: 0;
padding-top: 15px;
overflow: hidden;
}
#of_sideList li {
width: 590px;
padding-left: 5px;
text-align: left;
background-image: url();
height: 26px;
line-height: 26px;
}
#of_sideList li a {
color: #484848!important;
margin-right: 30px;
}
#of_sideList li a:hover {
color: #ff0000!important;
}
#navLine {
height: 3px;
border: 1px solid #f90;
border-left: none;
border-right: none;
background: #fc9;
_margin-top: -5px;
}
.of_new {
position: relative;
}
.of_new span {
background: url("images/new.gif") no-repeat left top;
display: inline-block;
height: 14px;
position: absolute;
right: -10px;
top: 0;
width: 26px;
}
body {
font: 12px/1.5 Tahoma,Helvetica,Arial,Simsun,sans-serif;
color: #484848;
}
/* header */
.sline {
margin: 0 auto;
width: 1000px;
}
.topM {
margin: 18px auto 30px;
_margin: 26px auto 30px;
}
.header .OfcardLogo {
float: left;
padding-left: 20px;
}
.header .OfcardLogo a {
display: block;
width: 146px;
height: 48px;
background: url(//repo.bfw.wiki/bfwrepo/img/headPic.png) left top no-repeat;
text-indent: -9999px;
}
.header .searchBar {
float: right;
}
.header .searchBar .searchVInput {
border: 3px solid #d3d3d3;
width: 364px;
height: 40px;
}
.header .searchBar #cardname {
margin: 0;
vertical-align: middle;
padding-left: 8px;
width: 310px;
height: 38px;
line-height: 40px;
border: 0;
font-size: 18px;
font-family: verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;
}
.header .searchBar .cardnameV {
background: url(//repo.bfw.wiki/bfwrepo/img/headPic.png) 10px -228px no-repeat;
}
.header .searchBar .searchVInput a {
float: right;
width: 40px;
height: 40px;
background: url(//repo.bfw.wiki/bfwrepo/img/headPic.png) left -153px no-repeat;
text-indent: -9999px;
}
.header .searchBar .searchVInput a:hover {
background-position: -60px -153px
}
.header .searchBar .searchVInput a:active {
background-position: -116px -153px
}
.header .navigationBar {
display: block;
height: 42px;
background: #f60;
}
.header .navigationBar .navigationBarInnel {
display: block;
margin: 0 auto;
width: 1000px;
}
.header .navigationBar tt {
display: block;
position: relative;
float: left;
margin: -10px 0;
width: 200px;
height: 62px;
background: url(//repo.bfw.wiki/bfwrepo/img/headPic.png) left -76px no-repeat;
}
.header .navigationBar tt .mainProNavArea {
position: absolute;
top: 62px;
}
.header .navigationBar tt.slideOpenNAV .mainProNavArea {
display: none;
}
.header .navigationBar tt.slideOpenNAV {
height: 56px;
}
.header .navigationBar .mainMenuV {
float: left;
padding-left: 5px;
}
.header .navigationBar .mainMenuV a {
float: left;
margin: 0 2px;
padding: 0 25px;
height: 42px;
line-height: 42px;
font-size: 14px;
color: #fff;
font-family: verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;
*font-weight: bold;
}
.header .navigationBar .mainMenuV a:hover {
color: #000;
background: #bc6022;
}
.header .navigationBar .mainMenuV a:active {
color: #ccc;
background: #999999;
}
/* 搜索弹出窗口 */
#KsmanDisp {
position: absolute;
z-index: 9999!important;
margin: 0!important;
padding: 0!important;
border: 3px solid #d3d3d3!important;
background: #fff!important;
width: 364px!important;
text-align: left;
transition: display 0.2s linear 0s;
box-shadow: 0px 5px 5px #999;
}
#KsmanDisp div {
margin: 1px;
padding: 2px 10px;
line-height: 26px;
cursor: default;
}
#KsmanDisp b {
color: #5bbc39;
}
#KsmanDisp .sman_selectedStyle {
background: #82d864!important;
color: #fff;
transition: background 0.2s linear 0s;
}
#KsmanDisp .sman_selectedStyle b {
color: #fefc56;
}
#producttype {
display: none;
}
/* 主导航模块 */
.mainProNav {
border: 1px solid #ddd;
position: relative;
z-index: 9996;
cursor: default;
transition: background 0.2s linear 0s;
text-align: left;
width: 188px;
background: #fff;
}
.mainProNavHover {
border: 1px solid #ececec;
background: #ececec;
color: #666;
}
.mainProNav dl,.mainProNav dt,.mainProNav dd {
display: block;
margin: 0;
padding: 0;
}
.mainProNav dt {
padding-left: 24px;
height: 50px;
line-height: 50px;
font-size: 16px;
background: url(mainProNavIcon.png) right -54px no-repeat;
font-family: verdana,Tahoma,Arial,Hei,"Microsoft Yahei",SimHei;
transition: background-color 0.2s linear 0s, padding-left 0.2s linear 0s;
}
.mainProNav .dlHover dt {
position: relative;
z-index: 9999;
margin: -1px -3px -1px -1px;
*margin: -2px -3px -2px -1px;
#top: -1px;
padding-left: 45px;
height: 52px;
line-height: 52px;
background: #f60 url(mainProNavIcon.png) left top no-repeat;
color: #fff;
}
.mainProNav dd {
display: none;
position: absolute;
left: 188px;
top: -1px;
_top: 0px;
z-index: 9998;
padding: 20px;
border: 1px solid #b9b9b9;
border-left: 3px solid #f60;
background: #fff;
width: 467px;
height: 260px;
box-shadow: 0px 0px 5px #999;
}
.mainProNav .dlHover dd {
display: block;
}
.mainProNav dl dd a {
transition: background-color 0.1s linear 0s, color 0.1s linear 0s;
color: #666;
line-height: 18px;
}
.mainProNav dl dd a:hover {
color: #f60;
}
.mainProNav dl dd a:active {
color: #ccc;
}
.mainProNav dl dd h6 a {
font-size: 14px;
line-height: 20px;
color: #f60;
font-weight: normal;
}
.mainProNav dl dd h6 a:hover {
color: #2567d3;
}
.mainProNav dl dd h6 a:active {
color: #666;
}
.mainProNav dl dd p {
padding: 4px 0 15px;
*padding: 0px 0 14px;
}
.mainProNav dl dd ul {
padding: 10px;
overflow: hidden;
}
.mainProNav dl dd ul li {
line-height: 24px;
}
.mainProNav dl dd p a {
display: inline-block;
*zoom: 1;
display: inline;
padding: 2px 2px 0;
margin-right: 10px;
}
.mainProNav dl dd p a.more {
color: #999;
}
.mainProNav dl dd p a.more:hover {
color: #f60;
}
.mainProNav dl dd p a.more:active {
color: #ccc;
}
.mainProNav dl dd h2 a {
display: inline-block;
*zoom: 1;
display: inline;
padding: 5px 12px 8px;
*padding: 5px 12px;
font-size: 25px;
background: #6dd5d7;
color: #fff;
}
.mainProNav dl dd h2 a:hover {
background: #4bc1c3;
color: #fff;
}
.mainProNav dl dd h2 a:active {
background: #b1b1b1;
color: #fff;
}
.mainProNav .bankPayBar {
displa.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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