Skip to content

Commit 3193a4a

Browse files
rachelandrewrachelandrew
committed
Navigation CSS Layout Cookbook examples
1 parent 1347cdc commit 3193a4a

5 files changed

+261
-1
lines changed

‎css-cookbook/breadcrumb-navigation--download.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<title>CSS Cookbook: Breadcrumb Navigation</title>
8+
9+
10+
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 0;
16+
margin: 0;
17+
}
18+
19+
.breadcrumb ul {
20+
list-style: none;
21+
margin: 0;
22+
padding: 0;
23+
display: flex;
24+
}
25+
26+
.breadcrumb a,
27+
.breadcrumb span {
28+
padding: .5em 1em;
29+
}
30+
31+
.breadcrumb li::before {
32+
content: "→";
33+
}
34+
35+
.breadcrumb li:first-child::before {
36+
content: "";
37+
}
38+
</style>
39+
40+
</head>
41+
42+
<body>
43+
44+
<nav aria-label="Breadcrumb" class="breadcrumb">
45+
<ul>
46+
<li><a href="">Home</a></li>
47+
<li><a href="">Category</a></li>
48+
<li><a href="">Sub-Category</a></li>
49+
<li><span aria-current="page">Product</span></li>
50+
</ul>
51+
</nav>
52+
53+
</body>
54+
55+
</html>

‎css-cookbook/breadcrumb-navigation.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Cookbook: Breadcrumb Navigation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.breadcrumb ul {
10+
list-style: none;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
.breadcrumb a,
16+
.breadcrumb span {
17+
padding: .5em 1em;
18+
}
19+
20+
</style>
21+
22+
<style class="editable">
23+
.breadcrumb ul {
24+
display: flex;
25+
}
26+
27+
.breadcrumb li::before {
28+
content: "→";
29+
}
30+
31+
.breadcrumb li:first-child::before {
32+
content: "";
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
<section class="preview">
39+
<nav aria-label="Breadcrumb" class="breadcrumb">
40+
<ul>
41+
<li><a href="">Home</a></li>
42+
<li><a href="">Category</a></li>
43+
<li><a href="">Sub-Category</a></li>
44+
<li><span aria-current="page">Product</span></li>
45+
</ul>
46+
</nav>
47+
</section>
48+
49+
<textarea class="playable playable-css" style="height: 210px;">
50+
.breadcrumb ul {
51+
display: flex;
52+
}
53+
54+
.breadcrumb li::before {
55+
content: "→";
56+
}
57+
58+
.breadcrumb li:first-child::before {
59+
content: "";
60+
}
61+
</textarea>
62+
63+
<textarea class="playable playable-html" style="height: 170px;">
64+
<nav aria-label="Breadcrumb" class="breadcrumb">
65+
<ul>
66+
<li><a href="">Home</a></li>
67+
<li><a href="">Category</a></li>
68+
<li><a href="">Sub-Category</a></li>
69+
<li><span aria-current="page">Product</span></li>
70+
</ul>
71+
</nav>
72+
</textarea>
73+
74+
<div class="playable-buttons">
75+
<input id="reset" type="button" value="Reset">
76+
</div>
77+
</body>
78+
<script src="playable.js"></script>
79+
80+
</html>

‎css-cookbook/cookbook-template--download.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
<body>
2929

30-
<!-- Add your example HTML here -->>
30+
<!-- Add your example HTML here -->
3131

3232
</body>
3333

‎css-cookbook/split-navigation--download.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: Split Navigation</title>
9+
10+
11+
<style>
12+
body {
13+
background-color: #fff;
14+
color: #333;
15+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
16+
padding: 0;
17+
margin: 0;
18+
}
19+
20+
.main-nav {
21+
display: flex;
22+
margin: 0;
23+
padding: 0;
24+
list-style: none;
25+
}
26+
27+
.main-nav a {
28+
padding: .5em 1em;
29+
display: block;
30+
}
31+
32+
.push {
33+
margin-left: auto;
34+
}
35+
</style>
36+
37+
38+
39+
</head>
40+
41+
<body>
42+
43+
<nav>
44+
<ul class="main-nav">
45+
<li><a href="">About</a></li>
46+
<li><a href="">Products</a></li>
47+
<li><a href="">Our Team</a></li>
48+
<li class="push"><a href="">Contact</a></li>
49+
</ul>
50+
</nav>
51+
52+
</body>
53+
54+
</html>

‎css-cookbook/split-navigation.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Cookbook: Split Navigation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.main-nav {
10+
margin: 0;
11+
padding: 0;
12+
list-style: none;
13+
}
14+
15+
.main-nav a {
16+
padding: .5em 1em;
17+
display: block;
18+
}
19+
</style>
20+
21+
<style class="editable">
22+
.main-nav {
23+
display: flex;
24+
}
25+
26+
.push {
27+
margin-left: auto;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
<nav>
35+
<ul class="main-nav">
36+
<li><a href="">About</a></li>
37+
<li><a href="">Products</a></li>
38+
<li><a href="">Our Team</a></li>
39+
<li class="push"><a href="">Contact</a></li>
40+
</ul>
41+
</nav>
42+
</section>
43+
44+
<textarea class="playable playable-css" style="height: 140px;">
45+
.main-nav {
46+
display: flex;
47+
}
48+
49+
.push {
50+
margin-left: auto;
51+
}
52+
</textarea>
53+
54+
<textarea class="playable playable-html" style="height: 150px;">
55+
<nav>
56+
<ul class="main-nav">
57+
<li><a href="">About</a></li>
58+
<li><a href="">Products</a></li>
59+
<li><a href="">Our Team</a></li>
60+
<li class="push"><a href="">Contact</a></li>
61+
</ul>
62+
</nav>
63+
</textarea>
64+
65+
<div class="playable-buttons">
66+
<input id="reset" type="button" value="Reset">
67+
</div>
68+
</body>
69+
<script src="playable.js"></script>
70+
71+
</html>

0 commit comments

Comments
 (0)