nav menu - mob
<style>
.div_top {
position:absolute;
border:1px ridge red;
top:25px;
width:55px;
height:40px;
}
.div_mini {
position:relative;
left:10px;
width:35px;
height:5px;
background-color:black;
margin: 6px 0;
}
.div_main_format {
position:fixed;
top:100px;
left:0px;
width:0px;
height:400px;
transition:1s;
background-color:blue;
z-index:1;
overflow-x: hidden;
}
.div_main_format button {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 14px;
color: #818181;
display: block;
transition: 0.3s;
border: 1px ridge blue;
width:150px;
}
.div_main_format a {
text-decoration: none;
font-size: 12px;
ZZZcolor: #818181;
color:gold;
display: block;
transition: 0.3s;
border: 1px ridge blue;
width:75px;
}
.div_main_format button:hover,a:hover {
background-color: whitesmoke;
color:black;
}
.div_main_format a:hover {
background-color: whitesmoke;
color:black;
}
.sub_menu {
position:relative;
height:0px;
transition:1.5s;
overflow:hidden;
}
</style>
<script>
function ChangeMenu() {
var mnu = document.getElementById("div_main");
var bttn = document.getElementsByClassName("button");
if (mnu.style.width=="150px")
{
mnu.style.width="0px";
}
else
{
mnu.style.width="150px";
}
}
function ShowCloseSubMnu(divname) {
var mnu = document.getElementById(divname);
if(mnu.style.height=="75px")
{
mnu.style.height="0px";
}
else
{
mnu.style.height="75px";
}
}
</script>
<div id="div_top" class="div_top" onclick="ChangeMenu()">
<div class="div_mini"></div>
<div class="div_mini"></div>
<div class="div_mini"></div>
</div>
<div id="div_main" class="div_main_format">
<button type="button" onclick="ShowCloseSubMnu('cross_submnu')">AT Cross</button>
<div id="cross_submnu" class="sub_menu">
<a>Botanica</a>
<a>Century</a>
<a>Century II</a>
</div>
<button type="button" onclick="ShowCloseSubMnu('vict_submnu')">Victorinox</button>
<div id="vict_submnu" class="sub_menu">
<a>Evo</a>
<a>Ranger</a>
<a>Mini Champ</a>
</div>
<button type="button">Waterman</button>
<button type="button">Sheaffer</button>
<button type="button">Parker Pens</button>
<button type="button">Timex</button>
<button type="button">Casio</button>
</div>