Ссылка и переключатель разворота в верхнем уровне аккордеона

[lessless]

Здравствуйте, я новичок в программировании и поэтому хотя и пытаюсь разобраться сам, но все же мне нужна ваша помощь.

Я использую http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi

плагин, вот рабочая площадка http://stezja.kiev.ua/index0.php.

Задача такая: добавить в верхний уровень списка графический элемент который будет сворачивать-разворачивать список, а ссылка которая обеспечивает этот функционал станет простой ссылкой :help: , т.е. при клике на ней будет осуществлен переход на другую страницу, как и должно быть в штатном режиме :write:

Система приблизительно такая:

Сначала я пробовал через background-image, но на него нельзя повесить событие

Поскольку код в веб-разработке я практически новичок и не понимаю код плагина на достаточном для внесения нового функционала уровне, то и единственная мысль которая сейчас есть - поверх списка отрисовать кнопки с position: absolute; и связать их с элементами. Но от такого ужасного извращения меня бросает в пот, дрож и холод. Помогите кто чем может, люди добрые

[Golgi]

что мешает просто воткнуть картнику и ссылку?

[lessless]

Я недостаточно разбираюсь в jQuery, что бы изменить код плагина, а он предполагает такую структуру:

<ul class="menu">

<li><a href="http://www.i-marco.nl/">Home</a></li>

<li>

<a href="#">Weblog Tools</a>

<ul class="acitem">

<li><a href="http://www.pivotx.net/">PivotX</a></li>

<li><a href="http://www.wordpress.org/">WordPress</a></li>

<li><a href="#four">four</a></li>

<li><a href="http://www.textpattern.com/">Textpattern</a></li>

<li><a href="http://typosphere.org/">Typo</a></li>

</ul>

</li>

</ul>

из выделенной жирным ссылки формируется пункт меню, у нее в стиле прописан display: block;, соответственно картинка переносится на новую строку.

Если заменить block на inline, то ломается все форматирование

[Golgi]

эм, можешь кинуть визуальный пример того что получается.

А так вообще сделай свой код на нужный элемент.

допустим воткни картинку и зделай на неё событие

$('Картинка').click(function() {$('блок меню').show();})

[lessless]

Поставил новую версию скрипта, на сайте пока не могу показать из-за того, что предстоит переносить наработки из предыдущей версии. Сейчас идея такая <a href="http://somewhere.to">link <img style="text-align: right;vertical-align:middle;" src="toggle.png"/></a>

вот, в принципе архив над которым работаю http://www.sendspace.com/file/q664fm

сама площадка вот здесь http://stezja.kiev.ua/index0.php

Edited June 28, 2011 by lessless

[Golgi]

вот вопрос, зачем ставить скрипты для таких пустяковых вещей?

Если по идее написать самому проще будет...

И, да, к img и a id допишите, чтобы выборку делать)

[lessless]

Да уж где проще - я только начинаю в этом разбираться

p.s. почему right: 5px или vertical-align: right для задания положения по правому краю элемента <a> <img/> </a> не работают,а если через padding-left,можно поставить отступ от левого края?

Edited June 28, 2011 by lessless

[Golgi]

ну во-первых:

vertical-align не бывает right, left и т.п. Читай тут

Обычно используется text-align.

Что касается right тут. Посмотри подробно.

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

[lessless]

Не справился, предлагаю поучаствовать за вознаграждение http://forum.htmlbook.ru/index.php?showtopic=27636

Edited June 29, 2011 by lessless

[buddah]

добавить в верхний уровень списка графический элемент который будет сворачивать-разворачивать список, а ссылка которая обеспечивает этот функционал станет простой ссылкой :help: , т.е. при клике на ней будет осуществлен переход на другую страницу, как и должно быть в штатном режиме :write:

Что-то вы мудрите. Зачем ссылку блока, который раскрывается делать ссылкой на документ. В этом меню как раз так и задумано, что оно раскрывается по нажатии на эту ссылку, а не переходит на новую страницу, если в нем есть еще элементы.

Просто в нужные элементы списка добавьте рисуночек с помощью background-image, чтоб обозначить что есть еще вложенные пункты.

http://jsfiddle.net/CtySe/

[lessless]

начальник тоже имеет право на свое мнение

p.s. создал тему в соответствующем разделе форума и поменял ссылку.

[Golgi]

добавить в верхний уровень списка графический элемент который будет сворачивать-разворачивать список, а ссылка которая обеспечивает этот функционал станет простой ссылкой :help: , т.е. при клике на ней будет осуществлен переход на другую страницу, как и должно быть в штатном режиме :write:

Что-то вы мудрите. Зачем ссылку блока, который раскрывается делать ссылкой на документ. В этом меню как раз так и задумано, что оно раскрывается по нажатии на эту ссылку, а не переходит на новую страницу, если в нем есть еще элементы.

Просто в нужные элементы списка добавьте рисуночек с помощью background-image, чтоб обозначить что есть еще вложенные пункты.

http://jsfiddle.net/CtySe/

Про мудрости зря вы говорите.

Это оч. даже полезная вещь. Ссылкой можно перевести на страницу со списком категорий.

А картинкой можно эти категории сразу показать в меню, чтобы пользователь мог примиком попасть туда