Помощь Реализация бокового аккордеон-меню на CSS WP3+

Alex KGB · 20 Окт 2010

Очень желательно (но необязательно) реализовать сабж средствами CSS.
То есть в левом сайдбаре нужно открывать меню категорий, подкатегории разворачиваются и сворачиваются по клику (надеюсь ясно выразился).
Реализация - любая (плагины, хаки и т.д.)
Кто делал для версии 3.0.1, большая просьба помочь, просто уже полдня ищу, перепробовал кучу всего и не понял, как реализовать сабж

Haliff3007 · 20 Окт 2010

Alex KGB написал(а):
Очень желательно (но необязательно) реализовать сабж средствами CSS.
То есть в левом сайдбаре нужно открывать меню категорий, подкатегории разворачиваются и сворачиваются по клику (надеюсь ясно выразился).
Реализация - любая (плагины, хаки и т.д.)
Кто делал для версии 3.0.1, большая просьба помочь, просто уже полдня ищу, перепробовал кучу всего и не понял, как реализовать сабж

Прочесыванием Googl'a дало нам ~~дохера~~много-чего.
Ключики запроса:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Самое вкусное из поиска:
Итак, поехали:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Alex KGB · 20 Окт 2010

Найти аккордеоны не проблема. Вот парочку хороших навскидку:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Проблема кошерно вписать все это в вордпресс.
Пока остановился на этом

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

но не понял, как его задействовать?
В меню вордпресса его нету, в виджетах тоже.
Как вставить его код в сайдбар, не совсем ясно.
В идеале нужно как

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

только с раскрывающимися подкатегориями.
Наставьте на путь истины, плиз. Была бы полная хаутушка - и дело в шляпе.

ЗЫ. Ничего не помогает, кроме разве что Rico Ajax Menu, но в нем предусмотрен вывод всех категорий как одного пукта (а нужно чтобы каждая категория была отдельным пунктом).
Неужели никто не делал ничего подобного?

Alex KGB · 27 Окт 2010

Тема все еще актуальна, неужели никто не делал ничего подобного или все очень заняты?
Можно, конечно убрать меню из сайдбара и вручную все рубрики прописать статически и скормить их тому же Rico Ajax Menu.
Но это не совсем кошерно - вдруг надо будет добавить или изменить что-то?

Conwell · 28 Окт 2010

Уважаемый, я не совсем понимаю, в чем проблема привязки accordion'а (любого из двух приведенных выше) к вордпрессу?
Берется аккордион, тот который нужен, вставляется в код темплейта, далее правится JS код аккордиона чтобы он подцеплялся к id того меню которое необходимо и все. при необходимости правится css чтобы отображал так как надо. Все. Никаких проблем в дальнейшем при генерации меню из админки.

Alex KGB · 4 Ноя 2010

Conwell написал(а):
Уважаемый, я не совсем понимаю, в чем проблема привязки accordion'а (любого из двух приведенных выше) к вордпрессу?
Берется аккордион, тот который нужен, вставляется в код темплейта, далее правится JS код аккордиона чтобы он подцеплялся к id того меню которое необходимо и все. при необходимости правится css чтобы отображал так как надо. Все. Никаких проблем в дальнейшем при генерации меню из админки.

Проблема в том, что ни разу такого не делал, туплю походу.
Как это сделать. Чуть подробнее, для нубов?
Например делаем по хаутушке:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Все ссылки, которые должны находиться в меню необходимо оформить следующим образом (в файле сайдбара что ли?):

PHP:

<ul id="menu">
	  <li>
			<a href="#">Weblog Tools</a>
			<ul>
				<li><a href="http://www.pivotx.net/">PivotX</a></li>
				<li><a href="http://www.wordpress.org/">WordPress</a></li>
				<li><a href="http://www.textpattern.com/">Textpattern</a></li>
				<li><a href="http://typosphere.org/">Typo</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Programming Languages</a>
			<ul>
				<li><a href="http://www.php.net/">PHP</a></li>
				<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
				<li><a href="http://www.python.org/">Python</a></li>
				<li><a href="http://www.perl.org/">PERL</a></li>
				<li><a href="http://java.sun.com/">Java</a></li>
				<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Cool Stuff</a>
			<ul>
				<li><a href="http://www.apple.com/">Apple</a></li>
				<li><a href="http://www.nikon.com/">Nikon</a></li>
				<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
				<li><a href="http://www.nintendo.com/">Nintendo</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Search Engines</a>
			<ul>
				<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
				<li><a href="http://www.google.com/">Google</a></li>
				<li><a href="http://www.ask.com/">Ask.com</a></li>
				<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
			</ul>
		</li>
	</ul>

Обязательно необходимо вставить следующий фрагмент кода между тегами <head></head> (в index.php или в header.php темы?):

PHP:

	<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
	<script src="menu-collapsed.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />

PavelDest · 4 Ноя 2010

попробуете создать меню в ВП, вставить его в блок в шаблон, и применить для него jquery плагин.

Alex KGB · 4 Ноя 2010

Использую тему shofi

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

в header.php вставил скрипты после хедера:

HTML:

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(document).ready(function() {
    $jx(".xix").equalHeights();
$jx("#s")
    .val("Поиск...")
    .css("color", "#ccc")
    .focus(function(){
        $jx(this).css("color", "black");
        if ($jx(this).val() == "Поиск...") {
            $jx(this).val("");
        }
    })
    .blur(function(){
        $jx(this).css("color", "#ccc");
        if ($jx(this).val() == "") {
            $jx(this).val("Поиск...");
        }
    });
});
</script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/box/navi.css" type="text/css" />
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<script src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/Franklin_Gothic_Book_400-Franklin_Gothic_Book_italic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
    <script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.1.min.js" type="text/javascript"></script> 
    <script src="<?php bloginfo('template_directory'); ?>/js/menu-collapsed.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/box/style.css" /> 
</head>
<body>

после вставки скриптов аккордеона перестала работать правильно фотогалерея NextGen Gallery. Что делать? Как помирить скрипты между собою?

Conwell · 8 Ноя 2010

Вполне возможно, что тут кроме NEXTGen проблема еще и с Cufon. пересекающиеся названия блоков и воздействия на них JS. Надо смотреть что выдает сайт, какие ошибки по JS коду.
Ссылку на сайт в личку или сюда под хайд.

MvKozyrev · 24 Ноя 2010

Вот эти плагины - кажется, то, что вам нужно. Работают на 2.8 - 3.1. Куча настроек. Использую почти на всех своих блогах.

Collapsing Archives

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Collapsing Categories

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Collapsing Links

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Помощь Реализация бокового аккордеон-меню на CSS WP3+

Alex KGB

Гуру форума

Haliff3007

Читатель

Alex KGB

Гуру форума

Alex KGB

Гуру форума

Conwell

Постоялец

Alex KGB

Гуру форума

PavelDest

Писатель

Alex KGB

Гуру форума

Conwell

Постоялец

MvKozyrev

Постоялец