Стандартное меню wordpress сделать выпадающим
Функционал стандартного меню wordpress также как и возможности css вполне позволяют сделать выпадающие скрытые подменю. Весь в фокус в классах :hover и понимании того чего хочется добиться.
В wordpress есть присвоенные классы для практически любых позиций строк стандартного меню. Если нужно сделать выпадающее меню можно использовать
|
1 2 3 |
.sub-menu - ul список подменю .current-menu-parent - родоначальник в данный момент выбранной строки меню .current-menu-item - в данный момент выбранное меню |
Для начала нужно совсем скрыть подменю:
|
1 |
.menu .sub-menu {display: none} |
Далее сделать чтобы когда курсор мыши находится над пунктом меню (:hover) — подменю было видно.
|
1 |
.menu li:hover .sub-menu { display:block !important} |
И сделать видимым ul список от родителя выбранного в данный момент пункта меню, то есть если выбран любой пункт подменю — то подменю будет видимо:
|
1 |
.current-menu-parent ul { display:block !important} |
Раскрасить на свой вкус фон и цвет ссылок у выбранного пункта меню:
|
1 2 3 |
.menu .sub-menu a {padding-left:50px} .current-menu-item { background: rgba(0,0,0,0.4)} .current-menu-item a { color:#FFF} |
Код полностью:
|
1 2 3 4 5 |
.menu .sub-menu {display: none} .menu li:hover .sub-menu, .current-menu-parent ul { display:block !important} .menu .sub-menu a {padding-left:50px} .current-menu-item { background: rgba(0,0,0,0.5)} .current-menu-item a { color:#FFF} |
Рассказать: