- Удалено
header>div#bottom-container nav>ul>li:hover>nav
класс - Добавлено
id="test1"
в <nav>
(может быть заменено на поиск дочерней навигации) - Добавлено переключение на щелчок (можно заменить наведением курсора) ) Надеюсь, что это поможет
Обновление 2: - Изменено $("header > div#bottom-container > nav > ul > li").mouseenter(function(e) {
для цели li не a - Добавлено $("header > div#bottom-container > nav > ul > li").mouseleave(function(e) {
- Динамическое определение дочерней навигации $(this).find("nav").show("slow")
$(document).ready(function() {
$("#navToggle a").click(function(e) {
e.preventDefault();
$("header > div#top-container").slideToggle("slow");
$("header > div#bottom-container > nav").slideToggle("slow");
$("#logo").toggleClass("menuUp menuDown");
});
$(window).resize(function() {
if ($(window).width() >= "600") {
$("header > div#top-container").show();
$("header > div#bottom-container > nav").show();
if ($("#logo").attr('class') == "menuDown") {
$("#logo").toggleClass("menuUp menuDown");
}
} else {
$("header > div#top-container").hide();
$("header > div#bottom-container > nav").hide();
}
});
$("header > div#bottom-container > nav > ul > li").mouseenter(function(e) {
$(this).find("nav").show("slow")
if ($(window).width() <= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
console.log($("#test1"))
$("#test1").css("display", "block !Important")
}
}
});
$("header > div#bottom-container > nav > ul > li").mouseleave(function(e) {
$(this).find("nav").hide("slow")
if ($(window).width() <= "600") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
console.log($("#test1"))
$("#test1").css("display", "block !Important")
}
}
});
});
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
}
}
/* Stop font scaling above 1920px */
@media (min-width: 120em) {
:root {
font-size: 2rem;
}
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header {
/* background-color: rgb(140, 193, 193);
border-bottom: 1px solid rgba(0,0,0,.15);
text-align: center; */
}
header>.menuDown {
box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
}
header>.menuUp {
box-shadow: none;
}
header>div#navToggle {
background-color: rgba(0, 0, 0, .15);
position: absolute;
right: 0;
top: 0;
transition: all 300ms ease;
}
header>div#navToggle:hover {
background-color: rgba(0, 0, 0, .1);
}
header>div#navToggle>a {
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
}
header>div#navToggle:hover>a {
color: rgba(255, 255, 255, 1);
}
header>#top-container {
display: none;
}
header>div#bottom-container {
display: flex;
flex-direction: column;
text-align: center;
}
header>div#bottom-container>nav {
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
flex-grow: 1;
transform: all 300ms ease;
}
header>div#bottom-container nav>ul {
list-style-type: none;
}
header>div#bottom-container nav>ul>li {
border-bottom: 1px dotted rgba(0, 0, 0, .1);
position: relative;
}
header>div#bottom-container nav>ul>li:last-of-type {
border-bottom: none;
}
header>div#bottom-container nav>ul>li>a {
display: block;
color: rgba(0, 0, 0, .65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: all 250ms ease;
}
header>div#bottom-container nav>ul>li>a span.toggle {
background-color: rgba(0, 0, 0, .05);
border-radius: 3rem;
color: rgba(0, 0, 0, .25);
/* font-size: 0.75em; */
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
}
header>div#bottom-container nav>ul>li>a span.caret {
display: none;
}
header>div#bottom-container>nav>ul>li:hover>a {
color: rgba(42, 35, 0, .5);
}
header>div#bottom-container>nav>ul>li>nav {
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(51, 51, 51);
}
/**
header nav > ul > li > nav{
display: none;
overflow: hidden;
position: absolute;
left: 0;
top: 87px;
width: 100%;
border-top: 3px solid #176071;
z-index: 100;
background: #ffffff;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
-webkit-transition: all .25s ease .25s;
-moz-transition: all .25s ease .25s;
-o-transition: all .25s ease .25s;
-ms-transition: all .25s ease .25s;
transition: all .25s ease .25s
}
*/
header>nav>ul>li>nav>ul>li>a {
color: rgba(255, 255, 255, .85);
transition: all 300ms ease;
}
header>nav>ul>li>nav>ul>li:hover>a {
background-color: rgba(0, 0, 0, .6);
color: rgba(255, 255, 255, 1);
}
/**
header > nav > ul > li:hover > nav.desk {
display:block!Important;
}
*/
/* Medium screens */
@media all and (min-width: 600px) {
header>#top-container {
background-color: red;
display: flex !Important;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
text-align: left;
width: 100%;
}
header>#top-container>div#box {
flex: 1;
/* display: flex;
flex-flow: row wrap;
justify-content: center;
display: block; */
}
header>#top-container>.box1 {
background-color: green;
flex-basis: 400px;
}
header>div#navToggle {
display: none;
}
header>div#bottom-container {
background-color: rgb(250, 209, 14);
color: rgba(42, 35, 0, 1);
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
border-top: .3rem solid #F9E484;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.65);
}
header>div#bottom-container>nav {
background-color: transparent;
display: block;
}
header>div#bottom-container>nav>ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
header>div#bottom-container nav>ul>li {
border-bottom: none;
position: static;
}
header>div#bottom-container nav>ul>li>a {
padding: 0 1.25rem;
}
header>div#bottom-container nav>ul>li>a span.toggle {
display: none;
}
header>div#bottom-container nav>ul>li>a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(42, 35, 0, 1);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id='top-container'>
<div id="box" class='box1'>logo</div>
<div id="box" class='box2'>our story</div>
<div id="box" class='box3'>contact us</div>
<div id="box" class='box4'>gift us a review</div>
</div>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Blog <span class="toggle">Expand</span><span class="caret"></span></a>
<nav id="test1">
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Humour</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Music</a></li>
</ul>
</nav>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</header>