I want to do what you see in the picture. When the Settings button is clicked, this window opens and the user goes to what he wants. However, when I click the button, nothing happens.
https://www.hizliresim.com/qqbx1t4
It works when I copy the "li" part and paste it into the dropdown menu projects on the internet. I think the problem is in the buttons and ul tags.
function settings_click() {
document.getElementById("settings_dropdown").classList.toggle("Show");
}
window.onclick = function(event) {
if (!event.target.matches('.settings_style')) {
var dropdowns = document.getElementsByClassName("settings_tools");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[1];
if (openDropdown.classList.contains('Show')) {
openDropdown.classList.remove('Show');
}
}
}
}
.settings {
position: relative;
display: inline-block;
}
.settings_style {
cursor: pointer;
width: 100%;
text-align: left;
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
border: none;
background: none;
margin: 0;
box-sizing: border-box;
align-items: flex-start;
}
.settings_style:hover {
text-decoration: underline;
}
.settings_tools {
display: none;
position: absolute;
background-color: red;
overflow: auto;
z-index: 1;
}
.settings_button {
min-width: 200px;
}
.li {
display: list-item;
list-style: none;
font-size: 14px;
margin: 0;
padding: 0;
}
.search_settings {
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
list-style: none;
}
.Show {
display: block;
}
<div class="settings">
<button class="settings_style" id="test" onclick="settings_click()" aria-haspopup="true" aria-controls="settings_dropdown">Ayarlar</button>
<ul class="settings_tools" id="settings_dropdown" role="menu" aria-labelledby="test" style="bottom: 46px; right: 0px; display: none;">
<li role="none">
<a class="search_settings" href="https://www.google.com/preferences?hl=tr&fg=1" role="menuitem" tabindex="-1">Arama ayarları</a>
</li>
<li role="none">
<a class="search_settings" href="/advanced_search?hl=tr&fg=1" role="menuitem" tabindex="-1">Gelişmiş arama</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/privacyadvisor/search?utm_source=googlemenu&fg=1" role="menuitem" tabindex="-1">Arama'daki verileriniz</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/product/search?utm_source=google&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama geçmişi</a>
</li>
<li role="none">
<a class="search_settings" href="https://support.google.com/websearch/?p=ws_results_help&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama yardımı</a>
</li>
<li role="none">
<button class="search_settings" data-bucket="websearch" role="menuitem" tabindex="-1">Geri bildirim gönder</button>
</li>
</ul>
</div>
Here's some refinement. You may have to make it more clear what's going wrong now that we see something happening.
function settings_click() {
document.getElementById("settings_dropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.classList.contains('settings_style')) {
var dropdowns = document.getElementsByClassName("settings_tools");
for (let i = 0; i < dropdowns.length; i++) {
dropdowns[0].classList.remove('show');
}
}
}
.settings {
position: relative;
display: inline-block;
}
.settings_style {
cursor: pointer;
width: 100%;
text-align: left;
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
border: none;
background: none;
margin: 0;
box-sizing: border-box;
align-items: flex-start;
}
.settings_style:hover {
text-decoration: underline;
}
.settings_tools {
display: none;
position: absolute;
background-color: red;
overflow: auto;
z-index: 1;
}
.settings_button {
min-width: 200px;
}
.li {
display: list-item;
list-style: none;
font-size: 14px;
margin: 0;
padding: 0;
}
.search_settings {
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
list-style: none;
}
.settings_tools.show {
display: block !important;
}
<div class="settings">
<button class="settings_style" id="test" onclick="settings_click()" aria-haspopup="true" aria-controls="settings_dropdown">Ayarlar</button>
<ul class="settings_tools" id="settings_dropdown" role="menu" aria-labelledby="test" style="display: none;">
<li role="none">
<a class="search_settings" href="https://www.google.com/preferences?hl=tr&fg=1" role="menuitem" tabindex="-1">Arama ayarları</a>
</li>
<li role="none">
<a class="search_settings" href="/advanced_search?hl=tr&fg=1" role="menuitem" tabindex="-1">Gelişmiş arama</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/privacyadvisor/search?utm_source=googlemenu&fg=1" role="menuitem" tabindex="-1">Arama'daki verileriniz</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/product/search?utm_source=google&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama geçmişi</a>
</li>
<li role="none">
<a class="search_settings" href="https://support.google.com/websearch/?p=ws_results_help&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama yardımı</a>
</li>
<li role="none">
<button class="search_settings" data-bucket="websearch" role="menuitem" tabindex="-1">Geri bildirim gönder</button>
</li>
</ul>
</div>
Related
I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}
The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}
I have a hamburger menu, when I click the button it activates the on target class on shows the menu. While the menu to open I am not sure how to make it if I click on the menu icon again it collapses the menu. Here is the code I got so far.
// my attempt in js to blur navTarget:focus
$("nav a").click(function() {
$("nav a").removeClass("navselected");
$(this).addClass("navselected");
});
$("#menu").click(function() {
$("#navTarget:focus").blur();
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
#navTarget:target {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
Here is the link to my Codepen
Remove the href from the menu button and :target style from CSS, instead add this style on class change.
$("#menu").on("click", function() {
$("#navTarget").toggleClass("openMenu");
});
$("#menu").on("click", function() {
$("#navTarget").toggleClass("openMenu");
});
$(".nav-link").on("click", function() {
$("#navTarget").removeClass("openMenu");
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
#navTarget.openMenu {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
I believe below solution fixes your problem. I use $("#navTarget").toggleClass("visible"); to toggle CSS class which makes navTarget visible.
$("nav a").click(function() {
$("#navTarget").toggleClass("visible");
});
$("#menu").click(function() {
$("#navTarget:focus").blur();
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
.visible {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
Hey try the following code and check the output it will fullfill your requirement. I used toggle() jquery function which toggles the navigation to display:block and display:none;
$("nav a").click(function() {
$("nav a").removeClass("navselected");
$(this).addClass("navselected");
});
$("#menu").click(function() {
// $("#navTarget:focus").blur();
$(".navigation").toggle();
});
nav{
flex:0 0 100%;
border-right:1px solid #386BA8;
background-color:#386BA8;
}
nav header{
padding:0rem 1rem;
}
nav a{
display: block;
color:#000;
text-decoration:none;
padding:1rem;
border-top:1px solid #386BA8;
}
nav a:first-child{
padding:0;
border-top:none;
}
.navigation{
background-color:#6699CC;
top:0rem;
display: none;
}
.hide{display: none;}
.bufferspace{padding: 0;}
#menu{
background-color:#6699CC;
display: block;
position:fixed;
cursor:pointer;
top:0;
z-index: 10;
}
#menu i{
font-size:2rem;
padding:1rem;
}
#navTarget{
padding-top:2.8rem;
}
nav a:first-child:hover {
animation:none;
}
nav a:first-child:hover {
animation:none;
}
.navselected:first-child{
background-color:none;
border-left:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title"><h1>HTML<br class="hide"/> Documentation</h1></header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
Hi I am new to vanilla JavaScript and trying to get a good understanding of it. I've created a multiple drop down menu navigation where the menus are triggered by a click event when the drop down buttons are clicked, a .show CSS class with the display property of block is added to the drop menu. The problem I'm having is that when I have one menu open and I click on another drop menu button, I want the current/all other menus to close. I'm not sure quite how I would achieve this. Any help is greatly appreciated, thanks.
Here is the JS:
(function() {
var dropBtns = document.querySelectorAll('.dropdown');
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var dropContent = btn.querySelector('.dropMenu');
e.preventDefault();
if (!dropContent.classList.contains('show')) {
dropContent.classList.add('show');
} else {
dropContent.classList.remove('show');
}
e.stopPropagation();
});
});
// close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});
}
});
})();
Here is the CSS:
.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}
Here is the HTML:
<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Price (hi to low)</li>
<li>Price (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Stars (hi to low)</li>
<li>Stars (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Score (hi to low)</li>
<li>Score (low to hi)</li>
</ul>
</li>
</ul>
</div>
You were almost there, just moved the code around a bit and it works as intended.
(function() {
var dropBtns = document.querySelectorAll('.dropdown');
function closeOpenItems() {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});
}
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var
dropContent = btn.querySelector('.dropMenu'),
shouldOpen = !dropContent.classList.contains('show');
e.preventDefault();
// First close all open items.
closeOpenItems();
// Check if the clicked item should be opened. It is already closed at this point so no further action is required if it should be closed.
if (shouldOpen) {
// Open the clicked item.
dropContent.classList.add('show');
}
e.stopPropagation();
});
});
// close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
// Moved the code here to its own function.
closeOpenItems();
}
});
})();
.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}
<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Price (hi to low)</li>
<li>Price (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Stars (hi to low)</li>
<li>Stars (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Score (hi to low)</li>
<li>Score (low to hi)</li>
</ul>
</li>
</ul>
</div>
When I click the Price (hi to low) no work
(function() {
var dropBtns = document.querySelectorAll('.dropdown');
function closeOpenItems() {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});
}
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var
dropContent = btn.querySelector('.dropMenu'),
shouldOpen = !dropContent.classList.contains('show');
e.preventDefault();
// First close all open items.
closeOpenItems();
// Check if the clicked item should be opened. It is already closed at this point so no further action is required if it should be closed.
if (shouldOpen) {
// Open the clicked item.
dropContent.classList.add('show');
}
e.stopPropagation();
});
});
// close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
// Moved the code here to its own function.
closeOpenItems();
}
});
})();
.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}
<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Price (hi to low)</li>
<li>Price (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Stars (hi to low)</li>
<li>Stars (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Score (hi to low)</li>
<li>Score (low to hi)</li>
</ul>
</li>
</ul>
</div>
I'm using a list as a navigation and CSS to design a horizontal nav for the main pages/ vertical nav for the subpages of "Diet".
I apply JavaScript to hide/ show the subpage links in the navigation. It works, but when the page is loaded the 3 links are shown - after I hovered over the item "Diet" they are hidden. If I hover again, then it is shown again and works as it should.
Basically, how can I make sure that the three links are hidden from the beginning?
Thank you in advance!
$(document).ready(function() {
$("nav li:has(ul)").hover(function() {
$(this).find("ul").slideDown();
}, function() {
$(this).find("ul").hide();
});
});
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
<li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
<li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
</ul>
</li>
</ul>
</nav>
Just add a display: none to the submenu:
.navListElmnt > .navUnordList {
display:none;
}
If I can express a personal note, these class names are bad, difficult to remember and to write.
$(document).ready(
function()
{
$("nav li:has(ul)").hover(
function()
{
$(this).find("ul").slideDown();
}
,
function()
{
$(this).find("ul").hide();
});
}
);
.navUnordList{
list-style:none;
margin:0;
padding:0;
overflow:hidden;
}
.navListElmnt{
float:left;
position:right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert{
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top:0.1em;
}
.navListElmnt > .navUnordList {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
<li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
<li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
</ul>
</li>
</ul>
</nav>
To hide the options to start with you can set them as display: none in CSS.
Also note that the JS is redundant, as you can have the same logic in CSS, which is preferred as it's hardware accelerated. Try this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navUnordList li ul li {
display: none;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmnt:hover > ul > li {
display: block;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">
Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink</li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
You can actually have a CSS only solution for this. Keep height 0px by default and make it auto on hover like this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
.navListElmnt>.navUnordList {
height: 0px;
}
.navListElmnt:hover>.navUnordList {
height: auto;
}
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink </li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
Note: This does take away the slide down animation cos of height:auto
But you can have animated version too, if you are ready to measure how much height each submenu takes like this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
.navListElmnt>.navUnordList {
height: 0px;
transition: all 0.2s ease;
}
.navListElmnt:hover>.navUnordList {
height: 50px;
}
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink </li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
I have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it should close and that option should come in the menu.
example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
place the text "item name " in a span with an id named label1
and add the following
e(".dropdown_menu").click(function(event){
e("#label1").text(event.target.textContent.trim());
})
Snippet below
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
});
e(".dropdown_menu").click(function(event) {
e("#label1").text(event.target.textContent.trim());
console.log(this);
})
e(".table-cell-data").click(function(ev){
var that=this;
e(".table-cell-data").each(function(){
if(this.classList.contains("color_me") && this!=that){
this.classList.remove("color_me");
}
})
this.classList.add("color_me")
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>