Something wrong (EDGE)
T_T
by Manuel Castro
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header class="box_max flipInX">
<div id="box_logo">
<a href="#"><img src="https://dummyimage.com/87x80/000/fff "></a>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-le_menu-container">
<ul id="menu-le_menu" class="nav_menu">
<li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-27">
<a href="#">
<d>Inicio</d>
</a>
</li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item menu-item-26">
<a href="#" aria-current="page">
<d>Nosotros</d>
</a>
</li>
<li id="menu-item-453" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-453">
<a href="#">
<d>Equipos</d>
</a>
<ul class="sub-menu" style="">
<li id="menu-item-460" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-460">
<a href="#">
<d>Almacenamiento de Alimento</d>
</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-468" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-468">
<a href="#">
<d>Silos</d>
</a>
</li>
...
CSS
* {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #6f6c69;
}
header {
background-color: #FFF8DC;
}
.box_max {
width: 100%;
max-width: 1080px;
margin: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
clear: both;
}
header {
display: flex;
justify-content: space-between;
/* flex-wrap: wrap; */
position: relative;
z-index: 99999;
}
#box_logo a {
display: block;
height: 80px;
margin: 5px;
/* ackground-image: url('../images/logo.png'); */
background-size: 100%;
}
#box_logo a img {
height: 100%;
}
.btn_header_box {
display: flex;
margin: auto 0;
}
#btn_go_search.searching, #btn_no_search.searching {
right: 100%;
}
#btn_go_search, #btn_no_search {
position: relative;
right: 0;
transition: 0.2s all ease-in-out;
-webkit-tap-highlight-color: transparent;
}
#le_burger, #le_lupa {
display: none;
}
button.btn_zoom i {
color: white;
font-size: 1.4em;
}
.menu-le_menu-container {
height: 100%;
}
#box_out_header {
display: none;
width: 100%;
height: 100%;
position: fixed;
}
ul.nav_menu {
display: flex;
justify-content: center;
align-items: normal;
height: 100%;
}
ul.nav_menu li {
list-style: none;
/*display: list-item;*/
/*width: 100%;*/
}
ul.nav_menu li a {
text-align: center;
padding: 16px;
display: block;
text-decoration: none;
color: #4a443f;
/*font-weight: 500;*/
transition: 0.2s all cubic-bezier(0.8, 0.2, 0.57, 1.01);
border: 2px solid rgba(221, 153, 0, 0);
overflow-wrap: break-word;
}
ul.nav_menu li a:hover {
color: #dd9900;
}
ul.nav_menu>li {
background-color: blue;
display: table;
}
ul.nav_menu>li>a {
background-color: red;
margin-top: 22px;
}
.nav_menu li li a {
background-color: #eae8e6;
}
.nav_menu li li li a {
background-color: #dad2cd;
}
.nav_menu li li li li a {
background-color:...
JavaScript
/*HEELO*/
$(".nav_menu li ul").hide();
$(".nav_menu li ").click(function(e) {
event.preventDefault();
e.stopPropagation();
$(this).children('ul').slideToggle();
if($(this).children('ul').length == 0)
{
$(".nav_menu li ul").hide();
var href = $('a', this).attr('href');
window.location = href;
console.log(href);
}
if ($(this).parents('.active').length) {
$(this).siblings().find('ul').slideUp();
}
else {
//$(this).siblings().children('ul').slideUp();
$(this).siblings().find('ul').slideUp();
}
});