js+css折叠弹出可返回子菜单列表导航效果代码-html代码-BFW代码库

js+css折叠弹出可返回子菜单列表导航效果代码

代码语言：html

代码描述：js+css折叠弹出可返回子菜单列表导航效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oxygen:400,700'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
    <style>
        /* ------------------------------------------------------------------------------------------------------
    Click LISTS Or STATS and then BACK to return !
    
    --------------------------------------------------------------------
    ------------------------------------------------------------------------------------ */
    
    
    * {
      margin:0 auto;
    padding:0px;
    text-align:center;
    text-decoration:none;
    font-family: 'Oxygen', sans-serif;
    }
    body {
      background-color:#F3D23D;  
    font-family: 'Oxygen', sans-serif;
     }
    
    
    
    .material-icons {
      margin:0px;
        position: relative;
        top: 5px;
    }
    .cont_princial  {
      position: absolute;
      width: 100%;
      height: 100%;
     
    }
    
    .cont_centrar {
    width:300px;
      height: 300px;
      position:absolute;
      top:50%;
      left:50%;  
      margin-left:-150px;
      margin-top:-150px;
    }
    
    .cont_img_perfil {  
    position:relative;
      width:100px;
      height:100px; 
    border-radius:50%;
      box-shadow:1px 10px 40px 3px rgba(0,0,0,0.2); 
    overflow: hidden;
    }
    
    .cont_img_perfil > img{
    /* The picture fix */
      margin-left:-10px; 
    /* The picture fix */  
      height: 100%;;
    }
    
    
    
    .cont_list_menu {
     padding-top:20px;  
    }
    .cont_list_menu > ul {
        z-index: 5;
        overflow: hidden;
        box-shadow: 0px 30px 30px -10px rgba(0,0,0,0.15);
        border-radius: 3px;
    display:none;
    opacity:0;
    transition: all 0.2s;
    -webkit-transition: all 0.2s; 
     opacity:1;
       display:block; 
    }
    
    
    .cont_img_perfil:hover + .cont_list_menu > ul,.cont_list_menu:hover > ul, .cont_list_menu > ul:hover {
     opacity:1;
       display:block; 
    }
    
    
    .active_m > ul {
    opacity:1;
       display:block;   
    }
    
    .cont_list_menu >ul > li {
      background-color:#F7E59D;
     list-style:none;  
    text-align:left;  
    }
    
    .cont_list_menu >ul > li:first-child{
      padding-top:20px;
    }
    
    .cont_list_menu >ul > li:last-child{
      padding-bottom:20px;
    }
    
    
    .cont_list_menu >ul > li > a {
      padding:10px;
    padding-left:25px;
      display:inline-block;   
      font-weight:700;
    color:#B9A176;
    width:100%;
    text-align:left;
    }
    .cont_list_menu >ul > li > a:hover {
      background-color:#F1DD93;
    }
    .cont_list_menu >ul > li > ul {
      top:120px;
      position:absolute;
        background-color:#F7E59D;
       list-style:none;  
      text-align:left;  
      width:280px;
      left:10px;
      z-index:-1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    
    }
    
    .cont_list_menu >ul > li > ul > li:first-child{
      padding-top:20px;
    }
    
    .cont_list_menu >ul > li > ul > li:last-child{
      padding-bottom:20px;
    }
    
    
    .cont_list_menu >ul > li > ul > li > a {
      padding:10px;
    padding-left:25px;
      display:block;   
    text-align:left;
      font-weight:700;
    color:#B9A176;
    }
    
    .cont_list_menu >ul > li > ul > li >.........完整代码请登录后点击上方下载按钮下载查看