Песочница/Pok/3: различия между версиями
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 16: | Строка 16: | ||
}} | }} | ||
{{#css: | {{#css: | ||
.category-menu { | |||
border: 1px solid black; | |||
border-radius: 0.3em; | |||
background-color: #313138; | |||
overflow: hidden; | |||
} | |||
/* Категории */ | |||
.main-container { | |||
display: flex; | |||
width: 100%; | |||
} | |||
.categories { | .categories { | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
padding: 10px; | padding: 10px; | ||
border-bottom: 2px solid black; | |||
border-bottom: | |||
} | } | ||
| Строка 28: | Строка 40: | ||
padding: 10px 20px; | padding: 10px 20px; | ||
margin: 0 10px; | margin: 0 10px; | ||
border: | border: 2px solid #28282b; | ||
background-color: # | background-color: #43434d; | ||
border-radius: 0.5em; | |||
} | } | ||
. | .categories .active { | ||
background-color: #4b4b57; /* Выделение активного пункта меню */ | |||
} | } | ||
/* Меню слева */ | /* Меню слева */ | ||
.menu-container { | .menu-container { | ||
width: | width: 300px; | ||
padding: 10px; | padding: 10px; | ||
border-right: | border-right: 2px solid black; | ||
} | } | ||
| Строка 48: | Строка 59: | ||
cursor: pointer; | cursor: pointer; | ||
padding: 10px; | padding: 10px; | ||
border: | border: 2px solid #28282b; | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
background-color: # | background-color: #43434d; | ||
border-radius: 0.5em; | |||
} | } | ||
.menu { | |||
display: none; /* Скрываем меню, если категория не выбрана */ | |||
} | |||
.menu.active { | |||
display: block; /* Отображаем активное меню */ | |||
} | |||
.menu .active { | |||
background-color: #4b4b57; /* Выделение активного пункта меню */ | |||
} | |||
/* Контент */ | |||
.content { | .content { | ||
padding: 10px; | padding: 10px; | ||
width: 100%; | width: 100%; | ||
background: # | background-color: #43434d; | ||
} | } | ||
| Строка 65: | Строка 90: | ||
.content .active { | .content .active { | ||
display: block; | display: block; | ||
} | } | ||
}} | }} | ||