웹 디자인, CSS를 이용한 초간단 다이나믹 메뉴

Design Information/Design Resources

by 김현욱 a.k.a. 마루 2009. 8. 11. 23:34

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

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

[예제 적용 데모]

Menu 1 Menu 2 Menu 3 Menu 4 Menu 5

[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]