Угловые элементы в списке аккордеона jQuery?

Question

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

Несколько менее идеальной идеи:

1. Go старой школы и работы с изображением карты. Я не использовал карту изображений в течение многих лет, так что это займет немного времени, чтобы проверить, возможно ли это.
2. Используйте несколько целевых областей для каждого элемента навигации и поместите их в шахматном порядке. Довольно взломанный и раздутый.
3. Используйте возможности поворота модных браузеров. Это на самом деле не кажется слишком плохим, но, видимо, недоступным для большинства пользователей. Также не уверен, как это повлияет на области содержимого, но может быть изучено.

Дайте мне знать, если требуются какие-либо разъяснения.

Вот набросок концепции: concept sketch http://img158.yfrog.com/img158/3122/slgu.jpg

Answer 1

Я просто указал на плагин jQuery, который хорошо справляется с этой задачей (Diagonal Accordion). Мне еще предстоит протестировать его, но похоже, что он ограничен углом 45 °, что немного облом, но все равно довольно круто.

Answer 2

Да, я считаю, что это может быть сделано. Размышляя над моей головой, это то, что вы сделали бы. Сначала создайте угловые изображения для кнопок. Поместите эти изображения в порядке на разметку HTML, с элементом div между ними. Таким образом, разметка будет чем-то вроде этого.

<img id="bttnOne" src="buttnImg1" onclick="openContent('bttnContentOne');" /> 
<div id="bttnContentOne" style="display: none"> 
    content1 content1 content1 
</div> 

<img id="bttnTwo" src="buttnImg2" onclick="openContent('bttnContentTwo');" /> 
<div id="bttnContentTwo" style="display: none"> 
    content2 content2 content2 
</div> 

Вам нужно будет отрегулировать css, чтобы они соответствовали требованиям. Поплавок, оставшийся на элементах, будет работать хорошо. Теперь, когда у вас есть HTML, вам нужно создать функцию, которую я назвал openContent выше. Вы можете передать идентификатор кнопки, нажатой на эту функцию, если хотите, или вы можете придумать лучший способ сделать это.

Функция OpenContent будет выглядеть примерно следующим,

function openContent(eleId) { 
    $('.activeContent').slideUp('fast');       //Close the currently opened content tab 
    $('#' + eleId).slideDown('slow').class('activeContent');  //Open the new one and set the class 
} 

Теперь им не уверен, что slideDown будет выглядеть правильно, если она должна скользить вправо или влево. Если это не так, вы можете попробовать использовать функцию анимации, чтобы получить слайд влево и вправо. Это ОЧЕНЬ приблизительный пример того, как это можно сделать, поэтому не ожидайте, что этот код будет работать, но основной процесс мышления верен.

Надеюсь, это поможет!

Метрополис

(Edited)

Единственное, что лично мне не нравится, что, например, как текст также отображается по диагонали. Я считаю, что было бы лучше пойти с прямоугольными ящиками, которые «смотрят» по диагонали. Вот грубый эскиз :) ASCII

--------------------------- 
|  /| content content | 
| /| content content | 
| /| content content | 
| / |     | 
|/ |     | 
|/ |     | 
|/  |     | 
--------------------------- 

Другая вещь, которую я не люблю об этой конкретной реализации является все Div теги, что расширение создает для вас. На данный момент это очень неэффективно. Будем надеяться, что в будущем мы сможем легко сделать эти вещи. Прямо сейчас, если вы хотите, чтобы контент на самом деле был диагональным, как эта реализация, вам нужно будет иметь все те теги div, чтобы получить его.