[해피CGI][cgimall] Unordered List - 타임라인 형태의 메뉴 css-tricks.com

BBC 뉴스사이트에 있는 타임라인형태의 메뉴를 만들수 있는 자료입니다.

ol 과 li 태그를 기본으로 before, after의 가상선택자를 이용한 디자인입니다.

 

 

 

 

before를 이용하여 좌측의; 붉은색라인을 만들어주며

li:before {
  content: '';
  background-color: #c00;
  position: absolute;
  bottom: 0px;
  top: 0px;
  left: 6px;
  width: 3px;
}


after를 이용한 백그라운드로 원형의 이미지를 호출하여 이미지와 같은 형태로 만들수 있습니다.

li:after {
  content: '';
  background-image: url("http://www.happycgi.com/program/upload/happy_config/info_logo.png");
  position: absolute;
  left: 0;
  top: 2px;
  height: 12px;
  width: 12px;
}

 

자세한 소스 및 예제는 데모링크를 통해서 해당사이트에서 확인하실 수 있습니다.
위와같은 형태의 디자인을 응용하여 다양한 형태의 메뉴를 디자인할 수 있을듯 합니다