Tutorial HTML <nav>
HTML nav Tag - belajar html nav. Element
nav digunakan sebagai navigasi atau arah berupa teks link, baik itu link keluar dari halaman yang ada ataupun berupa link dihalaman yang ada, intinya sebagai penunjuk arah atau navigasi. Contoh yang biasa digunakan adalah navigasi menu, next dan previous artikel dan Tombol navigasi page berupa nomor atau angka.
Table of contents
Html nav dalam peletakannya bisa diletakkan di mana saja asal masih di dalam element
<body>, walaupun demikian tidak dianjurkan element nav berada didalam element <footer>, karena hal tersebut dinilai tidak tepat dalam pembacaan browser, walaupun hal tersebut masih dibaca dengan baik oleh sebuah browser.Html nav juga tidak dianjurkan dan tidak tepat penggunaannya, jika didalam element
<nav> terdapat element <main>, karena element <main> adalah element yang diutamakan dalam sebuah konten / artikel.Contoh HTML <nav>
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <nav class="demo"> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </nav> </body> </html>
nav.demo {
background: #353535;
margin-bottom: 10px;
overflow: hidden;
clear: both;
}
nav.demo ul {
padding: 0;
list-style: none;
list-style-type: none;
margin: 0;
}
nav.demo a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #9c9c9c;
}
nav.demo a.active {
background: #171717;
color: white;
}
nav.demo a:hover {
background: #9c1a1a;
color: white;
}
/*responsive li pada screen 648px*/
@media screen and (min-width: 648px) {
nav.demo li {
display: inline-block;
float: left;
}
}
//javascript
Contoh 2 HTML <nav>
<header class="header">
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="container-title">
<h1>Nama blog atau logo</h1>
<p>deskripsi blog</p>
</div>
</header>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<header class="header">
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="container-title">
<h1>Nama blog atau logo</h1>
<p>deskripsi blog</p>
</div>
</header>
</body>
</html>
/*nav*/
nav.demo {
background: #353535;
margin-bottom: 10px;
overflow: hidden;
clear: both;
}
nav.demo ul {
padding: 0;
list-style: none;
list-style-type: none;
margin: 0;
}
nav.demo a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #9c9c9c;
}
nav.demo a.active {
background: #171717;
color: white;
}
nav.demo a:hover {
background: #9c1a1a;
color: white;
}
/*responsive nav li pada screen 648px*/
@media screen and (min-width: 648px) {
nav.demo li {
display: inline-block;
float: left;
}
}
/*title blog*/
.header {
background: #dedede;
}
.container-title {
text-align: center;
padding: 20px 0;
}
.container-title h1 {
margin: 0px;
}
.container-title p {
margin: 5px 0px;
}
//javascript
Contoh 3 HTML <nav>
<div id="wrapper">
<header class="header">
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="container-title">
<h1>Nama blog atau logo</h1>
<p>deskripsi blog</p>
</div>
</header>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<nav class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</nav>
<footer>example.com</footer>
</div>
<div id="wrapper">
<header class="header">
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="container-title">
<h1>Nama blog atau logo</h1>
<p>deskripsi blog</p>
</div>
</header>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<nav class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</nav>
<footer>example.com</footer>
</div>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 15px;
line-height: 1.7;
color: #333;
background-color: #7d7d7d;
overflow-x: hidden;
margin: 0;
}
/*main*/
#wrapper {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
}
/*nav atas*/
nav.demo {
background: #353535;
margin-bottom: 10px;
overflow: hidden;
clear: both;
}
nav.demo ul {
padding: 0;
list-style: none;
list-style-type: none;
margin: 0;
}
nav.demo a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #9c9c9c;
}
nav.demo a.active {
background: #171717;
color: white;
}
nav.demo a:hover {
background: #9c1a1a;
color: white;
}
/*responsive nav li pada screen 648px*/
@media screen and (min-width: 648px) {
nav.demo li {
display: inline-block;
float: left;
}
}
/*title blog*/
.header {
background: #dedede;
}
.container-title {
text-align: center;
padding: 20px 0;
}
.container-title h1 {
margin: 0px;
}
.container-title p {
margin: 5px 0px;
}
/*article*/
article {
padding: 10px;
margin: 15px 10px;
border: 1px solid #afacac;
border-radius: 5px;
}
article h2 {
margin-top: 0;
margin-bottom: 10px;
}
article p {
margin-top: 0;
margin-bottom: 10px;
}
/*pagination*/
nav.pagination {
padding: 10px;
}
nav.pagination a {
font-size: 18px;
text-decoration: none;
padding: 5px 10px;
color: red;
margin-right: 3px;
border: 1px solid #b5b5b5;
border-radius: 5px;
}
/*footer*/
footer {
padding: 15px 0;
background: #171717;
text-align: center;
color: honeydew;
margin-top: 15px;
}
//javascript
Global Attributes:
Element
<nav> mencakup Global Attributes HTML.
Event Attributes:
Element
<nav> mencakup Event Attributes HTML.
Browser Support
Desktop
| Chrome | 5 |
|---|---|
| Safari | 4.1 |
| Firefox | 4 |
| Opera | 11.1 |
| IE | 9 |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | 11 |
| iOs Safari | 4.2 |
| Samsung Internet | Ya |
Default CSS
Browser yang support dengan element
<nav>, mempunyai nilai default :nav {
display: block
}
Posting Komentar