웹 디자인에 있어서 list와 navigation은 다양한 방법으로 사용할 수 있습니다.
목차
- 기본 목록 : ul, ol 및 li 요소 만들기.
- 중첩 목록 : 내부 목록을 나열하기.
- 설명 목록 : dl, dt 및 dd
- 목록 표시자 : 목록 스타일 유형을 사용하여 글 머리 기호 및 번호 매기기 변경.
- 목록 항목 표시자에 이미지 : list-style-image 사용.
- 내부 및 외부 목록 표시자 : list-style-position 사용.
- 드롭 다운 1(Dropdown menu) : 드롭 다운 메뉴의 기본 사항.
- 드롭 다운 2(Dropdown menu) : 간단한 멀티 레벨 드롭 다운 메뉴.
- 드롭 다운 3(Dropdown menu) : 보다 세부적인 디자인의 멀티 레벨 드롭 다운.
- 인라인 탭(Inline tabs) : 디스플레이 속성을 사용하는 기본 탭 탐색.
- 플로팅 탭(Floated tabs) : float 속성을 사용하는 기본 탭.
- 탭(tab style) 더보기 : 탭을 탭처럼 만들기.
- 더 많은 탭 : 대체 탭(Alternative tab) 스타일.
- Skinny tabs : 간단한 밑줄 사용.
- Fancy tabs : CSS로 만들기
- Show / hide navigation(JavaScript) : JavaScript를 사용하여 표시를 전환합니다.
- Show / hide navigation (target) : 가상 클래스( :target )를 사용하여 상태를 토글합니다.
기본 목록 : ul, ol 및 li 요소 만들기.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic lists</title>
</head>
<body>
<ul>
<li>This</li>
<li>That</li>
<li>The Other</li>
</ul>
<ol>
<li>The first thing</li>
<li>The second thing</li>
<li>The third thing</li>
</ol>
</body>
</html>중첩 목록 : 내부 목록을 나열하기.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nested lists</title>
</head>
<body>
<ul>
<li>This
<ul>
<li>This type of this</li>
<li>That type of this
<ul>
<li>This type of that type of this</li>
<li>That type of that type of this</li>
<li>The other type of that type of this</li>
</ul>
</li>
<li>The other type of this</li>
</ul>
</li>
<li>That</li>
<li>The Other</li>
</ul>
</body>
</html>설명 목록 : dl, dt 및 dd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Description lists</title>
</head>
<body>
<dl>
<dt>Cat</dt>
<dd>Any member of the family Felidae.</dd>
<dd>The domesticated species of that family, Felis silvestris.</dd>
<dd>A little furry thing that purrs.</dd>
<dt>Dog</dt>
<dt>Yo Momma</dt>
<dd>A big shaggy thing that barks.</dd>
</dl>
</body>
</html>목록 표시자 : 목록 스타일 유형을 사용하여 글 머리 기호 및 번호 매기기 변경.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>List markers</title>
<style>
ol { list-style-type: lower-roman; }
ul { list-style-type: square; }
ul ul { list-style-type: circle; }
</style>
</head>
<body>
<ul>
<li>This
<ul>
<li>This type of this</li>
<li>That type of this
<ul>
<li>This type of that type of this</li>
<li>That type of that type of this</li>
<li>The other type of that type of this</li>
</ul>
</li>
<li>The other type of this</li>
</ul>
</li>
<li>That</li>
<li>The Other</li>
</ul>
<ol>
<li>The first thing</li>
<li>The second thing</li>
<li>The third thing</li>
</ol>
</body>
</html>목록 항목 표시자에 이미지 : list-style-image 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Images as list item markers</title>
<style>
ul {
list-style-image: url("./img/tick.gif");
list-style-type: square; /* 이것을 추가하는 것이 좋습니다. */
}
</style>
</head>
<body>
<ul>
<li>List item image markers</li>
<li>Can be defined with <code>list-style-image</code></li>
<li>Can also be defined with the <code>list-style</code> shorthand property</li>
<li>Remember to use a generic list item marker (using <code>list-style-type</code>) as fallback</li>
</ul>
</body>
</html>내부 및 외부 목록 표시자 : list-style-position 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lists marker position</title>
<style>
body {
font: 1em arial, helvetica, sans-serif;
}
ul {
border: 2px solid black;
}
li {
border: 2px dotted #ccc;
bfackground: #ccc;
}
.second {
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>This</li>
<li>That</li>
<li class="second">The other</li>
</ul>
</body>
</html>드롭 다운 1(Dropdown menu) : 드롭 다운 메뉴의 기본 사항.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dropdowns 1: Basic, single level</title>
<style>
body {
font: 21px arial, helvetica, sans-serif;
background: #333;
color: #000;
}
a {
color: #06c;
}
ul { /* 모든 목록... */
padding: 0;
margin: 0;
background: #fff;
}
li { /* 모든 목록 항목... */
display: inline; /* 목록 항목을 왼쪽에서 오른쪽으로 설정 */
position: relative; /* 위치 할 자식 상자의 원점을 설정 */
}
ul ul { /* 목록 내에 목록을 만든다... */
position: absolute; /* 모든 것의 위에 놓는다 */
left: 0; /* 상위 목록 항목을 왼쪽에 정렬 - 일부 과거버전의 브라우저에 필요 */
top: 100%; /* 부모 목록 항목의 맨 아래에 정렬하십시오. 이전 브라우저에서만 필요합니다. */
display: none; /* 숨겨라 */
}
li:hover ul { /* 목록 항목을 마우스로 가리키면 해당 항목에 포함 된 목록으로 이동... */
display: block; /* block 타입으로 보여라 */
}
</style>
</head>
<body>
<ul>
<li>
<a href="">Birds</a>
<ul>
<li><a href="">Ratites</a></li>
<li><a href="">Fowl</a></li>
<li><a href="">Neoaves</a></li>
</ul>
</li>
<li>
<a href="">Mammals</a>
<ul>
<li><a href="">Monotremes</a></li>
<li><a href="">Marsupials</a></li>
<li><a href="">Placentals</a></li>
</ul>
</li>
<li>
<a href="">Reptiles</a>
<ul>
<li><a href="">Lizards and snakes</a></li>
<li><a href="">Tortoises and turtles</a></li>
<li><a href="">Crocodilians</a></li>
<li><a href="">Tuatara</a></li>
</ul>
</li>
<li>
<a href="">Amphibians</a>
<ul>
<li><a href="">Frogs and toads</a></li>
<li><a href="">Salamanders and newts</a></li>
<li><a href="">Caecilians</a></li>
</ul>
</li>
</ul>
</body>
</html>드롭 다운 2(Dropdown menu) : 간단한 멀티 레벨 드롭 다운 메뉴.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dropdowns 2: Multiple levels</title>
<style>
body {
font: 21px arial, helvetica, sans-serif;
background: #333;
color: #fff;
}
a {
color: #06c;
}
ul {
padding: 0;
margin: 0;
background: #000;
float: left;
}
li {
float: left;
display: inline;
position: relative;
width: 150px;
list-style: none;
}
ul ul {
position: absolute;
left: 0;
top: 100%;
background: #ccc;
display: none;
}
ul ul ul {
left: 100%;
top: 0;
background: #999;
}
li:hover > ul {
display: block;
}
p {
clear: left;
padding-top: 1em;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="">Birds</a>
<ul>
<li><a href="">Ratites</a></li>
<li><a href="">Fowl</a></li>
<li><a href="">Neoaves</a></li>
</ul>
</li>
<li>
<a href="">Mammals</a>
<ul>
<li>
<a href="">Monotremes</a>
<ul>
<li><a href="">Echidnas</a></li>
<li><a href="">Platypus</a></li>
</ul>
</li>
<li>
<a href="">Marsupials</a>
<ul>
<li><a href="">Opossums</a></li>
<li><a href="">Numbats, etc.</a></li>
<li><a href="">Bandicoots, etc.</a></li>
<li><a href="">Kangaroos, koalas, wombats, etc.</a></li>
</ul>
</li>
<li>
<a href="">Placentals</a>
<ul>
<li><a href="">Primates, ungulates, etc.</a></li>
<li><a href="">Anteaters, sloths, etc.</a></li>
<li><a href="">Elephants, etc.</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Reptiles</a>
<ul>
<li><a href="">Lizards and snakes</a></li>
<li><a href="">Tortoises and turtles</a></li>
<li><a href="">Crocodilians</a></li>
<li><a href="">Tuatara</a></li>
</ul>
</li>
<li>
<a href="">Amphibians</a>
<ul>
<li><a href="">Frogs and toads</a></li>
<li><a href="">Salamanders and newts</a></li>
<li><a href="">Caecilians</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>드롭 다운 3(Dropdown menu) : 보다 세부적인 디자인의 멀티 레벨 드롭 다운.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dropdowns 3: Prettying it up</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
article {
width: 600px;
margin: 0 auto;
background: #000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
section {
clear: left;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
</style>
<!--[if lt IE 9]><script src="./js/html5shiv.js"></script><![endif]-->
</head>
<body>
<article>
<h1>Tetrapods</h1>
<nav id="main_nav">
<ul>
<li>
<a href="">Birds</a>
<ul>
<li><a href="">Ratites</a></li>
<li><a href="">Fowl</a></li>
<li><a href="">Neoaves</a></li>
</ul>
</li>
<li>
<a href="">Mammals</a>
<ul>
<li>
<a href="">Monotremes</a>
<ul>
<li><a href="">Echidnas</a></li>
<li><a href="">Platypus</a></li>
</ul>
</li>
<li>
<a href="">Marsupials</a>
<ul>
<li><a href="">Opossums</a></li>
<li><a href="">Numbats, etc.</a></li>
<li><a href="">Bandicoots, etc.</a></li>
<li><a href="">Kangaroos, koalas, wombats, etc.</a></li>
</ul>
</li>
<li>
<a href="">Placentals</a>
<ul>
<li><a href="">Primates, ungulates, etc.</a></li>
<li><a href="">Anteaters, sloths, etc.</a></li>
<li><a href="">Elephants, etc.</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Reptiles</a>
<ul>
<li><a href="">Lizards and snakes</a></li>
<li><a href="">Tortoises and turtles</a></li>
<li><a href="">Crocodilians</a></li>
<li><a href="">Tuatara</a></li>
</ul>
</li>
<li>
<a href="">Amphibians</a>
<ul>
<li><a href="">Frogs and toads</a></li>
<li><a href="">Salamanders and newts</a></li>
<li><a href="">Caecilians</a></li>
</ul>
</li>
</ul>
</nav>
<section id="main_content">
<p>A CSS dropdown menu example using tetrapod groups as navigation items. The "Mammals" item provides an example of a multi-level dropdown. See the HTML Dog Dropdowns tecnhique article for more information.</p>
<p>Tetrapods are a major group of animals containing those that evolved from fish and developed four limbs. They comprise the major sub-groups of amphibians, reptiles, mammals, and birds. "Tetrapod" literally means four-footed.</p>
</section>
</article>
</body>
</html>인라인 탭(Inline tabs) : 디스플레이 속성을 사용하는 기본 탭 탐색.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs 1</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
display: inline;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header li a {
padding: 0 1em;
}
#header #selected {
padding-bottom: 1px;
background: white;
}
#content {
border: 1px solid;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>플로팅 탭(Floated tabs) : float 속성을 사용하는 기본 탭.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>탭(tab style) 더보기 : 탭을 탭처럼 만들기.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs 3</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
}
#header a {
text-decoration: none;
display: block;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#header a:hover {
background: #ddf;
}
#header #selected {
border-color: black;
}
#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>더 많은 탭 : 대체 탭(Alternative tab) 스타일.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs 4</title>
<style>
body {
font: small arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
display: inline;
margin: 0 2px 0 0;
}
#header a {
padding: 0 1em;
text-decoration: none;
color: #a80;
background: #fe5;
}
#header a:hover {
background: #fc0;
color: #540;
}
#header #selected a {
padding-bottom: 2px;
font-weight: bold;
color: black;
color: black;
background: #fc0;
}
#content {
border-top: 2px solid white;
background: #fc0;
padding: 1em;
}
#content p {
margin: 0;
padding: 1em;
background: white;
}
h1 {
font-size: 1.5em;
color: #fc0;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li><!-- li 사이의 이러한 주석은 소스의 다른 줄에 나타나는 목록 항목 사이에 공백이 나타나지 않도록 IE의 문제를 해결합니다.
--><li id="selected"><a href="#">That</a></li><!--
--><li><a href="#">The Other</a></li><!--
--><li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>Skinny tabs : 간단한 밑줄 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs 5</title>
<style>
body {
background: #f80;
font: 0.8em arial, helvetica, sans-serif;
text-transform: lowercase;
margin: 0;
padding: 0;
}
#header {
background-color: white;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
background: white;
float: left;
width: 100%;
}
#header li {
float: left;
margin: 0 1em 0 0;
}
#header a {
text-decoration: none;
display: block;
width: 6em;
padding: 0 0.5em;
font-weight: bold;
color: black;
border-bottom: 0.5em solid #fc6;
color: #fc6;
}
#header a:hover {
color: #fa3;
border-color: #fa3;
}
#header #selected a {
color: #f80;
border-color: #f80;
}
#content {
clear: both;
color: white;
padding: 1em;
}
#content p {
margin: 0 0 1em 0;
}
h1 {
margin: 0;
padding: 0.5em 0 1em 0.5em;
color: #f80;
font-size: 1.5em;
font-style: italic;
}
</style>
</head>
<body>
<div id="header">
<h1>Tabs</h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>Fancy tabs : CSS로 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fancy tabs | HTML Dog</title>
<style>
*, #content :first-child, #content :last-child {
margin: 0;
}
body {
font: 300 15px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #333;
margin: 20px;
}
h1 {
margin-bottom: 20px;
color: #fff;
text-transform: uppercase;
font-size: 55px;
font-weight: 100;
letter-spacing: 30px;
text-shadow: 3px 3px 5px #000;
}
nav ul {
list-style: none;
padding: 0 0 0 10px;
min-width: 460px;
}
nav li {
float: left;
position: relative;
height: 30px;
border-radius: 10px 30px 0 0;
margin-left: -10px;
text-shadow: 1px 1px 0 #bbb;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
transition: .2s;
}
nav a {
display: block;
position: relative;
width: 90px;
height: 20px;
padding: 6px 10px 20px 0;
border-radius: 10px 30px 0 0;
background: #999;
color: #444;
text-align: center;
text-decoration: none;
transition: .2s;
}
nav li:hover {
z-index: 1;
}
nav li:hover a {
background: #ccc;
color: #000;
}
#selected {
z-index: 2;
}
#selected a {
z-index: 3;
background: #fff;
color: #000;
text-shadow: none;
font-weight: 500;
}
#content {
position: relative;
z-index: 1;
clear: both;
min-width: 420px;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
background: #fff;
}
#content p {
margin: 20px 0;
}
</style>
<!--[if lt IE 9]><script src="./js/html5shiv.js"></script><![endif]-->
</head>
<body>
<header>
<h1>CSS Tabs</h1>
<nav>
<ul>
<li><a href="">This</a></li>
<li id="selected"><a href="">That</a></li>
<li><a href="">The other</a></li>
<li><a href="">Banana</a></li>
<li><a href="">Kumquat</a></li>
</ul>
</nav>
</header>
<section id="content">
<p>"Tabbed navigation", using floated list items.</p>
<p>Read the CSS Tabs HTML KNULAB Techniques article for more information.</p>
</section>
</body>
</html>Show / hide navigation(JavaScript) : JavaScript를 사용하여 표시를 전환합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Show / hide navigation (JavaScript)</title>
<style>
body {
background: #333;
color: #000;
margin: 0;
font: 300 18px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#container {
width: 240px;
position: relative;
background: #fff;
margin: 0 auto;
padding: 40px;
border-radius: 0 0 5px 5px;
box-shadow: 0 0 8px 2px #000;
}
#main_nav {
display: none;
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
border-radius: 0 0 5px 5px;
box-shadow: 0 0 8px 2px #000;
}
.with_nav #main_nav {
display: block;
}
.access_aid {
display: none;
}
#access_nav {
display: block;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 0;
padding-top: 40px;
overflow: hidden;
border: 1px solid #ccc;
background: white 10px 10px / 20px 20px no-repeat;
background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
z-index: 1;
}
.with_nav #access_nav {
background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}
</style>
</head>
<body id="body">
<div id="container">
<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
<article>
<h1>Show / Hide Navigation (JavaScript)</h1>
<p>An example of a simple technique to show and hide navigation, using <em>JavaScript</em>. Particularly useful when designing for mobile.</p>
<p>This also uses CSS gradients to produce the "show" and "hide" button icons instead of images.</p>
</article>
<nav id="main_nav">
<ul>
<li><a href="">This</a></li>
<li><a href="">That</a></li>
<li><a href="">The other</a></li>
</ul>
<p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
</nav>
</div>
<script>
var nav = document.getElementById('access_nav'),
body = document.body;
nav.addEventListener('click', function(e) {
body.className = body.className? '' : 'with_nav';
e.preventDefault();
});
</script>
</body>
</html>Show / hide navigation (target) : 가상 클래스( :target )를 사용하여 상태를 토글합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Show / hide navigation (target)</title>
<style>
body {
background: #333;
color: #000;
margin: 0;
font: 300 18px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#container {
width: 240px;
position: relative;
background: #fff;
margin: 0 auto;
padding: 40px;
border-radius: 0 0 5px 5px;
box-shadow: 0 0 8px 2px #000;
}
#main_nav {
display: none;
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
border-radius: 0 0 5px 5px;
box-shadow: 0 0 8px 2px #000;
}
#main_nav:target {
display: block;
}
.access_aid {
display: block;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 0;
padding-top: 40px;
overflow: hidden;
border: 1px solid #ccc;
background: white 10px 10px / 20px 20px no-repeat;
}
#access_nav {
background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
}
#access_top {
background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}
</style>
</head>
<body id="body">
<div id="container">
<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
<article>
<h1>Show / Hide Navigation (target)</h1>
<p>An example of a simple technique to show and hide navigation, manipulating the <code>:target</code> pseudo class. Particularly useful when designing for mobile.</p>
<p>This also uses CSS gradients to produce the "show" and "hide" button icons instead of images.</p>
</article>
<nav id="main_nav">
<ul>
<li><a href="">This</a></li>
<li><a href="">That</a></li>
<li><a href="">The other</a></li>
</ul>
<p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
</nav>
</div>
</body>
</html>
