You are here

Home » API reference » Simple Mega Menu 2.0.x

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. }