You are here

style.css in Simple Mega Menu 2.0.x

Same filename in this branch
  1. 2.0.x css/style.css
  2. 2.0.x modules/simple_megamenu_example/css/style.css
Same filename and directory in other branches
  1. 8 css/style.css
body {
  overflow-x: hidden;
}
.menu--simple-mega-menu {
  position: relative;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper {
  display: none;
  width: 100%;
  position: absolute;
  top: 100%;
  z-index: 9;
  left: 0;
  background: #fff;
  padding: 1rem;
  opacity: 0;
  transition: opacity 1s ease;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item {
  flex: 0 1 auto;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom .field-item {
  flex: 0 1 auto;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper ul.mega-menu-item {
  flex-basis: 300px;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-background {
  position: absolute;
  width: 200vw;
  height: 100%;
  left: -50vw;
  top: 0;
  background: #fbfbfb;
  z-index: -1;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item {
  float: none;
}
.menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item a {
  float: none;
  border-radius: 0;
}
.menu--simple-mega-menu > .menu-item--expanded:hover > .mega-menu-wrapper,
.menu--simple-mega-menu > .menu-item--expanded:focus > .mega-menu-wrapper,
.menu--simple-mega-menu > .menu-item--expanded.focused > .mega-menu-wrapper {
  opacity: 1;
  transition: opacity 1s ease;
  display: flex;
}

File

css/style.css
View source
  1. body {
  2. overflow-x: hidden;
  3. }
  4. .menu--simple-mega-menu {
  5. position: relative;
  6. }
  7. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper {
  8. display: none;
  9. width: 100%;
  10. position: absolute;
  11. top: 100%;
  12. z-index: 9;
  13. left: 0;
  14. background: #fff;
  15. padding: 1rem;
  16. opacity: 0;
  17. transition: opacity 1s ease;
  18. flex-direction: row;
  19. flex-wrap: nowrap;
  20. align-items: flex-start;
  21. }
  22. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item {
  23. flex: 0 1 auto;
  24. }
  25. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom {
  26. display: flex;
  27. flex-direction: row;
  28. flex-wrap: nowrap;
  29. align-items: flex-start;
  30. }
  31. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-bottom .field-item {
  32. flex: 0 1 auto;
  33. }
  34. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper ul.mega-menu-item {
  35. flex-basis: 300px;
  36. }
  37. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-background {
  38. position: absolute;
  39. width: 200vw;
  40. height: 100%;
  41. left: -50vw;
  42. top: 0;
  43. background: #fbfbfb;
  44. z-index: -1;
  45. }
  46. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item {
  47. float: none;
  48. }
  49. .menu--simple-mega-menu > .menu-item--expanded > .mega-menu-wrapper .mega-menu-item .menu-item a {
  50. float: none;
  51. border-radius: 0;
  52. }
  53. .menu--simple-mega-menu > .menu-item--expanded:hover > .mega-menu-wrapper,
  54. .menu--simple-mega-menu > .menu-item--expanded:focus > .mega-menu-wrapper,
  55. .menu--simple-mega-menu > .menu-item--expanded.focused > .mega-menu-wrapper {
  56. opacity: 1;
  57. transition: opacity 1s ease;
  58. display: flex;
  59. }