css实现自适应下拉菜单效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style type="text/css" media="all"> .index-nav { width: 100%; border-bottom: 1px solid #eeeeee; height: 50px; box-sizing: border-box; background: white; } .index-nav-frame { width: 1200px; margin: 0 auto; } .index-nav-frame-line { color: #333333; background: white; float: left; position: relative; display: block; outline: none; cursor: pointer; width: 100px; line-height: 50px; text-align: center; font-weight: 700; } .index-nav-frame-line.active { color: #b63b4d; } .index-nav-frame-line-center { opacity: 0; height: 0; position: absolute; overflow: hidden; width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */-o-transition: all 0.5s; /* Opera */ } .index-nav-frame-line-li { width: 100%; font-weight: 500; text-align: center; background: white; color: #666666; } .index-nav-frame-line-li:hover { background: #444359; color: white; } .index-nav-frame-line-li:hover a { background: #444359; color: white; } .index-nav-frame-line-focus:focus { display: none; } .index-nav-frame-line:hover .index-nav-frame-line-center { height: auto; opacity: 1; } .nav-line { height: 50px; width: 100%; position: relative; display: none; outline: none; } .nav-small { width: 30px; height: 30px; position: absolute; right: 10px; top: 10px; cursor: pointer; display: none; outline: none; } .nav-small img { width: 100%; height: 100%; object-fit: cover; } .nav-small-focus { position: absolute; width: 100%; height: 100%; display: none; } .nav-small-focus:focus { display: none; } @media only screen and (max-width:800px) { .index-nav-frame-line-li a { display: block; color: white; } .nav-line { display: block; border-bottom: 1px solid #eeeeee; } .nav-small { display: block; } .nav-small:focus~.index-nav-frame-line { height: auto; border-bottom: 1px solid #ccc; } .nav-small:focus .nav-small-focus { display: block; } .index-nav-frame { width: 100%; } .index-nav-frame-line { width: 100%; height: 0; overflow: hidden; } .index-nav-frame-line-center { position: relative; background: #444359; } .index-nav-frame-line:hover .index-nav-frame-line-center { height: 0; opacity: 0; } .index-nav-frame-line-li { border-bottom: 1px solid #4b4a5e; color: #d9d9d9; background: #444359; } .index-nav-frame-line-li:hover { background: #b63b4d; } .index-nav-frame-line:focus { height: auto; border-bottom: 1px solid #ccc; } .index-nav-frame-line:focus>.index-nav-frame-line-center { height: auto; opacity: 1; } .index-nav-frame-line:focus .index-nav-frame-line-header { color: #B63B4D; } .index-nav-frame-line-focus { display: none; width: 100%; height: 50px; position: absolute; left: 0; top: 0; } .index-nav-frame-line:focus .index-nav-frame-line-focus { display: block; } } </style> </head> <bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0