济南微信小程序开发

资讯中心

资讯中心

当前位置：主页 > 资讯中心 > 最新资讯 >

微信小程序下拉菜单效果

发布时间：作者：济南小程序开发来源：未知点击:



    

  1. //wcss 
    2. 

  2. /**DropDownMenu**/ 
    3. 

  3.  
    4. 

  4. /*总菜单容器*/ 
    5. 

  5.  
    6. 

  6. .menu { 
    7. 

  7. display: block; 
    8. 

  8. height: 28px; 
    9. 

  9. position: relative; 
    10. 

  10. } 
    11. 

  11.  
    12. 

  12. /*一级菜单*/ 
    13. 

  13.  
    14. 

  14. .menu dt { 
    15. 

  15. font-size: 15px; 
    16. 

  16. float: left; 
    17. 

  17. /*hack*/ 
    18. 

  18. width: 33%; 
    19. 

  19. height: 38px; 
    20. 

  20. border-right: 1px solid #d2d2d2; 
    21. 

  21. border-bottom: 1px solid #d2d2d2; 
    22. 

  22. text-align: center; 
    23. 

  23. background-color: #f4f4f4; 
    24. 

  24. color: #5a5a5a; 
    25. 

  25. line-height: 38px; 
    26. 

  26. z-index: 2; 
    27. 

  27. } 
    28. 

  28.  
    29. 

  29. /*二级菜单外部容器样式*/ 
    30. 

  30.  
    31. 

  31. .menu dd { 
    32. 

  32. position: absolute; 
    33. 

  33. width: 100%; 
    34. 

  34. margin-top: 40px; 
    35. 

  35. left: 0; 
    36. 

  36. z-index: -99; 
    37. 

  37. } 
    38. 

  38.  
    39. 

  39. /*二级菜单普通样式*/ 
    40. 

  40.  
    41. 

  41. .menu li { 
    42. 

  42. font-size: 14px; 
    43. 

  43. line-height: 34px; 
    44. 

  44. color: #575757; 
    45. 

  45. height: 34px; 
    46. 

  46. display: block; 
    47. 

  47. padding-left: 8px; 
    48. 

  48. background-color: #fff; 
    49. 

  49. border-bottom: 1px solid #dbdbdb; 
    50. 

  50. } 
    51. 

  51.  
    52. 

  52. /*二级菜单高亮样式*/ 
    53. 

  53.  
    54. 

  54. .menu li.highlight { 
    55. 

  55. background-color: #f4f4f4; 
    56. 

  56. color: #48c23d; 
    57. 

  57. } 
    58. 

  58.  
    59. 

  59. /* 显示与隐藏 */ 
    60. 

  60.  
    61. 

  61. .show { 
    62. 

  62. /*display: block;*/ 
    63. 

  63. visibility: visible; 
    64. 

  64. } 
    65. 

  65.  
    66. 

  66. .hidden { 
    67. 




	
 

          

            
          

        

      

    

  



 







  
TOP


  

    
QQ客服


  

  
15069066861


  


    

    


      

       

    


  







拨打电话