Показать сообщение отдельно
  #21 (permalink)  
Старый 12.06.2020, 12:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Посмотрел, что на странице удаленной, а не ней уже иное. Я просматривал код сохраненной страницы и все что писал относилось к сохраненному ее состоянию, подключаемых к ней стилей и скриптов. Вы не добавили указанные правила стилей меню в menu.css, а поэтому и нет никакой реакции.

Вообще принцип создать такое простое по структуре меню только на css следующий:

<style>
label {
    cursor: pointer;
}
li label {
    display: inline-block;
    width: 160px;
}
.btmenu {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 32px;
    font-weight: bold;
}
#bt {
    display: none;
}
#bt:checked + .menu {
    right: 0;
}
.menu {
    padding: 0;
    background-color: #5D5D5D;
    color: #fff;
    width: 200px;
    overflow: hidden;
    position: absolute;
    top: 30px;
    right: -200px;
    transition: right 0.5s;
}
.menu ul {
    display: none;
    padding: 10px;
}
.menu li {
    list-style: none;
    padding: 3px 5px;
    cursor: pointer;
}
.menu input {
    float: right;
}
.menu input:after {
    content: '►';
    width: 15px;
    height: 15px;
    background-color: #5D5D5D;
    color: #fff;
}
.menu input:checked:after {
    content: '▼';
}
.menu input:checked + ul {
    display: block;
}
</style>

<label class="btmenu" for="bt">≡</label><input type="checkbox" id="bt" />
<ul class="menu">
    <li>
        <label for="m1">Submenu 1</label><input type="checkbox" id="m1" />
        <ul>
            <li>Item 1-1</li>
            <li>Item 1-2</li>
            <li>Item 1-3</li>
        </ul>
    </li>
    <li>
        <label for="m2">Submenu 2</label><input type="checkbox" id="m2" />
        <ul>
            <li>Item 2-1</li>
            <li>Item 2-2</li>
            <li>Item 2-3</li>
        </ul>
    </li>
    <li>
        <label for="m3">Submenu 3</label><input type="checkbox" id="m3" />
        <ul>
            <li>Item 3-1</li>
            <li>Item 3-2</li>
            <li>Item 3-3</li>
        </ul>
    </li>
</ul>


Думаю, что в сети можно найти готовые хорошие решения таких чисто css меню.

Вы вязли нечто чужое и, видимо, как есть и впихнули себе, получив различные проблемы. Не стоит считать себя лузером только потому, что вся эта кухня программная на английском. Много описано и на родном языке, так что и чисто по русски можно не быть "челядью", если читать и изучать.

Среди браузеров, браузер Firefox имеет отладчик, за мелким исключением, русифицированный, можно производить отладку или хотя бы контролировать, что на ваших страницах. А в ней подключается шрифт иконок icomoon. Если выделить кнопку поиска, то в отладчике в ее стилях можно видеть, что к этой кнопкой используется этот шрифт, а если раскрыть в инспекторе кода код кнопки и выделить в ней псевдоселектор ::before, то в правилах ее стилей увидим код какого символа этого шрифта используется - content: "\e926";

Конечно же, в шрифте icomoon есть и символ , и его нужно точно также использовать в кнопке меню, а не рисовать линии посредством span. Да и какая ссылка с картинкой может быть у этой кнопки вызывающей меню, как это у вас имеет место быть? Это должно быть только <button></button> с соответствующими стилями и все.

Кроме этого в отладчике можно разобраться и почему эти три кнопки при разных разрешениях могут и убегать за пределы экрана вправо.

Последний раз редактировалось laimas, 12.06.2020 в 13:02.
Ответить с цитированием