HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />6
<meta http-equiv="x-ua-compatible" content="ie=edge" />7
<title>Sidenav and focus outlines</title>8
<!-- MDB icon -->9
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />10
<!-- Font Awesome -->11
<link12
rel="stylesheet"13
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"14
/>15
<!-- Google Fonts Roboto -->16
<link17
rel="stylesheet"18
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"19
/>20
<!-- MDB ESSENTIAL -->21
<link rel="stylesheet" href="css/mdb.min.css" />22
<!-- MDB PLUGINS -->23
<link rel="stylesheet" href="plugins/css/all.min.css" />24
<!-- Custom styles -->25
<style>26
/* 27
*:focus {28
outline: none; }29
*:focus-visible {30
outline:3px solid lightskyblue;31
outline-offset: 2px;32
}33
a.sidenav-link:focus,34
button:focus,35
.btn:focus, 36
.btn-close:focus {37
outline: none;38
box-shadow: 0 0 0 0.25rem lightskyblue; 39
} 40
*/ 41
42
</style>43
</head>44
45
<body>46
<!-- Start your project here-->47
<div class="container">48
<div class="d-flex justify-content-center align-items-center" style="height: 100vh">49
50
51
<!-- Sidenav -->52
<nav53
data-mdb-sidenav-init54
id="sidenav-1"55
class="sidenav"56
data-mdb-hidden="false"57
>58
<a class="ripple d-flex justify-content-center py-4" href="/" data-mdb-ripple-color="primary">59
<img id="MDB-logo" src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" alt="MDB Logo" draggable="false">60
</a>61
62
<ul class="sidenav-menu">63
<li class="sidenav-item">64
<a class="sidenav-link">65
<i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a66
>67
</li>68
<li class="sidenav-item">69
<a class="sidenav-link"70
><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a71
>72
<ul class="sidenav-collapse show">73
<li class="sidenav-item">74
<a class="sidenav-link">Link 2</a>75
</li>76
<li class="sidenav-item">77
<a class="sidenav-link">Link 3</a>78
</li>79
</ul>80
</li>81
<li class="sidenav-item">82
<a class="sidenav-link"83
><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a84
>85
<ul class="sidenav-collapse">86
<li class="sidenav-item">87
<a class="sidenav-link">Link 4</a>88
</li>89
<li class="sidenav-item">90
<a class="sidenav-link"91
>Link 5</a92
>93
</li>94
</ul>95
</li>96
</ul>97
98
99
<a href="mailto:example@example.com">Send me a mail</a> 100
</nav>101
<!-- Sidenav -->102
103
104
<div class="main-content bg-light p-3">105
<h1>Toggle Sidebar</h1>106
<!-- Toggler -->107
<p> 108
<button109
data-mdb-ripple-init110
data-mdb-toggle="sidenav"111
data-mdb-target="#sidenav-1"112
class="btn btn-primary"113
aria-controls="#sidenav-1"114
aria-haspopup="true"115
>116
<i class="fas fa-bars"></i>117
</button>118
</p>119
<!-- Toggler -->120
<p>121
<a href="#">Another Link</a>122
</p>123
<p>124
<a href="#">One more Link</a>125
</p>126
127
<p>128
<h2>And a few Buttons for Focus Outline Testing</h2>129
</p>130
131
<button type="button" class="btn btn-outline-primary" data-mdb-ripple-init data-mdb-ripple-color="dark">Primary</button>132
<button type="button" class="btn btn-outline-secondary" data-mdb-ripple-init data-mdb-ripple-color="dark">Secondary</button>133
<button type="button" class="btn btn-outline-success" data-mdb-ripple-init data-mdb-ripple-color="dark">Success</button>134
<button type="button" class="btn btn-outline-danger" data-mdb-ripple-init data-mdb-ripple-color="dark">Danger</button>135
<button type="button" class="btn btn-outline-warning" data-mdb-ripple-init data-mdb-ripple-color="dark">Warning</button>136
<button type="button" class="btn btn-outline-info" data-mdb-ripple-init data-mdb-ripple-color="dark">Info</button>137
<button type="button" class="btn btn-outline-light" data-mdb-ripple-init data-mdb-ripple-color="dark">Light</button>138
<button type="button" class="btn btn-outline-dark" data-mdb-ripple-init data-mdb-ripple-color="dark">Dark</button>139
</div>140
141
</div>142
</div>143
<!-- End your project here-->144
</body>145
146
<!-- MDB ESSENTIAL -->147
<script type="text/javascript" src="js/mdb.umd.min.js"></script>148
<!-- MDB PLUGINS -->149
<script type="text/javascript" src="plugins/js/all.min.js"></script>150
<!-- Custom scripts -->151
<script type="text/javascript"></script>152
</html>153
CSS
1
1
JS
1
1
Console errors: 0