После добавления в html код центрального окна меню, главное меню стало "заблокировано".
Похоже, я что-то напутал со стилями.
В чем моя ошибка? Почему недоступно верхнее меню?
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Заголовок страницы</title>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
</head>
<body>
<div class="menu">
<a href="https://www.test.ru" class="menu-link this__selectable_none menu-link_normal">Текст ссылки</a><a href="www.test.ru1" class="menu-link this__selectable_none menu-link_active">Текст ссылки1</a><a href="www.test.ru1" class="menu-link this__selectable_none panel__button">Выход</a></div>
<div class="page__content">
<div class="content-wrapper-position-center">
<div class="panel">
<div class="panel__menu">
<div class="menu">
<a href="https://www.test.ru" class="menu-link this__selectable_none menu-link_normal">Текст ссылки</a><a href="www.test.ru1" class="menu-link this__selectable_none menu-link_active">Текст ссылки1</a><a href="www.test.ru1" class="menu-link this__selectable_none panel__button">Выход</a></div>
</div>
<div class="panel__content">
Контент панели</div>
<div class="panel__footer">
футер</div>
</div>
</div></div>
</body>
</html>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content-wrapper-position-center {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
.shadow {
-webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
-moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.5);
}
.this__selectable_none {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a.button
{
font-family: Arial;
font-size: 16px;
color: #ffffff;
border: 0px;
text-decoration: none;
cursor: pointer;
background: #0074E0;
transition: 0.1s linear;
padding: 7px 30px;
text-align: center;
vertical-align: bottom;
}
a.button:hover {
background: #148EFF;
}
a.button:active {
background: #003F7A;
}
.menu {
top: 0;
width: 100%;
display: flex;
align-items: center;
background: #151515;
white-space: nowrap;
z-index: 2;
}
.menu-link {
font-size: 16px;
font-family: Arial;
text-decoration: none;
letter-spacing: 0.5px;
position: relative;
display: block;
padding: 20px 20px;
}
.menu-link_normal {
color: #cccccc;
}
.menu-link:hover {
color: #ffffff;
transition: 0.1s;
}
.menu-link_active {
color: #FFAC32;
}
.menu-link_active::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 4px;
background: #FFAC32
}
.menu-separator {
font-size: 16px;
color: #cccccc;
font-family: Arial;
text-decoration: none;
white-space: nowrap;
display: inline-block;
}
.menu-separator::after {
content: "|";}
a.panel__button {
font-family: Arial;
font-size: 16px;
color: #E6E6E6;
border: 1px solid #B2B2B2;
text-decoration: none;
cursor: pointer;
background:#171A21;
transition: 0.1s linear;
padding: 7px 30px;
text-align: center;
}
a.panel__menu-exit-button {
position: absolute;
right: 30px;
}
a.panel__button:hover {background: #05547A; border: 1px solid #ffffff; color: #ffffff;}
a.panel__button_active {background: #FFAC32; border: 1px solid #ffffff; color: #000000;}
.panel {
border: 4px solid #252525;
background: #FAFAFA;
margin: 30px;
min-width: 500px;
min-height:300px ;
}
Средний
