태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

이미지를 사용하지 않고 CSS를 활용한 초간단 다이나믹 텍스트 메뉴를 구현한 디자인 소스 예제입니다.

디자인 메뉴 소스는 사이트와 블로그 모두 적용할 수 있으니 필요에 따라 유용하게 활용하시길 바랍니다. 물론 이미지를 이용한 메뉴가 화려한 맛은 있겠지만 그만큼 페이지로딩에서 텍스트 보다는 효율적이지 못하기에 상황에 따라 적절히 활용하시길 바랍니다.

[예제 적용 데모]

 [Cascading Style Sheet]

#menu_exam a, #menu_exam a:visited {
  text-decoration:none; 
  background-color:#fff; 
  color:#000; 
  display:block; 
  width:10em; 
  height:1.5em; 
  border-bottom:1px solid #fff;  
  border-right:1px solid #000; 
  padding:0.5em;
  }
#menu_exam a:hover {
  border-bottom:1px solid #000; 
  text-align:right;
  }

[XHTML]

<div id="menu_exam">
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
  <a href="#">Menu 3</a>
  <a href="#">Menu 4</a>
  <a href="#">Menu 5</a>
</div>
저작자 표시 비영리 동일 조건 변경 허락
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://s2news.com BlogIcon S2day 2009.08.12 00:41 신고  댓글주소  수정/삭제  댓글 남기기

    메뉴를 더욱 손쉽게 만들어주는 서비스도 있답니다 ^^
    http://s2news.com/2008/09/21/css-menu-generator/ << 이쪽글 한번 참조해보세요.

  2. Favicon of http://gongple.codex.kr/ BlogIcon 공상플러스 2009.08.12 09:39 신고  댓글주소  수정/삭제  댓글 남기기

    오오 CSS는 역시 차세대;;

  3. Favicon of http://nettenna.tistory.com BlogIcon 넷테나 2009.08.14 00:25 신고  댓글주소  수정/삭제  댓글 남기기

    오늘도 좋은 정보 잘 보고 갑니다.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.08.14 00:45 신고  댓글주소  수정/삭제

      늘 관심있게 찾아주셔서 감사드립니다. 넷테나님.^^
      인터넷 공간에서 가장 수신율 좋은 안테나가 되시길 바랍니다. 자주 들리지 못해서 죄송합니다.

  4. 네모칸 2011.09.12 23:56 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 정보 고맙습니다.


우드스