Поддержка Темы и шаблоны Горизонтальное меню

  • Подскажите, как сделать в теме горизонтальное меню с выпадающим списком вложенных страниц.

Просмотр 12 ответов — с 1 по 12 (всего 12)
  • Самый легкий способ это найти тему с таким меню и вырезать нужный код.

    Второй вариант, хороший примерчик горизонтального выпадающего меню специально под 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 праздником. (конечно, если вы не бот)
    Я могу и вам шаблончик сделать 😉
    Люблю красивые сайты…

    Модератор Yuri

    (@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;}

Просмотр 12 ответов — с 1 по 12 (всего 12)
  • Тема «Горизонтальное меню» закрыта для новых ответов.