jQuery开发平台导航代码

书写css代码。.mod-header { width: 100%; font-size: 14px; position: absolute; top: 0; left: 0; box-sizing: border-box; color: #fff; z-index: 10; transition: background .3s ease }.mod-header .layout { min-width: 1200px; width: auto; position: relative }.mod-header-logo { float: left; width: 189px; height: 60px; background-image: url(../img/cpimg/sprite.png); background-position: 0 -64px; margin-left: 12px }.mod-header-nav { position: relative; float: left }.mod-header-nav li { position: relative; float: left; line-height: 1 }.mod-header-nav a:hover { text-decoration: none }.mod-header-nav .top-cat { text-align: center; padding: 24px 12px; margin-right: 12px }.mod-header-nav .top-cat:first-child { margin: 0 12px }.mod-header-nav .top-cat h2 { position: relative }.mod-header-nav .top-cat h2 a { padding: 0; position: relative }.mod-header-nav .top-cat-arrow { content: ''; width: 20px; height: 12px; background-image: url(../img/cpimg/sprite.png); background-position: -331px -158px; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; vertical-align: bottom; margin-left: 4px }.mod-header-nav .top-cat.hassub:active .top-cat-arrow, .mod-header-nav .top-cat.hassub:hover .top-cat-arrow { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) }.mod-header-nav .slider { position: absolute; bottom: 0; left: 0; width: auto; height: 3px; background-color: #fff; transition: width .3s ease-out, -webkit-transform .3s ease-out; transition: transform .3s ease-out, width .3s ease-out; transition: transform .3s ease-out, width .3s ease-out, -webkit-transform .3s ease-out }.mod-header-user { line-height: 25px; position: absolute; top: 14px; right: 0; font-size: 0 }.mod-header-user .console { display: inline-block; padding: 0 12px; vertical-align: middle; font-size: 14px }.mod-header-user .console:hover { color: #126ee1 }.mod-header-user .user { padding-left: 11px; display: inline-block; vertical-align: middle; position: relative; border-left: 1px solid #fff; font-size: 14px; margin-right: 22px }.mod-header-user .user em { color: #fff; display: inline-block; max-width: 102px; vertical-align: bottom }.mod-header-user .user i { position: relative; display: inline-block; vertical-align: middle; background-image: url(../img/cpimg/sprite); background-position: -291px -174px; width: 20px; height: 12px; margin-left: 5px }.mod-header-user .user .dropdown { position: absolute; padding-top: 19px; top: 25px; left: 0; width: 100%; text-align: center; display: none }.mod-header-user .user .dropdown a { display: block; line-height: 40px; background-color: #333 }.mod-header-user .user:hover { color: #126ee1 }.mod-header-user .user:hover .dropdown { display: block }.mod-header-user .user:hover a { color: #fff }.mod-header-user .user:hover a:hover { color: #126ee1 }.mod-header-user .try { background-color: #fff; color: #0052d9; padding: 8px 18px; border-radius: 3px; line-height: 1; display: inline-block; transition: all .3s ease; vertical-align: middle; font-size: 14px; margin-right: 22px }.mod-header.active, .mod-header.hover, .mod-header:hover { background-color: #333 }.mod-header.active .mod-header-logo, .mod-header.hover .mod-header-logo, .mod-header:hover .mod-header-logo { background-image: url(../img/cpimg/sprite.png); background-position: 0 -128px }.mod-header.active .mod-header-user .user i:after, .mod-header.hover .mod-header-user .user i:after, .mod-header:hover .mod-header-user .user i:after { border-top-color: #333 }.mod-header.active .mod-header-user .try, .mod-header.hover .mod-header-user .try, .mod-header:hover .mod-header-user .try { color: #fff; background-color: #0052d9 }.mod-header .cat { position: relative }.mod-header .cat .layout { min-width: 0 }.mod-header .cat-ico { display: inline-block; width: 49px }.mod-header .cat-box { color: #fff; font-size: 0; box-sizing: border-box; padding: 0 0 0 220px; background-color: rgba(51,51,51,.95); position: absolute; width: 100%; top: 60px; left: 0; text-align: left; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top }.mod-header .cat-box.active, .mod-header .cat-box:hover { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1) }.mod-header .cat-group { display: inline-block; vertical-align: top; font-size: 14px; margin-left: 12px; padding: 20px 0 }.mod-header .cat-group:first-child { margin-left: 0 }.mod-header .cat-tit { font-size: 16px; padding-bottom: 7px }.mod-header .cat-tit i { display: inline-block; vertical-align: middle; margin-right: 16px }.mod-header .cat-item { display: block; width: 390px; box-sizing: border-box; padding: 7px 0 7px 50px; margin-bottom: 4px; font-size: 14px; line-height: 1 }.mod-header .cat-item:hover { background-color: #42464c }.mod-header .cat-item a { color: #fff }.mod-header .cat-item a:hover { color: #1070e1 }

书写并添加js代码。

代码整体结构。

查看效果。