ipv6网站开发,免费动画制作软件,品牌网站建设可信大蝌蚪,苏州工程网站建设一、效果图
1.点击显示菜单栏#xff0c;点击x号关闭#xff1b; 2.点击一级菜单#xff0c;展开显示二级#xff0c;并且加号变为减号#xff1b; 3.点击其他一级导航#xff0c;自动收起展开的导航。 二、代码实现
!DOCTYPE html
htmlhead点击x号关闭 2.点击一级菜单展开显示二级并且加号变为减号 3.点击其他一级导航自动收起展开的导航。 二、代码实现
!DOCTYPE html
htmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8 /meta http-equivcontent-language contentzh-CN /meta nameviewport contentwidthdevice-width,initial-scale1.0,user-scalableno /meta nameapple-mobile-web-app-capable contentyes /meta nameapple-mobile-web-app-status-bar-style contentblack /meta nameformat-detection contenttelephoneno /meta nameKeywords content /meta nameDescription content /meta http-equivX-UA-Compatible contentIEEdge,chrome1title/titlescript srcstatic/js/jquery-1.11.3.js typetext/javascript charsetutf-8/scriptstyle.header {position: relative;height: 100px;padding: 30px;box-sizing: border-box;}.header .header-right {position: relative;float: right;}.header .l-toggle {float: left;width: 38px;height: 20px;cursor: pointer;z-index: 99;position: relative;}.header .l-toggle span {position: absolute;top: 0;right: 0;left: 0;display: block;width: 26px;height: 2px;background-color: #000;}.header .l-toggle .line1 {margin: 0 auto;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;transition: margin .3s .5s ease, transform .5s ease;}.header .l-toggle .line2 {margin: 8px auto 0;}.header .l-toggle .line3 {margin: 16px auto auto;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;transition: margin .3s .5s ease, transform .5s ease;}.header .l-toggle.hover span {background: #828282;}.header .l-toggle.hover .line1 {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);margin: 8px auto 0;-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;transition: margin .3s ease, transform .5s .3s ease;}.header .l-toggle.hover .line3 {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);margin: 8px auto 0;-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;transition: margin .3s ease, transform .5s .3s ease;}.header .sub-menu {width: 217px;height: auto;position: absolute;right: 30px;top: 20px;z-index: 2;background: rgba(255, 255, 255, 0.83);padding: 70px 24px 30px;box-sizing: border-box;display: none;border: 1px solid rgba(0, 0, 0, 0.2);}.header.active .line {height: 100vh;background: rgba(130, 130, 130, 0.3);}.header .sub-menu_ul {width: 100%;padding: 0;}.header .sub-menu_ul li {width: 100%;margin-bottom: 20px;font-family: Microsoft YaHei UI;position: relative;text-align: right;list-style: none;}.header .sub-menu_ul li .li_title {display: flex;align-items: center;justify-content: space-between;font-size: 18px;font-weight: bold;color: #ABABAB;/* color: #333333; */cursor: pointer;}.header .sub-menu_ul li .li_title span {color: #858585;font-size: 20px;display: none;}.header .sub-menu_ul li .li_title .spanAdd {display: block;}.menu_li_active .spanAdd {display: none !important;}.menu_li_active .spanSub {display: block !important;}.menu_li_active a {color: #333 !important;top: -7px !important;}.header .sub-menu_ul li .li_title a {position: absolute;right: 0;top: -14px;z-index: 999;font-size: 18px;font-weight: bold;color: #ABABAB;width: 66%;}.header .sub-menu_ul li a {width: 100%;display: block;font-size: 14px;font-weight: 400;color: #333333;margin-top: 15px;transition: 0.5s;text-decoration: none;}.header .sub-menu_ul li a:hover {text-decoration: underline;}.header .sub-menu_ul li .li_con {display: none;}/style/headbody!-- 头部 --header classheaderdiv classheader-rightdiv idtoggle classl-togglespan classline1/spanspan classline2/spanspan classline3/span/div/divdiv classsub-menuul classsub-menu_ullidiv classli_titlespan classspanAdd/spanspan classspanSub stylefont-size: 29px;-/spana hrefaboutHongtian.html走进鸿天/a/divdiv classli_cona hrefaboutHongtian.html关于鸿天/aa hrefaboutHistory.html发展历程/aa hrefaboutCulture.html企业文化/aa hrefaboutHonors.html荣誉资质/aa hrefaboutBrand.html企业品牌/a/div/lilidiv classli_titlespan classspanAdd/spanspan classspanSub stylefont-size: 29px;-/spana hrefsavingList.html集团业务/a/divdiv classli_cona hrefsavingEnvirProtection.htmlODM供应链/aa hrefsavingEnvirProtection.html品牌零售/a/div/lilidiv classli_titlespan classspanAdd/spanspan classspanSub stylefont-size: 29px;-/spana hrefsavingList.html技术研发/a/divdiv classli_cona hrefsavingEnvirProtection.html研发中心/aa hrefsavingEnvirProtection.html印绣中心/aa hrefsavingEnvirProtection.html检测中心/a/div/lilidiv classli_titlespan classspanAdd/spanspan classspanSub stylefont-size: 29px;-/spana hrefsavingList.html可持续发展/a/divdiv classli_cona hrefsavingEnvirProtection.html节能环保/aa hrefsavingEnvirProtection.html慈善公益/aa hrefsavingEnvirProtection.html校企合作/a/div/lilidiv classli_titlespan classspanAdd/spanspan classspanSub stylefont-size: 29px;-/spana hreffocusHongtian.html聚焦鸿天/a/divdiv classli_cona hreffocusHongtian.html企业动态/aa hreffocusHongtian.html品牌动态/aa hreffocusHongtian.html鸿天人家/aa hreffocusHongtian.html红色党建/a/div/liscript$(function() {$(.sub-menu_ul li).click(function() {$(this).find(.li_con).slideToggle()$(this).siblings().find(.li_con).slideUp()if ($(this).hasClass(menu_li_active)) {$(this).removeClass(menu_li_active)} else {$(this).addClass(menu_li_active).siblings().removeClass(menu_li_active)}})})/script/ul/div/headerscript$(function() {$(.l-toggle).on(click, function() {var _this $(this);if (!$(this).hasClass(hover)) {$(this).addClass(hover);$(this).children(.line2).stop(true, true).fadeOut(300);$(this).parents(.header-right).siblings(.sub-menu).stop().fadeIn();} else {$(this).removeClass(hover);$(.header).removeClass(active);$(this).children(.line2).stop(true, true).fadeIn(300);$(this).parents(.header-right).siblings(.sub-menu).stop().fadeOut();}});})/script/body
/html完成~
