Самый легкий способ это найти тему с таким меню и вырезать нужный код.
Второй вариант, хороший примерчик горизонтального выпадающего меню специально под WP. В свое время, мне он очень помог | Больше примеров.
<script src="/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){ jQuery("#mr-nav-cat li").hover( function(){ jQuery(this).find('ul').show(); }, function(){ jQuery(this).find('ul').hide(); } ); });
</script>
<style>
ul#mr-nav-cat {margin:0;padding:0;float:left;width:600px;list-style:none;position:relative;font-size:14px;background:#242424;}
ul#mr-nav-cat li {float:left;margin:0;padding:0;}
ul#mr-nav-cat li a {padding:10px 15px;display:block;color:#e5e5e5;text-decoration:none;}
ul#mr-nav-cat li:hover {background:#ccc;}
ul#mr-nav-cat li:hover a, ul#mr-nav-cat li a:hover {color:#242424;}
ul#mr-nav-cat li ul {float:left;width:600px;padding:5px 0;position:absolute;left:0;top:35px;display:none;background: #ccc;
ul#mr-nav-cat li:hover ul { display: block; }
ul#mr-nav-cat li ul a { display:inline;color:#242424;}
ul#mr-nav-cat li ul a:hover {text-decoration:underline;}
</style>
<ul id="mr-nav-cat"><?php wp_list_categories('title_li='); ?></ul>
Подскажите куда прописывается код который вы предлагаете для выпадающего горизонтального меню, прямо в код (при этом сайт не перекосит)У меня тема релах. могу я расчитывать на помощ. мой сайт naziyula.ru
Это нужно добавить в файл style.css
ul#mr-nav-cat {margin:0;padding:0;float:left;width:600px;list-style:none;position:relative;font-size:14px;background:#242424;}
ul#mr-nav-cat li {float:left;margin:0;padding:0;}
ul#mr-nav-cat li a {padding:10px 15px;display:block;color:#e5e5e5;text-decoration:none;}
ul#mr-nav-cat li:hover {background:#ccc;}
ul#mr-nav-cat li:hover a, ul#mr-nav-cat li a:hover {color:#242424;}
ul#mr-nav-cat li ul {float:left;width:600px;padding:5px 0;position:absolute;left:0;top:35px;display:none;background: #ccc;
ul#mr-nav-cat li:hover ul { display: block; }
ul#mr-nav-cat li ul a { display:inline;color:#242424;}
ul#mr-nav-cat li ul a:hover {text-decoration:underline;}
а код ниже в шапку сайта, файл header.php
<script src="/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){ jQuery("#mr-nav-cat li").hover( function(){ jQuery(this).find('ul').show(); }, function(){ jQuery(this).find('ul').hide(); } ); });
</script>
<ul id="mr-nav-cat"><?php wp_list_categories('title_li='); ?></ul>
А ещё нужно учесть, что в вашей теме могут быть другие классы и id элементов и код не сработает.
спасибо! а где находятся эти файлы? Где их искать?
// Читайте правила.
Апельсинова
//Реклама в другом разделе
Апель… Бот, да
Апельсинова, c праздником. (конечно, если вы не бот)
Я могу и вам шаблончик сделать 😉
Люблю красивые сайты…
Модератор
Юрій
(@yube)
(конечно, если вы не бот)
Это у Вас такой своеобразный юмор или проблемы с чтением мелких букв под ником?
Я — бот. Спасибо за поздравление.
Шаблончик могу сделать сама. Мы, боты, всё умеем.
parasnaz, вот это ID с вашего сайта. Я все исправил под ваш шаблон.
Все что вам остается, это открыть вкладку — Внешний вид — Редактор
Откроется страница — Список стилей (style.css), вставьте этот код в конец документа и все должно заработать.
ul#nav {margin:0;padding:0;float:left;width:600px;list-style:none;position:relative;font-size:14px;background:#242424;}
ul#nav li {float:left;margin:0;padding:0;}
ul#nav li a {padding:10px 15px;display:block;color:#e5e5e5;text-decoration:none;}
ul#nav li:hover {background:#ccc;}
ul#nav li:hover a, ul#nav li a:hover {color:#242424;}
ul#nav li ul {float:left;width:600px;padding:5px 0;position:absolute;left:0;top:35px;display:none;background: #ccc;
ul#nav li:hover ul { display: block; }
ul#nav li ul a { display:inline;color:#242424;}
ul#nav li ul a:hover {text-decoration:underline;}
one.man в приведенном Вами коде есть неточность, в четвертом снизу селекторе ul#nav li ul нет закрывающей фигурной скобки в конце строки.
Точно, исправил смотрите:
ul#nav {margin:0;padding:0;float:left;width:600px;list-style:none;position:relative;font-size:14px;background:#242424;}
ul#nav li {float:left;margin:0;padding:0;}
ul#nav li a {padding:10px 15px;display:block;color:#e5e5e5;text-decoration:none;}
ul#nav li:hover {background:#ccc;}
ul#nav li:hover a, ul#nav li a:hover {color:#242424;}
ul#nav li ul {float:left;width:600px;padding:5px 0;position:absolute;left:0;top:35px;display:none;background: #ccc;}
ul#nav li:hover ul { display: block; }
ul#nav li ul a { display:inline;color:#242424;}
ul#nav li ul a:hover {text-decoration:underline;}
