Advertisement
hungvb

MENU NANG CAO CSS

Jan 19th, 2022
298
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.13 KB | None | 0 0
  1. @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
  2. *{
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6.   user-select: none;
  7.   font-family: 'Poppins', sans-serif;
  8. }
  9. body{
  10.  background: #18191A;
  11.   overflow: hidden;
  12. }
  13. nav{
  14.   position: absolute;
  15.   top: 30%;
  16.   left: 50%;
  17.   transform: translate(-50%, -50%);
  18. }
  19. nav .drop-btn{
  20.   width: 400px;
  21.   background: #242526;
  22.   border-radius: 5px;
  23.   line-height: 55px;
  24.   font-size: 20px;
  25.   font-weight: 500;
  26.   color: #b0b3b8;
  27.   padding: 0 20px;
  28. }
  29. nav .drop-btn span{
  30.   float: right;
  31.   line-height: 50px;
  32.   font-size: 28px;
  33.   cursor: pointer;
  34. }
  35. nav .tooltip{
  36.   position: absolute;
  37.   right: 20px;
  38.   bottom: -20px;
  39.   height: 15px;
  40.   width: 15px;
  41.   background: #242526;;
  42.   transform: rotate(45deg);
  43.   display: none;
  44. }
  45. nav .tooltip.show{
  46.   display: block;
  47. }
  48. nav .wrapper{
  49.   position: absolute;
  50.   top: 65px;
  51.   display: flex;
  52.   width: 400px;
  53.   overflow: hidden;
  54.   border-radius: 5px;
  55.   background: #242526;
  56.   display: none;
  57.   transition: all 0.3s ease;
  58. }
  59. nav .wrapper.show{
  60.   display: block;
  61.   display: flex;
  62. }
  63. .wrapper ul{
  64.   width: 400px;
  65.   list-style: none;
  66.   padding: 10px;
  67.   transition: all 0.3s ease;
  68. }
  69. .wrapper ul li{
  70.   line-height: 55px;
  71. }
  72. .wrapper ul li a{
  73.   position: relative;
  74.   color: #b0b3b8;
  75.   font-size: 18px;
  76.   font-weight: 500;
  77.   padding: 0 10px;
  78.   display: flex;
  79.   border-radius: 8px;
  80.   align-items: center;
  81.   text-decoration: none;
  82. }
  83. .wrapper ul li:hover a{
  84.   background: #3A3B3C;
  85. }
  86. ul li a .icon{
  87.   height: 40px;
  88.   width: 40px;
  89.   margin-right: 13px;
  90.   background: #ffffff1a;
  91.   display: flex;
  92.   justify-content: center;
  93.   text-align: center;
  94.   border-radius: 50%;
  95. }
  96. ul li a .icon span{
  97.   line-height: 40px;
  98.   font-size: 20px;
  99.   color: #b0b3b8;
  100. }
  101. ul li a i{
  102.   position: absolute;
  103.   right: 10px;
  104.   font-size: 25px;
  105.   pointer-events: none;
  106. }
  107. .wrapper ul.setting-drop,
  108. .wrapper ul.help-drop{
  109.   display: none;
  110. }
  111. .wrapper .arrow{
  112.   padding-left: 10px;
  113.   font-size: 20px;
  114.   font-weight: 500;
  115.   color: #b0b3b8;
  116.   cursor: pointer;
  117. }
  118. .wrapper .arrow span{
  119.   margin-right: 15px;
  120. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement