-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbox-tabbed.html
More file actions
217 lines (154 loc) · 9.63 KB
/
box-tabbed.html
File metadata and controls
217 lines (154 loc) · 9.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hesburgh Libraries · Guides Handbook</title>
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,cyrillic" rel="stylesheet" type="text/css"> --> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<!-- header ----------------------------->
<div class="brand-bar container-fluid">
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6">
<a href="http://www.nd.edu">University <i>of</i> Notre Dame</a>
</div>
<div class="text-center col-xs-12 hidden-sm hidden-md hidden-lg hidden-xl">
<a href="http://www.nd.edu">University <i>of</i> Notre Dame</a>
</div>
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6 text-right">
<a href="https://provost.nd.edu/">Office <i>of the</i> Provost</a>
</div>
<div class="text-center col-xs-12 hidden-sm hidden-md hidden-lg hidden-xl text-center">
<a class="brand-bar-bottom-padded" href="https://provost.nd.edu/">Office <i>of the</i> Provost</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" id="nd-libguides-header-pattern">
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6">
<h1 id="hesburgh-libraries"><a href="http://library.nd.edu" target="_blank">HESBURGH <span style="color:#F8E999;">LIBRARIES</span></a></h1>
</div>
<div class="hidden-xs col-sm-6 col-md-6 col-lg-6">
<h1 style="opacity:.6;text-align:right;">Guides Handbook</h1>
</div>
<div class="col-xs-12 text-center hidden-sm hidden-md hidden-lg">
<h1><a href="http://library.nd.edu" target="_blank">HESBURGH <span style="color:#F8E999;margin-bottom:10px;">LIBRARIES</span></a></h1>
</div>
<div class="col-xs-12 text-center hidden-sm hidden-md hidden-lg">
<h1 style="opacity:.6;text-align:center;">Guides Handbook</h1>
</div>
</div>
</div>
<!-- header closes ----------------------------->
<!-- Main Content ----------------------------->
<div class="container" id="main-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-right">
<a class="btn btn-default help-button" href="https://nd.libapps.com/libapps/login.php" role="button" target="_blank"><i class="fa fa-lock fa-spacer-right" aria-hidden="true"></i> LibGuides Login</a>
<a class="btn btn-default help-button" href="http://libguides.library.nd.edu/reusable-assets" role="button" target="_blank"><i class="fa fa-list-alt fa-spacer-right" aria-hidden="true"></i>Reusable Assets</a>
</div>
</div>
<div class="page-header">
<div w3-include-html="navmenu.html"></div>
</div>
<!-- page header closes -->
<div id="masthead">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Tabbed Boxes</h1>
<p class="lead">Tabbed boxes are used to present a choice between small number of content items.</p>
</div>
</div>
</div><!--/container-->
</div><!--/masthead-->
<div class="container">
<div class="row">
<!--left column-->
<div class="col-md-3 hidden-xs hidden-sm" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li><a href="#sec0">Tabbed Box</a></li>
<li><a href="#" class="back-to-top"><i class="fa fa-arrow-circle-o-up"></i> Back to top</a></li>
</ul>
</div>
<!--right column-->
<div class="col-md-9" id="rightCol">
<h2 id="sec0">Tabbed Box</h2>
<p>All Guides should aim to follow the paradigm of chunking and stacking content vertically in <a href="box-standard.html#sec0">Standard Boxes</a>, rather than in tabbed boxes, where possible.</p>
<p><a href="feature-card.html#sec2">Collapsible panels</a> may be a better feature for improving readibility by organizing particularly dense or extensive content into vertically-stacked expandable containers.</p>
<div class='alert alert-default' role='alert'><p><i class='fa fa-thumbs-down fa-spacer-right' aria-hidden='true'></i><strong class='capitalized'>The Drawbacks of Using Tabs</strong><br/><p>While Tabbed Boxes may be useful in certain limited situations, <a href="https://www.nngroup.com/articles/tabs-used-right/" target="_blank">tabs present challenges</a> which make Standard Boxes the preferred method for presenting most LibGuides content. For instance, unlike Standard Boxes, tabbed boxes do not allow content from one box or tab to be moved into another tab through the drag-and-drop <code>Add/Reorder</code> feature. While it may seem sensible to use tabs to keep your content "above the fold" because to scrolling, <a href="http://uxmyths.com/post/654047943/myth-people-dont-scroll" target="_blank">this is a frequent misconception</a>.</p></p></div>
<div class="example">
<p>The Citation Managers box is a <strong>good</strong> use of tabs. Use them to present users with a small number of single-word titles to choose between competing information, services, options or tools.</p>
<img id="box-final" src="img/tabbed-box-example.png" class="img img-responsive center-block" alt="" />
</div>
</div><!--/right-->
</div><!--/row-->
</div><!--/container-->
</div>
<!-- .container -->
<!-- Main Content closes ----------------------------->
<!-- Footer ----------------------------->
<div id="handbook-footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6">
<i class="fa fa-copyright" aria-hidden="true"></i><span id="thisYear"></span> University of Notre Dame
</div><div class="col-xs-12 col-sm-6">
<p class="text-right"><a href="https://github.com/randal-sean-harrison/handbook" target="_blank"><i class="fa fa-github fa-spacer-right" aria-hidden="true"></i>randal-sean-harrison/handbook</a></p>
</div></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Include for the Back to top button -->
<script src="js/back-to-top.js"></script>
<!-- Scrollspy / affix js -->
<script src="js/scripts.js"></script>
<!-- html include script -->
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script> w3IncludeHTML(); </script>
<!-- clipboard.js include -->
<script src="js/clipboard.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
// Add the active classes to the nav menu
$(".navboxes").addClass("active");
$(".navtabbed").addClass("active");
});
</script>
<!-- add the active class to the correct tab and submenu element -->
</body>
</html>