Верхнее трехуровневое меню
Выпадающее меню WordPress
Приступаем к созданию меню.
Для создания выпадающего меню WordPress первым делом открываем файл шаблона functions.php в редакторе и добавляем в него следующий php-код:
|
1 2 3 4 5 6 7 |
function register_main_menus() { register_nav_menus( array( 'nav' =>__('Меню навигации'), ) ); } |
Далее открываем файл header.php, в нем находим
1 |
<?php wp_nav_menu(); ?>, |
или
1 |
<?php wp_page_menu(); ?>, |
или
1 |
<?php wp_category_menu(); ?> |
и заменяем на:
1
|
<div id="nav" role="navigation"><?php wp_nav_menu(
'menu=first'); ?></div> |
Если функция вывода меню отсутствует, тогда просто вставляем код в нужное место.
Название first (или любое другое) Вы должны прописать при создании произольного меню в админпанели. Мы еще к этому вернемся.
Теперь прописываем стили в файле style.css для созданного меню (main_menu):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
#navbg { /* Фоновый цвет основного горизонтального меню */ background: #0099ff; padding:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 0 10px; margin-bottom: 5px; -moz-box-shadow: 0px 3px 3px; -webkit-box-shadow: 0px 3px 3px; box-shadow: 0px 3px 3px; } #nav { /* Стили основного горизонтального меню */ z-index: 100; width:100%; position:relative; height: 38px} #nav ul { list-style-type:none; padding:0; margin:0; position:relative; } #nav ul li { display:block; float:left; padding:0 10px; float:left; position:relative; } #nav ul li a { /* Стили ссылок (пунктов) основного горизонтального меню */ padding:9px; float:left; text-decoration:none; font-size:14px; font-weight:bold; font-family:arial, helvetica, sans-serif; -moz-text-shadow: 1px 1px 1px #333; -webkit-text-shadow: 1px 1px 1px #333; text-shadow: 1px 1px 1px #333; color: #fff; display: block; overflow: hidden; line-height: 20px; text-align:left; text-decoration:none; } #nav ul li a:hover { /* Стили ссылок (пунктов) основного горизонтального меню при наведении курсора */ text-decoration:none; color: #fff; text-shadow: 1px 1px 1px #3d78c5; box-shadow: inset 0 0 6px #000; background: #4575b4; } #nav ul li ul { /* Это для того, чтобы выпадающее меню 2-го уровня не отображалось все время */ display:none; } #nav ul li:hover ul { /* Стили для выпадающего меню второго уровня */ border: solid 2px rgba(81, 203, 238, 1); box-shadow: 0 0 25px rgba(81, 203, 238, 1); position: absolute; background: #0000ff; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; opacity: 0.9; display:block; left:0px; width:210px; position:absolute; top:39px; } #nav ul li ul li { padding:0; } #nav ul li:hover ul li ul { /* Это для того, чтобы выпадающее меню 3-го уровня не отображалось все время */ display: none } #nav ul li:hover ul li a { /* Стили ссылок (пунктов) выпадающих меню 2 и 3 уровня */ display:block; width:188px; border-bottom:1px dotted #fff; font-family: 'bad script', cursive; font-size:15px; padding:11px; } #nav ul li:hover ul li a:hover { /* Стили ссылок (пунктов) выпадающих меню 2 и 3 уровня при наведении */ background:#cfc; color: blue; } #nav ul li:hover ul li:hover ul { /* Стили и отступ для меню 3 уровня */ display:block; border: solid 2px rgba(81, 203, 238, 1); left:208px; position:absolute; top:0px } #nav img{ /* Убираем рамки вокруг иконок в меню */ border:none !important; } |