jquery+css实现自适应多级下拉菜效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery+css实现自适应多级下拉菜效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800); *,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td { margin: 0; padding: 0; } article,aside,figure,footer,header,hgroup,nav,section { display: block; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; } a { color: #BA0707; text-decoration: none; } a:hover { color: #FF675C; } body { background: #e5e5e5; color: #374147; font: 14px "Open Sans",Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; line-height: 1; width: 100%; } nav { display: block; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #FF675C; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 170px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #FF675C; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 169px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #FF675C; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #FF675C; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0