_header.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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. z-index: 0;
  22. &::after{
  23. content: " ";
  24. position: absolute;
  25. background: rgb(0, 255, 0);
  26. height: 10px;
  27. margin: auto;
  28. z-index: -1;
  29. transition: width 0.5s;
  30. width: 0%;
  31. }
  32. }
  33. &:hover{
  34. li{
  35. &::after{
  36. content: " ";
  37. position: absolute;
  38. background: rgb(0, 255, 0);
  39. height: 10px;
  40. margin: auto;
  41. z-index: -1;
  42. width: 100%;
  43. transition: width 0.5s;
  44. }
  45. }
  46. }
  47. }
  48. }
  49. & > ul:nth-child(1) {
  50. & > li:nth-child(1){
  51. display: flex;
  52. position: relative;
  53. margin-right: 60px;
  54. &:after{
  55. content: " ";
  56. cursor: pointer;
  57. display: block;
  58. width: 25px;
  59. height: 40px;
  60. background-image: url(../images/fleche2.svg);
  61. background-repeat: no-repeat;
  62. background-position: center;
  63. // background-size: 10px;
  64. position: absolute;
  65. right: -25px;
  66. transition: all 0.5s;
  67. }
  68. &.hover{
  69. &:after{
  70. transform: rotate(180deg);
  71. transition: all 0.5s;
  72. }
  73. }
  74. }
  75. }
  76. }
  77. ul{
  78. display: flex;
  79. flex-wrap: wrap;
  80. justify-content: flex-end;
  81. li{
  82. height: 40px;
  83. margin-right: 50px;
  84. align-items: center;
  85. display: flex;
  86. &:last-child{
  87. margin-right: 0px!important;
  88. }
  89. }
  90. }
  91. ul.tags{
  92. display: none;
  93. }
  94. ul.visible, ul.active{
  95. display: flex;
  96. position: absolute;
  97. top: 40px;
  98. right: 0px;
  99. width: auto;
  100. z-index: 999;
  101. a{
  102. border-left: 2px solid black;
  103. border-bottom: 2px solid black;
  104. background: white;
  105. display: flex;
  106. width: auto;
  107. height: 50px;
  108. padding: 0 20px;
  109. li{
  110. margin: auto;
  111. }
  112. }
  113. }
  114. }