demun(대문블로그)

퍼블리셔/jQuery2012. 7. 5. 06:00

이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 이전에도 아코디언 메뉴에 대한 글을 썻는데요. 자주 써먹은 것중에 하나가 탭메뉴가 아닌가 싶네요. 현재 시점에 제 블로그에도 탭메뉴가 적용이 되어 있는데요. jquery cookbook 에서 나온 코드를 수정해서 적용한것입니다. 탭메뉴에 대한 글은 현재 두개가 있습니다. 하나는 자바스크립트로 구성된 것이구요. 또하나는 jquery cookbook 에서 만든 코드입니다. 자바스크립트 탭메뉴 => http://demun.tistory.com/1696 jquery cookbook 탭메뉴 => http://demun.tistory.com/2125 오늘은 위와는 조금은 다른 웹디자이너를 위한 jquery 에서 말한 탭메뉴입니다. 여기에는 이미지가 두개가..

퍼블리셔/jQuery2012. 7. 4. 06:00

이번에는 가로로 된 아코디언 메뉴입니다. 이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 가로로 된 메뉴는 이전에도 한번 다룬적이 있습니다. jquery cookbook 에서 다룬것인데요 거기는 수평 아코디언이라고 했습니다. 수평 아코디언 보기 => http://demun.tistory.com/2083 이글은 이전글과 맥락을 같이 함으로 이전글을 참고하시기 바랍니다. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 접었다 폈다하는 아코디언 메뉴 2 => http://demun.tistory.com/2142 이번에도 이미지가 들어가므로 이미지는 제가 블로그에 업로드한후 경로를 수정했습니다. 가로로 된 아코디언은 라벨 부분이 세로로 표현이 되야하는데 ..

퍼블리셔/jQuery2012. 7. 3. 06:00

이번에는 저번에 이어 좀더 개선된 아코디언 메뉴입니다. 마찬가지로 소스는 웹디자이너를 위한 jQuery 에서 추출한 것입니다. 실무에서 이용할만한 것을 추출해서 소개하고 있습니다. 이번에는 이미지가 들어가서 마우스를 오버했을때를 강조하여 좀더 보기조은 아코디언을 만들었습니다. 한가지 더 이미지가 3개가 포함이 되므로 제가 블로그에 업로드한 후 그걸 배경으로 사용했습니다. 이전글과 연동되므로 이전글을 참고해주세요. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 마우스가 손모양으로 바뀐것과 현재 선택되어진곳은 색깔이 다른것을 알 수 있습니다. 참고할 스타일 설정부분은 아래와 같습니다. dt{ line-height:35px; font-size:large; text..

퍼블리셔/jQuery2012. 7. 2. 06:00

아코디언 메뉴중에서 가장 심플한 아코디언 메뉴 1번입니다. 오늘 이야기하는 아코디언 메뉴는 웹디자이너를 위한 jquery 입니다. 이 메뉴는 이미지가 하나도 없습니다. 실무에서 바로 사용이 가능한 아주 간단한 메뉴입니다. 자바스크립트 아코디언 메뉴 => http://demun.tistory.com/2139 jquery cookbook 의 아코디언 메뉴 => http://demun.tistory.com/2083 먼저 전체 소스를 공개합니다. 여기서는 jquery 에 대한 이야기만 해보겠습니다. 주석을 상세하게 달아놧으니 이해가 가실겁니다. $(function(){ // 모든 패널이 펼쳐져있는 상태이기 때문에 dd의 첫번재를 제외한곳은 안보이게 설정합니다. $("dd:not(:first)").css("dis..