_header.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. header{
  2. position: fixed;
  3. width: 100%;
  4. height: 40px;
  5. top: 0;
  6. padding: 0 20px;
  7. display: flex;
  8. justify-content: space-between;
  9. background-color: white;
  10. border-bottom: 2px solid rgb(0,0,0);
  11. z-index: 999;
  12. h1{
  13. margin: auto 0;
  14. }
  15. nav{
  16. margin: auto 0;
  17. & > .tags{
  18. & > a {
  19. li{
  20. position: relative;
  21. &::after{
  22. transition: width 0.5s;
  23. content: " ";
  24. position: absolute;
  25. background: rgb(0, 255, 0);
  26. width: 0%;
  27. height: 10px;
  28. margin: auto;
  29. z-index: -1;
  30. }
  31. }
  32. li:hover{
  33. position: relative;
  34. &::after{
  35. transition: width 0.5s;
  36. width: 100%;
  37. }
  38. }
  39. }
  40. }
  41. & > ul:nth-child(1) {
  42. & > li:nth-child(1){
  43. display: flex;
  44. position: relative;
  45. margin-right: 80px;
  46. &:after{
  47. content: " ";
  48. cursor: pointer;
  49. display: block;
  50. width: 25px;
  51. height: 40px;
  52. background-image: url(../images/fleche2.svg);
  53. background-repeat: no-repeat;
  54. background-position: center;
  55. // background-size: 10px;
  56. position: absolute;
  57. right: -25px;
  58. transition: all 0.5s;
  59. }
  60. &.hover{
  61. &:after{
  62. transform: rotate(180deg);
  63. transition: all 0.5s;
  64. }
  65. }
  66. }
  67. }
  68. }
  69. ul{
  70. display: flex;
  71. li{
  72. height: 40px;
  73. margin-right: 50px;
  74. align-items: center;
  75. display: flex;
  76. }
  77. }
  78. ul.tags{
  79. display: none;
  80. }
  81. ul.visible, ul.active{
  82. display: flex;
  83. position: absolute;
  84. top: 40px;
  85. right: 0px;
  86. width: auto;
  87. border-left: 2px solid black;
  88. border-bottom: 2px solid black;
  89. z-index: 999;
  90. background: white;
  91. a{
  92. display: flex;
  93. width: auto;
  94. height: 50px;
  95. margin: 0 20px;
  96. li{
  97. margin: auto;
  98. }
  99. }
  100. }
  101. }