Unordered List - 타임라인 형태의 메뉴 css-tricks.com happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 메뉴 > Unordered List - 타임라인 형태의 메뉴 css-tricks.com 상세정보

클라우드태그

javascript

php

html

asp

mysql

CSS

mobile

jquery

image

slide

占쌨댐옙

메뉴

占쏙옙占쏙옙占쏙옙트

현재접속자 명

Unordered List - 타임라인 형태의 메뉴 css-tricks.com

해피팀

네티즌

소스분류

메뉴

다운로드 횟수

0 회

간단설명

https://www.bbc.co.uk/news 에 있는 타임라인 형태의 메뉴입니다.

평가하기

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;
}