0
I was creating an example menu dropdown with purecss, at first it worked, the submenus appeared all right, when I went to make the same example only in the responsive format (where I used this example [https://purecss.io/layouts/tucked-menu-vertical/] of the website itself). However the drowpdown does not show the submenus of li of customers, products, or sales of my project in desktop size, appear only when the screen is resized in mobile size, but in dekstop does not appear.
Some solution?
Project - Note: Running the project it will be shown in mobile format, in the correct way, but in dekstop the submenus do not appear.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A set of horizontal menus that switch to vertical
and which hide at small window widths.">
<title>Responsive Horizontal-to-Vertical Menu – Layout Examples – Pure</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41480445-1', 'purecss.io');
ga('send', 'pageview');
</script>
</head>
<body>
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<!--<![endif]-->
<style>
.custom-wrapper {
background-color: #CCCCCC;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
display: block;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
</style>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a href="#" class="pure-menu-heading custom-brand">Home</a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Clientes</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Listar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Cadastrar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Pesquisar</a></li>
</ul>
</li>
<li class="pure-menu-item pure-menu-selected pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Produtos</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Listar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Cadastrar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Pesquisar</a></li>
</ul>
</li>
<li class="pure-menu-item pure-menu-selected pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Vendas</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Realizar Venda </a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Listar</a></li>
</ul>
</li>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sair</a></li>
</ul>
</div>
</div>
</div>
<script>
(function (window, document) {
var menu = document.getElementById('menu'),
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
setTimeout(toggleHorizontal, 500);
}
else {
toggleHorizontal();
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
</script>
<style>
.main {
padding: 2em;
color: black;
}
</style>
</div>
</body>
</html>