Как установить другое меню в станд. шаблон?

#1 15 июля 2016 в 11:44
Добрый день, покажите пожалуйста на примере .

Нужно установить меню codepen.io/Sonick/pen/xJagi вместо стандартного, на дефолт шаблон. Подскажите как подключить его.
#2 15 июля 2016 в 11:49
И ещё вопрос по теме. В меню белый квадрат (отмечено красным) выходит до самого низа, как его определить по центру? по всякому пробовал не выходит.http://instantcms.ru/upload/userfiles/6102/bandicam%202016-07-15%2011-45-42-349.jpg
#3 15 июля 2016 в 12:23
2 вопрос разобрался -padding-top:
#4 15 июля 2016 в 14:02

как подключить его

Тарас Корн
Вставьте в любой css-файл шаблона этот код:

  1. .menu:before, .menu:after {
  2. content:" ";
  3. display: table;
  4. }
  5. .menu:after {
  6. clear: both;
  7. }
  8. .menu {
  9. *zoom: 1;
  10. }
  11. .menu {
  12. list-style:none;
  13. margin: 50px auto;
  14. width: 800px;
  15. width: -moz-fit-content;
  16. width: -webkit-fit-content;
  17. width: fit-content;
  18. }
  19. .menu > li {
  20. background: #34495e;
  21. float: left;
  22. position: relative;
  23. -webkit-transform: skewX(25deg);
  24. }
  25. .menu a {
  26. display: block;
  27. color: #fff;
  28. text-transform: uppercase;
  29. text-decoration: none;
  30. font-family: Arial, Helvetica;
  31. font-size: 14px;
  32. }
  33. .menu li:hover{
  34. background: #e74c3c!important;
  35. }
  36. .menu > li > a {
  37. -webkit-transform: skewX(-25deg);
  38. padding: 1em 2em;
  39. }
  40. /* Dropdown */
  41. .menu > li.folder > ul {
  42. position: absolute;
  43. width: 200px;
  44. left: 50%;
  45. margin-left: -100px;
  46. -webkit-transform: skewX(-25deg);
  47. -webkit-transform-origin: left top;
  48. }
  49. .menu > li.folder > ul li {
  50. background-color: #34495e;
  51. position: relative;
  52. overflow: hidden;
  53. }
  54. .menu > li.folder > ul > li > a {
  55. padding: 1em 2em;
  56. }
  57. .menu > li.folder > ul > li::after {
  58. content:'';
  59. position: absolute;
  60. top: -125%;
  61. height: 100%;
  62. width: 100%;
  63. box-shadow: 0 0 50px rgba(0, 0, 0, .9);
  64. }
  65. /* Odd stuff */
  66. .menu > li.folder > ul > li:nth-child(odd) {
  67. -webkit-transform: skewX(-25deg) translateX(0);
  68. }
  69. .menu > li.folder > ul > li:nth-child(odd) > a {
  70. -webkit-transform: skewX(25deg);
  71. }
  72. .menu > li.folder > ul > li:nth-child(odd)::after {
  73. right: -50%;
  74. -webkit-transform: skewX(-25deg) rotate(3deg);
  75. }
  76. /* Even stuff */
  77. .menu > li.folder > ul > li:nth-child(even) {
  78. -webkit-transform: skewX(25deg) translateX(0);
  79. }
  80. .menu > li.folder > ul > li:nth-child(even) > a {
  81. -webkit-transform: skewX(-25deg);
  82. }
  83. .menu > li.folder > ul > li:nth-child(even)::after {
  84. left: -50%;
  85. -webkit-transform: skewX(25deg) rotate(3deg);
  86. }
  87. /* Show dropdown */
  88. .menu > li.folder > ul, .menu > li.folder > ul li {
  89. opacity: 0;
  90. visibility: hidden;
  91. }
  92. .menu > li.folder > ul li {
  93. transition: .2s ease -webkit-transform;
  94. }
  95. .menu > li.folder > ul, .menu > li.folder:hover > ul li {
  96. opacity: 1;
  97. visibility: visible;
  98. }
  99. .menu > li.folder:hover > ul li:nth-child(even) {
  100. -webkit-transform: skewX(25deg) translateX(15px);
  101. }
  102. .menu > li.folder:hover li:nth-child(odd) {
  103. -webkit-transform: skewX(-25deg) translateX(-15px);
  104. }
#5 15 июля 2016 в 14:25

код

Дмитрий Кайдаш
Я нашел решение, но решил и Ваше попробовать но что то не срабатывает, у меня на topmenu назначен id значит в стилях нужно так -#topmenu а Вы видимо для класса написали?
#6 15 июля 2016 в 14:35

Вы видимо для класса написали

Тарас Корн
Я просто подогнал стили под стандартную разметку движка (2.5.1 — Вы не указали версию, возможно у Вас первая ветка, тогда всё вообще будет по-другому) — для примера брал демо-сайт. Для Вашего конкретного случая всё можно сделать, если видеть код.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.