<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="icon" href="favicon.png">
</head>
<body>
<nav class="nav" id="nav">
<a href="#home">Logo</a>
<a href="#menu-item-1">Menu Item 1</a>
<a href="#menu-item-2">Menu Item 2</a>
<a href="#menu-item-3">Menu Item 3</a>
<a href="javascript:void(0);" id="menu-toggle" onclick="togglemenu()">
<div class="menu-toggle__bar1"></div>
<div class="menu-toggle__bar2"></div>
<div class="menu-toggle__bar3"></div>
</a>
</nav>
<style>
/* For best practice, move CSS below to an external CSS file. */
.nav {
overflow: hidden; }
.nav a {
float: left;
margin: 10px;
display: block; }
.nav #menu-toggle {
display: none; }
@media screen and (max-width: 600px) {
.nav a:not(:first-child) {
display: none; }
.nav a#menu-toggle {
float: right;
display: block; } }
@media screen and (max-width: 600px) {
.nav.nav--open {
position: relative; }
.nav.nav--open #menu-toggle {
position: absolute;
right: 0;
top: 0; }
.nav.nav--open a {
float: none;
display: block;
text-align: left; } }
.menu-toggle__bar1, .menu-toggle__bar2, .menu-toggle__bar3 {
width: 21px;
height: 3px;
background-color: #000000;
margin: 4px 0;
transition: 0.3s; }
.menu-toggle--open .menu-toggle__bar1 {
transform: translate(0, 7px) rotate(-45deg); }
.menu-toggle--open .menu-toggle__bar2 {
opacity: 0; }
.menu-toggle--open .menu-toggle__bar3 {
transform: translate(0, -7px) rotate(45deg); }
</style>
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
<img src="https://via.placeholder.com/800x600/%22 alt="">
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
</tr>
</table>
<footer>
<small>© <script>document.write(new Date().getFullYear())</script> Your company name. All Rights Reserved.</small>
</footer>
<script>
function togglemenu() {
var x = document.getElementById("nav");
if (x.className === "nav") {
x.className += " nav--open";
} else {
x.className = "nav";
}
var element = document.getElementById("menu-toggle");
https://element.classlist.toggle%28%22menu-toggle--open%22%29%3B/
}
</script>
</body>
</html>

Otras herramientas