jQuery 아코디언 목록에 각진 요소가 있습니까?

Question

jQuery의 아코디언 메뉴와 같은 것을 사용하고 싶지만 트리거 된 요소를 기울여야합니다. 나는 이것이 가능하지 않다고 생각하지만 누군가가 전에 그것을 시도했는지를 알 수있을 것이라고 생각했다.

약간 덜 이상적 아이디어 :

1. 오래된 학교를 가서 이미지 맵과 함께 작동합니다. 몇 년 동안 이미지 맵을 사용하지 않았기 때문에 가능한지 알아보기 위해 약간의 테스트를 거쳤습니다.
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라는 함수를 만들어야합니다. 원하는 경우 클릭 한 버튼의 ID를 해당 함수로 전달하거나 더 나은 방법을 찾아 낼 수 있습니다. 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)

텍스트는 대각선으로 표시하는 방법을 제가 개인적으로 그 예에 관한 좋아하지 않는 한 가지. 대각선 모양의 사각형 상자를 사용하는 것이 실제로 더 나을 것이라고 생각합니다. 여기에 거친 아스키 스케치 :

이

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

내가 그 특정 구현에 대해 좋아하지 않는 또 다른 것은 확장자가 당신을 위해 작성하는 div 태그의 모든입니다. 이 시점에서는 매우 비효율적입니다. 바라건대 미래에 우리는 그러한 유형의 일을 쉽게 할 수있을 것입니다. 지금 당장은 구현이 그렇듯 실제로 내용이 대각선이되도록하려면 div 태그를 모두 가져와야합니다.