Архив за день: 02.06.2020



WordPress: Выделение названия элементов меню

При описании вызова той или иной функции, часто требуется указать, какой именно пункт меню необходимо нажимать.
Например на странице LibreOffice указана следующая последовательность:
Меню -> Сервис -> Макросы -> Управление макросами -> Python…


Я решил сделать нечто похожее.

Код HTML:

<span class="menuitem">Меню</span>

Оригинальный код CSS:

.menuitem {
    background-image: linear-gradient(180deg,rgba(174,207,247,0.05) 0,rgba(174,207,247,0.2) 100%);
    border-radius: 2px;
    padding: 0 3px;
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.6),0 0 0 1px rgb(174,207,247);
    white-space: nowrap;
}
Здесь рамка (граница) элемента отрисовывается с помощью эффекта теней, где-то я видел, что по производительности это ниже, чем создание этого же эффекта с помощью явного задания свойства border. К тому же эффект теней поддерживается не всеми клиентами.

 

В связи с замечанием выше, я немного подправлю код CSS…

.menuitem {
    background: rgba(174,207,247,0.2);
    border-radius: 2px;
    padding: 0 3px;
    border: 1px solid #aecff7;
    white-space: nowrap;
}

Осталось добавить вышестоящий код в файл style.css дочерней темы.

Таким образом, первоначальный пример будет такой:
Меню -> Сервис -> Макросы -> Управление макросами -> Python…