Песочница/Pok/3: различия между версиями

Интерактивная навигация по истории

← Предыдущая правка Следующая правка →

ВизуальныйВики-текст

@@ Строка 1: / Строка 1: @@
 {{#invoke:CategoryMenu|main
-|category1 = Категория 1
+|category1 = Категория 2
 |category1-paragraph1 = Пункт 1.1
 |category1-paragraph2 = Пункт 1.2
@@ Строка 7: / Строка 7: @@
 |category1-paragraph2-content = Контент для пункта 1.2
 |category1-paragraph3-content = Контент для пункта 1.3
-|category2 = Категория 2
+|category2 = Категория 1
 |category2-paragraph1 = Пункт 2.1
 |category2-paragraph2 = Пункт 2.2
@@ Строка 15: / Строка 15: @@
 |category2-paragraph3-content = Контент для пункта 2.3
 }}
+{{#css:
+.categories {
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+    background-color: #313138;
+    border-bottom: 1px solid #ccc;
+}
+.categories div {
+    cursor: pointer;
+    padding: 10px 20px;
+    margin: 0 10px;
+    border: 1px solid #ccc;
+    background-color: #4f4f4f;
+}
+.main-container {
+    display: flex;
+    width: 100%;
+}
+/* Меню слева */
+.menu-container {
+    width: 200px;
+    padding: 10px;
+    border-right: 1px solid #ccc;
+    background-color: #313138;
+}
+.menu div {
+    cursor: pointer;
+    padding: 10px;
+    border: 1px solid #ccc;
+    margin-bottom: 5px;
+    background-color: #4f4f4f;
+}
+.content {
+    padding: 10px;
+    width: 100%;
+    background: #46464d;
+}
+.content div {
+    display: none;
+}
+.content .active {
+    display: block;
+}
+.menu {
+    display: none; /* Скрываем меню, если категория не выбрана */
+}
+.menu.active {
+    display: block; /* Отображаем активное меню */
+}
+.menu .active {
+    background-color: #616161; /* Выделение активного пункта меню */
+}
+}}
 __TOC__