移动端h5分类帅选菜单效果-html代码-BFW代码库

移动端h5分类帅选菜单效果

代码语言：html

代码描述：移动端h5分类帅选菜单效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
   <style>
       @charset "UTF-8";html{font-size:4vw;height:100vh}*{margin:0;padding:0;outline:none}*:not(input,textarea){-webkit- -callout:inherit;-webkit-user-select:auto}body{font-family:arial,微软雅黑,宋体;font-size:1rem;color:#333;-webkit- -callout:inherit;-webkit-user-select:auto;margin:auto;height:100vh}a{color:#54d09e;text-decoration:none;-webkit-tap-highlight-color:transparent}a:hover{text-decoration:none}button,input,select,textarea{font-size:100%;margin:0;padding:0;outline:none}textarea,input{resize:none;outline:none}textarea{resize:none;-webkit-appearance:none}ul,ol,li{list-style:none}em{font-style:normal}input[type=button]{-webkit-appearance:none;outline:none}h1,h2,h3,h4,h5,h6{font-weight:400}b{font-weight:400}.clear{clear:both;font-size:0;line-height:0;height:0}.topmenu{width:100%}.topmenu dt{width:33.3%;float:left}.selectlist{width:100%;height:auto;box-sizing:border-box}.select_textdiv{height:3rem;width:100%;line-height:3rem;text-align:center;border-bottom:2px solid #b3b3b3;position:relative;border-left:2px solid -webkit-linear-gradient(red,blue)}.select_textul{width:100%;line-height:3rem;box-sizing:border-box;display:none;width:980px;max-height:20rem;overflow-y:scroll}.select_first_ul{width:100%;position:absolute;box-sizing:border-box;left:0}.select_first_ul>li{padding:0 .5rem;box-sizing:border-box}.select_first_ul>li>p{width:50%;padding:0 1rem;box-sizing:border-box;border-bottom:1px #b1b1b1 solid}.focus>p{border-bottom:1px #ff9800 solid!important;color:#ff9800}.select_second_ul{width:50%;position:absolute;right:0;top:0;background:#fff;display:none;box-sizing:border-box;padding-left:.5rem}.down{position:absolute;top:0;right:.5rem;display:inline-block;width:1rem;height:100%}.down img{width:1rem;margin-top:1rem}.divfocus::after{position:absolute;bottom:0;left:46%;border-bottom:.5rem solid #ff9800;border-left:.5rem solid transparent;border-right:.5rem solid transparent;content:""}.focusli{background:#ffc107;color:#fff}.select_second_ul>li{padding:0 .5rem;box-sizing:border-box;border-bottom:1px solid #eaeaea}
   </style>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js">.........完整代码请登录后点击上方下载按钮下载查看