_menu.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. .dropmenu {
  2. @include breakpoint(md) {
  3. display: none;
  4. }
  5. ul {
  6. white-space: nowrap;
  7. margin: 0;
  8. display: flex;
  9. li {
  10. position: relative;
  11. margin: 0;
  12. a {
  13. text-decoration: none;
  14. padding: $dropmenu-vert-padding ($dropmenu-horiz-padding + $dropmenu-child-padding) $dropmenu-vert-padding $dropmenu-horiz-padding;
  15. display: block;
  16. &:hover, &:focus, &.active {
  17. color: $dropmenu-hover-text !important;
  18. }
  19. &:before {
  20. content: '\f107';
  21. font-family: 'FontAwesome';
  22. display: inline-block;
  23. vertical-align: middle;
  24. float: right;
  25. margin-right: - (2 *$dropmenu-child-padding);
  26. }
  27. &:only-child {
  28. //background: none;
  29. padding-right: $dropmenu-horiz-padding;
  30. &:before {
  31. content: '';
  32. }
  33. }
  34. }
  35. &:hover {
  36. & > ul {
  37. display: block;
  38. visibility: visible;
  39. }
  40. }
  41. }
  42. ul li a:before {
  43. content: '\f105';
  44. }
  45. ul {
  46. position: absolute;
  47. top: 100%;
  48. list-style: none;
  49. background: $dropmenu-bg;
  50. box-shadow: $dropmenu-shadow;
  51. visibility: hidden;
  52. ul {
  53. position: absolute;
  54. left: 100%;
  55. top: 0;
  56. }
  57. }
  58. }
  59. & > ul > li {
  60. display: inline-block;
  61. }
  62. // Animation options
  63. &.animated {
  64. ul li {
  65. transition: background .7s, color 0.5s;
  66. }
  67. ul li:hover > ul {
  68. opacity: 1;
  69. transform: translateY(0);
  70. }
  71. ul ul {
  72. transition: transform .3s, opacity .5s;
  73. opacity: 0;
  74. transform: translateY(-10px);
  75. }
  76. }
  77. }