반응형
웹표준 마크업을 사용한 깔끔한 사이트 맵 입니다.
적용사이트 미리보기 (우측상단 전체보기클릭)
스마트웹
홈페이지, 웹프로그램, 음악방송, 하이브리드앱 제작지원
musictrot.com
HTML + CSS
<!DOCTYPE html>
<html lang="ko" >
<head>
<meta charset="UTF-8">
<title>사이트 맵</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Quicksand);
body {
background: #292426;
font-family: 'Open Sans', sans-serif;
color: #4d4e4c;
}
.container {
width: 850px;
margin: 20px auto;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.sitemap {
width: 692px;
margin: 50px auto;
}
.sitemap a {
color: #000;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
margin: 0 5px;
border-radius: 7px;
text-align: center;
position: relative;
}
.first > li > a {
background: #b4b5b4;
width: 150px;
height: 70px;
line-height: 70px;
display: block;
margin: auto;
}
.first > li > a:after {
content: "";
position: absolute;
left: 50%;
width: 1px;
height: 10px;
background: #9e9f9e;
top: 100%;
}
.second {
padding-top: 20px;
}
.second > li {
display: inline-block;
vertical-align: top;
}
.second a {
background: #cbcccb;
font-size: 14px;
width: 125px;
height: 50px;
line-height: 50px;
z-index: 10;
}
.second a:before {
content: "";
position: absolute;
border: 1px solid #9e9f9e;
border-left: none;
border-bottom: none;
height: 9px;
top: -10px;
left: -76px;
width: 139px;
}
.second li:first-child a:before {
border-top: none;
}
.third {
margin-left: 16px;
padding-top: 20px;
}
.third a {
background: #e4e4e3;
width: 100px;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
z-index: 5;
font-size: 10px;
}
.third a:before {
border: 1px solid #9e9f9e;
border-right: none;
border-top: none;
height: 55px;
top: -35px;
left: -8px;
width: 7px;
}
</style>
</head>
<body>
<div class="container">
<h1>example site map</h1>
<nav class="sitemap">
<ul class="first">
<li><a href="#">Home</a>
<ul class="second">
<li><a href="#">About</a>
<ul class="third">
<li><a href="#">History</a></li>
<li><a href="#">Foundation</a></li>
<li><a href="#">Future Plans</a></li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul class="third">
<li><a href="#">News</a></li>
<li><a href="#">Book Reviews</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Interviews</a></li>
</ul>
</li>
<li><a href="#">Visit</a>
<ul class="third">
<li><a href="#">Location</a></li>
<li><a href="#">Opening Times</a></li>
<li><a href="#">Tickets</a></li>
</ul>
</li>
<li><a href="#">Shop</a>
<ul class="third">
<li><a href="#">Books</a></li>
<li><a href="#">Gifts</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
반응형
'디자인소스' 카테고리의 다른 글
| 깔끔한 이미지 슬라이드쇼 애니메이션 (0) | 2024.11.18 |
|---|---|
| 오디오 비주얼라이저 플레이어 만들기 연속 재생 (1) | 2024.11.15 |
| CSS3 로 구성된 간단한 시계 소스 (0) | 2024.11.12 |
| 이미지 필터 생성기 (0) | 2024.11.01 |
| mp3 음악입자 그래픽 이퀄라이저 시각화 플레이어 가사자막 생성기 (2) | 2024.09.10 |
| 반응형 G5 BEST (2) | 2024.06.02 |
| 워드프레서 와 G5 기반 미디어 홈제작 (0) | 2024.05.23 |
| 스마트 웹 사이트 디자인 동영상 슬라이드 메뉴 (0) | 2023.12.13 |
댓글