Responsive menu horizontal to vertical and viceversa - html

Question

I like to create a menu only with HTML and CSS to use in my web application that:
some items could have sub menus
it is responsive
use a hamburger for mobile
could be switch between horizontal and vertical on desktops
For example, I have this horizontal menu at the top of the page
enter image description here
from this code (you can see the result in the full screen)
:root {
--main-bg-color: #000;
--main-txt-color: #FFF;
--hover-color: #fada04;
--mobile-bg-color: #f6f6f6;
--mobile-bg-color-level2: #fff;
--mobile-txt-color: #666;
--g1: #FDE100;
--g2: #D6A71D;
}
.menu-toggle {
display: block;
}
.headermenu {
padding: 8px 0;
vertical-align: sub;
letter-spacing: 1px;
margin: 0 0 0px 0;
display: block;
height: 26px;
width: auto;
clear: both;
z-index: 999;
}
.headermenu ul {
padding: 0;
margin: 0;
width: 100%;
float: left;
position: relative;
background-color: var(--main-bg-color);
list-style: none;
}
.top-menu li.active {
background-image: linear-gradient(var(--g1), var(--g2));
}
.top-menu li.active>a {
color: var(--main-txt-color);
}
.top-menu li {
position: relative;
background: var(--main-bg-color);
white-space: nowrap;
*white-space: normal;
-webkit-transition: background .2s;
transition: background .2s;
}
.top-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 999;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
min-width: fit-content;
}
.top-menu>li {
float: left;
}
.top-menu li:hover>ul {
display: block;
}
.top-menu a {
display: block;
position: relative;
padding: .75em 1em;
text-decoration: none;
color: var(--main-txt-color);
}
.top-menu a:hover {
color: var(--hover-color);
}
.top-menu ul ul {
top: 0;
left: 100%;
}
.top-menu .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em;
}
.top-menu .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
border: 5px solid transparent;
border-top-color: rgba(255, 255, 255, .5);
}
.top-menu>li>.sf-with-ul:focus:after,
.top-menu>li:hover>.sf-with-ul:after {
border-top-color: white;
}
.top-menu ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: rgba(255, 255, 255, .5);
}
.top-menu ul li>.sf-with-ul:focus:after,
.top-menu ul li:hover>.sf-with-ul:after {
border-left-color: white;
}
.mobile-menu,
.hamburger {
display: none;
}
ul.top-menu.mobile {
display: none;
}
/* --- mobile [phone] SDE)*/
#media all and (max-width: 1000px) {
element.style {
display: block;
}
.top-menu li.active {
background-image: initial;
}
.top-menu li.active>a {
color: initial;
}
ul {
list-style: none;
}
.headermenu ul {
padding: initial;
margin: initial;
width: initial;
float: initial;
position: initial;
background-color: initial;
list-style: none;
}
.top-menu li {
position: initial;
background: initial;
white-space: initial;
*white-space: initial;
-webkit-transition: initial;
transition: initial;
}
.top-menu ul {
position: initial;
display: initial;
top: initial;
left: initial;
z-index: initial;
box-shadow: initial;
min-width: initial;
}
/* .top-menu > li {
float: initial;
}*/
.top-menu>li {
float: initial;
/*margin: 1px 0;*/
border: 1px;
position: relative;
background-color: var(--mobile-bg-color);
/*background-color: #f6f6f6;*/
}
.top-menu li:hover>ul {
display: none;
}
.top-menu a:hover {
color: initial;
}
.menu-toggle {
display: block;
color: #fff;
padding: 15px;
font-size: 35px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
background: #151515;
}
.sublist-toggle {
top: 0;
right: 0;
color: #fff;
width: 55px;
height: 55px;
padding: 15px;
cursor: pointer;
font-size: 15px;
font-weight: bold;
position: absolute;
text-transform: uppercase;
border-left: 1px solid #fff;
background: url(images/toggle-black.png) center no-repeat;
}
.top-menu {
display: none;
}
.top-menu>li {
float: initial;
position: relative;
background-color: var(--mobile-bg-color);
}
.top-menu .sublist {
display: none;
padding: 5px 0;
background-color: #fff;
}
.top-menu a {
color: #666;
padding: 18px;
display: block;
font-size: 25px;
text-decoration: none;
}
.top-menu .sublist li {
position: relative;
margin: 1px 0 1px 20px;
}
.sf-with-ul {
cursor: pointer;
}
/* BEOF Hamburger */
.hamburger {
padding: 15px 15px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
float: right;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
vertical-align: top;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* EOF Hamburger */
}
<ul class="top-menu">
<li class="active">Home</li>
<li><a class="sf-with-ul" href="/jeans">Jeans</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style="">Wide leg jeans</li>
<li style="">Straight jeans</li>
<li style="">Loose jeans</li>
</ul>
</li>
<li><a class="sf-with-ul" href="/shorts">Shorts</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style=""><a class="sf-with-ul" href="/sweet_jersey">Sweet jersey shorts</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style="">Jersey1</li>
<li style="">Jersey2</li>
</ul>
</li>
<li style="">Denim shorts</li>
</ul>
</li>
<li>Skirts</li>
<li>Blazers</li>
</ul>
I can't find a way to transform the menu above in vertical menu like this one
enter image description here

Answer 1

I have done a bit of the basics to point you in the right direction. You can build on this to make it responsive, hamburger, etc...
The menu should have this format. The submenu is nested in the list element of the parent. The span in the parent is the button we click to open the submenu. Each submenu parent has a corresponding span with a unique incremental id.
<div class="sidemenu">
<ul class="top">
<li>Home</li>
<li class="toggle">Jeans<span id="span1" onclick="openSub(1)">+</span>
<ul id="sub1">
<li>Wide</li>
<li>Straight</li>
<li>Loose</li>
</ul>
</li>
<li class="toggle">Shorts<span id="span2" onclick="openSub(2)">+</span>
<ul id="sub2">
<li>Sweet<span id="span3" onclick="openSub(3)">+</span>
<ul id="sub3">
<li>Jersey1</li>
<li>Jersey2</li>
</ul>
</li>
<li>Denim</li>
</ul>
</li>
<li>Skirts</li>
<li>Blazers</li>
</ul>
</div>
We will have to use JS to open and close the submenus when the correct span is clicked.
The first 6 lines hide the submenus by default when the page is loaded.
The openSub() function takes a number representing the submenu we want to open (1 for jeans, 2 for shorts, etc...)
The function then identifies the submenu we want to open, and toggles it to display. The next line changes the text of the span from "+" to "-" to represent an open submenu. If the span is clicked again, the submenu is closed and the text goes back to its default.
var toggle = document.getElementById("sub1");
toggle.style.display = "none";
var toggle = document.getElementById("sub2");
toggle.style.display = "none";
var toggle = document.getElementById("sub3");
toggle.style.display = "none";
function openSub(caller) {
var toggle = document.getElementById("sub"+caller);
toggle.style.display = toggle.style.display === 'none' ? '' : 'none';
document.getElementById("span"+caller).textContent = document.getElementById("span"+caller).textContent === "+" ? '-' : '+';
}
CSS used mostly for styling:
.sidemenu {
width: 250px;
height: 100vh;
background: lightblue;
}
ul.top {
list-style-type: none;
}
ul.top li {
width: 100%;
height: auto;
min-height: 50px;
margin: 10px 0;
padding: 20px 0 0 10px;
}
ul.top li span {
float: right;
}
#sub1, #sub2, #sub3 {
margin-top: 25px;
padding-left: 15px;
}
li {
width: 100%;
height: 50px;
}
span {
padding-right: 25px;
}