I want to be able to add and then when I refresh the page it stays safe in my HTML.
.menu {
width: 100%;
height: 70px;
background-color: #56B8BD;
max-height: 70px;
}
.menu ul li {
float: left;
list-style: none;
text-decoration: none;
color: #FFF;
font-size: 18px;
font-weight: bold;
padding-top: 1%;
}
button {
width: 56px;
height: 56px;
border-radius: 56px;
font-size: 18px;
border: none;
float: right;
margin-right: 1%;
margin-top: 0.25%;
}
button:hover {
transform: scale(1.03);
}
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><styletype="text/css">
</style>
</head>
<body>
<div class="principal">
<nav class="menu">
<ul>
<li> Barra Menu</li>
</ul>
</nav>
<button onclick="adicionar()">+</button>
</div>
<script>
function adicionar() {
$("body").append("<nav><ul><li> Novo Menu Adicionado</li></ul></nav>");
$("nav").addClass("menu")
}
</script>
</body>
</html>