One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.
HTML OF FOOTER & MENU ELEMENT:
<footer>
<ul class="social">
<li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
</li>
<li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
<li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
<i class="fab fa-behance"></i> </a> </li>
<li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
<img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
</a> </li>
</ul>
<div class="navi-title">
Navigation
</div>
<ul class="navi"> <li class="navi">
<a href="PLACEHOLDER">
Home
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Works
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Contact
</a>
</li>
</ul>
</footer>
CSS FOR FOOTER & MENU ELEMENT:
footer {
clear: both;
background-color: #2a7de1;
text-align: center;
padding: 2% 0% 1% 0%;
margin-top: 20%;
position: relative;
}
footer ul.social li.social {
list-style: none;
display: inline;
}
footer > ul.social li.social a {
text-align: center;
font-size: 2vw;
margin: 0% 3% 0% 3%;
overflow: hidden;
text-decoration: none;
}
footer > ul.social li.social a .fab {
color: white;
}
footer > ul.social li.social a:hover .fab {
transform: scale(1.3);
transition: 0.3s;
}
.upwork {
width: 2.2%;
}
.upwork:hover {
transform: scale(1.3);
transition: 0.3s;
}
footer > ul.navi li.navi {
list-style: none;
margin: 0% 0% 0% 75%;
text-align: left;
padding: 0.3%;
}
.navi-title {
color: white;
font-family: 'karla';
font-size: 1.4vw;
text-align:left;
margin: 0% 0% 0.5% 75%;
font-weight: 700;
}
footer > ul.navi li.navi a {
text-decoration: none;
color: white;
font-family: 'karla';
font-size: 1.2vw;
}
ul.social {
position: absolute;
margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}
Codepen
The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn't look great that way, but it's somewhere to start.
ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
The issue is with your ul.social in the footer. I looked at it in the inspector.
You can see that it's overlapping the unreachable link, "Works".
As a test, I applied display: none to the ul and the "Works" link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.
I'm trying to make dropdown menus which look something like MacOS menu bar menus (see the code snippet here). They're looking and working ok so far, but the menus really should stay visible until the user clicks (or taps) somewhere on the screen. As it is currently, they become "hidden" again as soon as you move out of the menu.
So far it's being done with pure HTML and CSS, but my intuition tells me this will need a sprinkling of JavaScript to achieve the effect I'm after -- but my JavaScript is still a bit lacking.
I think each ul element needs an onhover event which sets its visibility to "visible", then the root window or document needs an onclick event to set everything below the first level of #menu items to "hidden". Does anyone care to have a go at this?
#menu {z-index: 9;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;}
#menu > ul{
padding: 0px 10px;
margin: 0;
}
#menu ul {
list-style: none;
}
#menu li {
float: left;
position: relative;
padding-left: 3px;
padding-right: 3px;
width: auto;
color: rgb(68, 68, 68);
margin-left: 0px;
}
#menu ul ul li {
width: 150px;
padding-left: 15px;
}
#menu a {
display: block;
text-decoration: none;
padding: 5px 5px;
color: rgb(68, 68, 68);
}
#menu > ul ul {
position: absolute;
background: rgb(240, 240, 240);
left: 0;
top: 100%;
visibility: hidden;
opacity: 0.95;
font-size: 15px;
box-shadow: 0 3px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-left: 0px;
}
#menu > ul ul ul {
left: 100%;
top: -3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#menu > ul ul > li:last-child {
margin-bottom: 3px;
}
#menu > ul ul > li:first-child {
margin-top: 3px;
}
#menu ul ul hr
{
border: 1px solid rgb(201, 201, 201);
margin: 0px -15px;
width: 165px;
}
#menu .li-selected
{
color: #407af2;
}
#menu li > ul {
margin-left: 0px;
padding-left: 0px;
}
#menu > ul ul ul li, ul ul ul li a {
background: rgb(240, 240, 240) !important;
}
#menu.hoverable li:hover
{
background: rgb(0, 144, 248);
}
#menu.hoverable ul li:hover > a
{
color: rgb(240, 240, 240);
}
/*
#menu.hoverable ul li:hover > ul, #menu.hoverable ul li > ul.visible,
#menu.hoverable ul li > ul > li > ul.visible
{
visibility: visible;
}
*/
#menu.hoverable ul li > ul.visible,
#menu.hoverable ul li:hover > ul,
ul.visible
{
visibility: visible;
}
#menu.hoverable ul ul ul li:hover, #menu.hoverable ul ul ul li:hover a {
background: rgb(0, 144, 248) !important;
}
.li-heading, #menu.hoverable .li-heading:hover {
background: rgb(240, 240, 240);
color: rgb(68, 68, 68);
padding: 5px 5px;
padding-right: 10px;
font-weight: bohttp://localhost:9000/sessions/102df527a94/index.html#ld;
}
.menu-right-icon
{
position: absolute;
right: 10px;
transform: scale(1.8,1.0);
}
.nav-caret
{
transform: scaleX(1.8);
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.grid {
display: grid;
grid-gap: 1px;
height: 100%;
background-color: #aaa;
font-family: "helvetica Neue", Helvetica, Arial, sans-serif;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(15px, auto) 1fr 1fr;
grid-template-areas: "menu" "tree" "inspector" "viewport";
}
#media (min-width: 700px) {
.grid {
/* grid-template-columns: minmax(auto, min-content) minmax(auto, min-content) minmax(auto, 100%); */
/* grid-template-columns: minmax(auto, min-content) minmax(10px, 20px) minmax(auto, 100%); */
/* grid-template-columns: minmax(auto, min-content) minmax(auto, 100%); */
grid-template-columns: minmax(auto, 20%) minmax(auto, 100%);
grid-template-rows: auto minmax(auto, min-content) minmax(auto, 100%);
grid-template-areas: "menu menu "
"tree viewport"
"inspector viewport";
}
}
.menu {
grid-area: menu;
background: rgb(219, 230, 250);
z-index: 9;
font-size: 15px;
}
.menu-image {
width: 16px;
height: 15px;
}
.tree {
grid-area: tree;
background: rgb(209, 209, 209);
resize: both;
overflow: auto;
}
#tree-root {
padding: 0 15px
}
.inspector {
grid-area: inspector;
font-size: 11px;
background: #f8f8f8;
/* resize: horizontal; */
overflow: auto;
z-index: 5;
}
.viewport {
grid-area: viewport;
background: #e8e8e8;
/* resize: both; */
overflow: auto;
z-index: 1;
}
.viewport div:first-child {
text-align: center;
}
.growlr-tree ul {
list-style: none;
margin-left: 1em;
padding-left: 0px;
}
.growlr-tree li {
white-space: nowrap;
list-style: none;
margin-left: 0px;
padding-left: 0px;
}
.expanded,
.directory,
.leaf {
margin-bottom: 5px;
margin-right: 5px;
}
.expanded {
color: rgb(119, 119, 119);
}
.directory {
color: rgb(212, 113, 113);
}
.leaf {
color: rgb(100, 190, 104);
}
.inspector .heading {
font-size: 15px;
font-weight: bold;
color: rgb(82, 82, 82);
}
.inspector-table, .inspector-table tr, .inspector-table tr td
{
overflow: auto;
cellpadding: 0;
cellspacing: 0;
border-collapse: collapse;
text-align: left;
}
.inspector-table td
{
border: 1px solid rgb(168, 168, 168);
padding: 3px 2px;
text-align: left;
}
.inspector-table td:first-child
{
color: rgb(78, 78, 78);
text-align: center;
}
.inspector-table tr:nth-child(odd)
{
background-color: rgb(233, 242, 255);
}
.i-t-m
{
padding: 0px;
text-align: left;
}
.i-t-v
{
padding: 0px;
text-align: left;
}
.i-t-v-click
{
color: blue;
font-style: italic;
font-family: monospace;
cursor: pointer;
white-space: pre;
}
.i-t-v-unclick
{
color: black;
font-family: monospace;
width: 10px;
white-space: pre;
}
#svg-1 path {vector-effect: non-scaling-stroke};
#x3dom-1 {background: #d3d3d3;}
<!DOCTYPE HTML><html lang="en"><head><title>Genworks GDL - assembly</title><meta charset="UTF-8" /><link rel="icon" type="image/x-icon" href="/static/gwl/images/favicon.ico" /><div id="KDpzdGFuZGFyZC1qYXZhc2NyaXB0LXNlY3Rpb24p">
<link id="fontawesome-css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" /></div></head><body>
<div class="grid">
<div id="menu-cell" class="cell menu"><div id="KDptZW51KQ"><script>
function hideMenus(event)
{
var related = event.relatedTarget;
var isInMenu = ((related) && (document.querySelector('#menu').contains(related)));
if (!(isInMenu))
{
setTimeout(removeMenuHoverable, 50);
setTimeout(removeMenuVisible, 50);
}
}
function hideTopMenus (event)
{
var obj = event.target;
var uls = document.querySelectorAll('#menu > ul > li > ul');
for (var i = 0; i < uls.length; i++)
uls[i].classList.remove('visible');
}
function removeMenuHoverable()
{
document.querySelector('#menu').classList.remove('hoverable');
}
function removeMenuVisible ()
{
var uls = document.querySelectorAll('#menu ul ul');
for (var i=0; i< uls.length; i++)
uls[i].classList.remove('visible');
}
function addVisible(event, level)
{
var obj = event.target;
if (obj.tagName == 'A')
obj = obj.parentNode.parentNode;
if (obj.tagName == 'UL')
{
obj.classList.add('visible');
var par = obj.parentNode.parentNode;
if (par.tagName == 'UL')
{ par.classList.add('visible');
}
event.stopPropagation();
}
}
</script>
<nav id="menu">
<ul onmouseover="
hideTopMenus(event);
">
<li>
<a href="#" tabindex="0" onfocus="
document.querySelector('#menu').classList.add('hoverable');
" onblur="hideMenus(event);"><img class="menu-image" src="https://genworks.com/static/gwl/images/logo.png" alt="G" />
</a>
<ul onmouseover="
addVisible(event, 1);
"><li><i class="fas fa-check"></i> Development</li>
</ul>
</li>
<li>
<a href="#" tabindex="0" onfocus="
document.querySelector('#menu').classList.add('hoverable');
" onblur="hideMenus(event);">File
</a>
<ul onmouseover="
addVisible(event, 1);
">
<li>
<a href="#">New
</a>
</li>
<li>
<a href="#">Open
</a>
</li>
<li>
<a href="#">Save
</a>
</li>
</ul>
</li>
<li>
<a href="#" tabindex="0" onfocus="
document.querySelector('#menu').classList.add('hoverable');
" onblur="hideMenus(event);">Edit
</a>
<ul onmouseover="
addVisible(event, 1);
">
<li>
<a href="#">Color
</a>
</li>
<li>
<a href="#">Line Thickness
</a>
</li>
</ul>
</li>
<li>
<a href="#" tabindex="0" onfocus="
document.querySelector('#menu').classList.add('hoverable');
" onblur="hideMenus(event);">Tree
</a>
<ul onmouseover="
addVisible(event, 1);
"><li> Add Node...</li><li> Draw Node...</li><li> Add Leaves...</li><li> Draw Leaves...</li>
</ul>
</li>
<li>
<a href="#" tabindex="0" onfocus="
document.querySelector('#menu').classList.add('hoverable');
" onblur="hideMenus(event);">View
</a>
<ul onmouseover="
addVisible(event, 1);
">
<li>
<a href="#" tabindex="0">Camera Point
<span class="menu-right-icon">
<i class="fas fa-caret-right"></i>
</span>
</a>
<ul onmouseover="
addVisible(event, 2);
"><li><i class="fas fa-check"></i> Trimetric</li><li> Top</li><li> Front</li><li> Left</li><li> Bottom</li><li> Rear</li><li> Right</li>
</ul>
</li><li></li><li> Fit to View</li><li> Clear!</li><li></li>
<li>
<a href="#" tabindex="0">Graphics Format
<span class="menu-right-icon">
<i class="fas fa-caret-right"></i>
</span>
</a>
<ul onmouseover="
addVisible(event, 2);
"><li> SVG</li><li><i class="fas fa-check"></i> Raphael</li><li> x3dom</li><li> png</li><li> jpeg</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" tabindex="0" onfocus="
document.querySelector('#menu').classList.add('hoverable');
" onblur="hideMenus(event);">Develop
</a>
<ul onmouseover="
addVisible(event, 1);
"><li> Update!</li><li> Set Self!</li>
</ul>
</li>
</ul>
</nav></div>
</div>
</div></body></html>
You can do this using javascript (in this example using jQuery):
Replace your css #menu li:hover>ul
By creating a class named "visible":
#menu li>ul.visible {
visibility: visible;
opacity: 0.95;
margin-left: 0px;
padding-left: 0px;
}
Use JQuery
Add .hover() to detect mouse over your menu and addClass() "visible" to the current dropdown menu (ul)
Add .click() which will remove class "visible" from any dropdown menu
Full working code at: https://jsfiddle.net/ha1omd2w/
You will likely have to change your markup slightly, but using the :focus pseudo class will probably do what you want. If you extend all of your :hover styles with :focus you will see that when you click a menu item it will stay selected. The issue though is you are clicking and giving the <a> tag focus that is inside of the <li> tag. That means you won't be able to use child selectors the same way.
You could do one of two things to solve this:
1) Remove the wrapping <li> tag and update your styles accordingly.
2) Add pointer-events: none to the <a> tag which would effectively pass the click event to the <li> and put focus there which you could then target with styles. This also means though that if you have a href on the <a> tag you will technically not be able to click to navigate to it.
Thanks for your feedbacks. I've incorporated some of them into the version below, which I feel is starting to look reasonable. Anyone who's interested, please poke around with it and see where it's still lacking. I know it will break on older browsers [1], and I know I should be assigning the events with JavaScript rather than mixing them in the HTML with various on... tag attributes (will fix later). But anyone who's interested please feel free to tell me where the logic or styling falls apart or where it's working harder than it needs to be...
[1] Although I plan to punt on doing any real work to support older browsers with this, maybe I could use one of these "polyfills" I hear people speaking of... or at least display a "Not Supported" message for non-modern browsers...
function makeMenuBarHoverable (event)
{
document.querySelector('#menu').classList.add('hoverable');
}
function hideMenus(event)
{
var lis;
var obj = (event && event.target);
var menu = document.querySelector('#menu');
if (obj && menu.contains(obj))
{
while (obj && (!(obj.tagName == 'LI'))) obj = obj.parentNode;
var ul = obj.parentNode;
lis = ul.querySelectorAll('li');
}
else
{
lis = menu.querySelectorAll('ul li');
menu.classList.remove('hoverable');
}
for (var i=0;i<lis.length;i++)
{
var li = lis[i];
if /* ((! (li == obj)) && (li.classList.contains('visible'))) */
(! (li == obj))
li.classList.remove('visible');
}
}
setTimeout(hideMenus, 10);
document.addEventListener('click', hideMenus);
function addVisible(event, level)
{
var obj = event.target;
while (obj && (obj.tagName != 'UL')) obj = obj.parentNode;
if (obj.tagName == 'UL') obj = obj.parentNode;
if ((obj.tagName == 'LI') && (! (obj.classList.contains('visible'))))
obj.classList.add('visible');
}
#menu, #menu ul, #menu li, #menu a
{
z-index: 9;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}
#menu > ul
{
padding: 0px 10px;
margin: 0;
}
#menu ul
{
list-style: none;
}
#menu > ul > li
{
float: left;
position: relative;
padding-left: 3px;
padding-right: 3px;
width: auto;
margin-left: 0px;
}
#menu ul ul li
{
padding-left: 15px;
padding-right: 15px;
white-space: nowrap;
}
#menu ul ul li a
{
display: flex;
flex-direction: row;
align-items: center;
}
#menu ul li
{
outline: none;
}
#menu a
{
display: block;
text-decoration: none;
padding: 5px 5px;
color: rgb(68, 68, 68);
}
#menu > ul ul
{
position: absolute;
background: rgb(240, 240, 240);
left: 0;
top: 100%;
visibility: hidden;
opacity: 0.95;
font-size: 15px;
box-shadow: 0 3px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-left: 0px;
}
#menu > ul ul ul
{
left: 100%;
top: -3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#menu > ul ul > li:last-child
{
margin-bottom: 3px;
}
#menu > ul ul > li:first-child
{
margin-top: 3px;
}
#menu ul ul hr
{
border: 1px solid rgb(201, 201, 201);
margin: 0px -15px;
}
#menu li > ul
{
margin-left: 0px;
padding-left: 0px;
}
#menu > ul ul li
{
position: relative;
}
#menu > ul > li, #menu > ul > li > a
{
background: rgb(219, 230, 250); !important;
}
#menu ul li ul li > a,
#menu ul li ul li
{
background: rgb(240, 240, 240);
color: rgb(68, 68, 68);
}
#menu ul li.visible > a,
#menu ul li.visible,
#menu.hoverable ul li:hover > a,
#menu.hoverable ul li:hover
{
color: rgb(240, 240, 240) !important;
background: rgb(0, 144, 248) !important;
}
#menu ul li ul .li-selected
{
color: #407af2;
}
#menu.hoverable ul li.visible > ul,
#menu.hoverable ul li:hover > ul
{
visibility: visible;
}
.li-heading, #menu.hoverable .li-heading:hover
{
background: rgb(240, 240, 240);
color: rgb(68, 68, 68);
padding: 5px 5px;
padding-right: 10px;
font-weight: bold;
}
.fa-check
{
padding-right: 5px;
}
.menu-right-icon
{
margin-left: auto;
padding-left: 12px;
transform: scale(1.8,1.0);
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.grid {
display: grid;
grid-gap: 1px;
height: 100%;
background-color: #aaa;
font-family: "helvetica Neue", Helvetica, Arial, sans-serif;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(15px, auto) 1fr 1fr;
grid-template-areas: "menu" "tree" "inspector" "viewport";
}
#media (min-width: 700px) {
.grid {
/* grid-template-columns: minmax(auto, min-content) minmax(auto, min-content) minmax(auto, 100%); */
/* grid-template-columns: minmax(auto, min-content) minmax(10px, 20px) minmax(auto, 100%); */
/* grid-template-columns: minmax(auto, min-content) minmax(auto, 100%); */
grid-template-columns: minmax(auto, 20%) minmax(auto, 100%);
grid-template-rows: auto minmax(auto, min-content) minmax(auto, 100%);
grid-template-areas: "menu menu "
"tree viewport"
"inspector viewport";
}
}
.menu {
grid-area: menu;
background: rgb(219, 230, 250);
z-index: 9;
font-size: 15px;
}
.menu-image {
width: 16px;
height: 15px;
}
<!DOCTYPE HTML><html lang="en"><head><title>Genworks GDL - assembly</title><meta charset="UTF-8" /><link rel="icon" type="image/x-icon" href="/static/gwl/images/favicon.ico" /><div id="KDpzdGFuZGFyZC1qYXZhc2NyaXB0LXNlY3Rpb24p">
<link id="fontawesome-css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" /></div></head><body>
<div class="grid">
<div id="menu-cell" class="cell menu"><div id="KDptZW51KQ">
<nav id="menu">
<ul id="menu">
<li id="(the :logo)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
<a href="#" id="a (the :logo)"><img class="menu-image" src="https://genworks.com/static/gwl/images/logo.png" alt="G" />
</a>
<ul id="(the :logo)" onmouseover="addVisible(event, 1);"><li onmouseover="hideMenus(event);"><i class="fas fa-check"></i> Development</li>
</ul>
</li>
<li id="(the :file)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
<a href="#" id="a (the :file)">File
</a>
<ul id="(the :file)" onmouseover="addVisible(event, 1);">
<li onmouseover="hideMenus(event);">
<a href="#">New
</a>
</li>
<li onmouseover="hideMenus(event);">
<a href="#">Open
</a>
</li>
<li onmouseover="hideMenus(event);">
<a href="#">Save
</a>
</li>
</ul>
</li>
<li id="(the :edit)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
<a href="#" id="a (the :edit)">Edit
</a>
<ul id="(the :edit)" onmouseover="addVisible(event, 1);">
<li onmouseover="hideMenus(event);">
<a href="#">Color
</a>
</li>
<li onmouseover="hideMenus(event);">
<a href="#">Line Thickness
</a>
</li>
</ul>
</li>
<li id="(the :tree)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
<a href="#" id="a (the :tree)">Tree
</a>
<ul id="(the :tree)" onmouseover="addVisible(event, 1);"><li onmouseover="hideMenus(event);"> Add Node...</li><li onmouseover="hideMenus(event);"><i class="fas fa-check"></i> Draw Node...</li><li onmouseover="hideMenus(event);"> Add Leaves...</li><li onmouseover="hideMenus(event);"> Draw Leaves...</li>
</ul>
</li>
<li id="(the :view)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
<a href="#" id="a (the :view)">View
</a>
<ul id="(the :view)" onmouseover="addVisible(event, 1);">
<li id="(the :view :camera-point-menu)" tabindex="0" onmouseover="hideMenus(event);">
<a href="#" id="a (the :view :camera-point-menu)">Camera Point to view from this direction
<span class="menu-right-icon">
<i class="fas fa-caret-right"></i>
</span>
</a>
<ul id="(the :view :camera-point-menu)" onmouseover="addVisible(event, 2);"><li onmouseover="hideMenus(event);"><i class="fas fa-check"></i> Trimetric</li><li onmouseover="hideMenus(event);"> Top</li><li onmouseover="hideMenus(event);"> Front</li><li onmouseover="hideMenus(event);"> Left</li><li onmouseover="hideMenus(event);"> Bottom</li><li onmouseover="hideMenus(event);"> Rear</li><li onmouseover="hideMenus(event);"> Right</li>
</ul>
</li><li onmouseover="hideMenus(event);"><hr /></li><li onmouseover="hideMenus(event);"> Fit to View</li><li onmouseover="hideMenus(event);"> Clear!</li><li onmouseover="hideMenus(event);"><hr /></li>
<li id="(the :view :graphics-format-menu)" tabindex="0" onmouseover="hideMenus(event);">
<a href="#" id="a (the :view :graphics-format-menu)">Graphics Format
<span class="menu-right-icon">
<i class="fas fa-caret-right"></i>
</span>
</a>
<ul id="(the :view :graphics-format-menu)" onmouseover="addVisible(event, 2);"><li onmouseover="hideMenus(event);"><i class="fas fa-check"></i> SVG</li><li onmouseover="hideMenus(event);"> x3dom</li><li onmouseover="hideMenus(event);"> png</li>
<li id="(the :view :graphics-format-menu :tree-menu)" tabindex="0" onmouseover="hideMenus(event);">
<a href="#" id="a (the :view :graphics-format-menu :tree-menu)">Tree
<span class="menu-right-icon">
<i class="fas fa-caret-right"></i>
</span>
</a>
<ul id="(the :view :graphics-format-menu :tree-menu)" onmouseover="addVisible(event, 3);"><li onmouseover="hideMenus(event);"> Add Node...</li><li onmouseover="hideMenus(event);"><i class="fas fa-check"></i> Draw Node...</li><li onmouseover="hideMenus(event);"> Add Leaves...</li><li onmouseover="hideMenus(event);"> Draw Leaves...</li>
</ul>
</li><li onmouseover="hideMenus(event);"> jpeg</li>
</ul>
</li>
</ul>
</li>
<li id="(the :develop)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
<a href="#" id="a (the :develop)">Develop
</a>
<ul id="(the :develop)" onmouseover="addVisible(event, 1);"><li onmouseover="hideMenus(event);"> Update!</li><li onmouseover="hideMenus(event);"> Set Self!</li>
</ul>
</li>
</ul>
</nav></div>
</div>
</div>
</div></body></html>
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>
So I have a panel layout that I've been throwing together and it has a fancy vertical navbar. I have it aligned correctly and everything and I have successfully been able to get a dropdown menu to appear in a vertical fashion, however, for some reason it is always appending to the last item on list. I can't understand why it is doing this.
I've posted all of my code below, and from previous research on the initial issue of just getting the menu to show up, I believe that my css is correct, so I'm wondering if it may be a javascript issue on the boostrap side, but I have no javascript currently being used with the side menu.
CSS
/************
* side navbar
*************/
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -92px 0 0 100%;
border-radius: 0;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
html
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/equipment">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
I have a working fiddle to demonstrate what my issue is:
https://jsfiddle.net/ye1q4wfu/4/
All I want it to do is, when I click on the list item that has a dropdown. I want the dropdown to appear next to it.
Just set the top of dropdown to top: auto;
#side-nav .dropdown-menu {
top: auto;
}
https://jsbin.com/fukujazuko/
My internet has some trouble with jsfiddle
If you don't mind using a bit of JQuery, I think this will do the trick:
$('.dropdown-menu').each(function() {
$(this).css('top', $(this).closest('li').css('top'));
});
You will also need to change one line of your CSS:
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
//margin: -92px 0 0 100%; /* Removed */
margin: 0 0 0 100%; /* Added */
border-radius: 0;
}
Demo Here
Use the following CSS code that the sub-menu appears in front of the item.
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -290px 0 0 100%;
border-radius: 0;
}
I've added the clearfix class to the li element in which your dropdown menu is. Then, these attributes to dropdown-menu
#side-nav .dropdown-menu {
...
top: auto;
float: right;
}
And added this css rule:
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
This is the complete snippet with the changes. When showing the code snippet, please, click on "Full page" to see the result.
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: 0 0 0 100%;
border-radius: 0;
top: auto;
float: right;
}
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li class="clearfix"> <!-- ADDED THE CLEARFIX CLASS -->
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
</body>
</html>
I have an accordion on my website and I would like for the accordion to be open at the right level depending on where the active class is. I have made a JSFiddle.
JS:
$(document).ready(function ($) {
$('.servicesub').find('.servicesubitem').click(function () {
if ($(this).next().is(':visible')) {
//Collapse
$(this).next().slideToggle('fast');
$(this).removeClass('active');
// $("#footer-wrapper").animate({marginTop: "0px"}, 'fast');
} else {
//Expand
$(this).next().slideToggle('fast');
$(this).siblings().removeClass('active');
$(this).addClass('active');
//hide other panels
$(".servicesubli").not($(this).next()).slideUp('fast');
//$("#footer-wrapper").animate({marginTop: "200px"}, 'fast');
}
});
});
HTML:
<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
<li class="servicesubitem active">
<span class="subitem">Web Design,
<br>
Multimedia & Email</span><span class="fa1 fa-globe"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="domains.php">
<li>
Domain Registration
</li>
</a>
<a href="webdesign.php">
<li>
Web Design & Development
</li>
</a>
<a href="webhosting.php">
<li>
Web Hosting
</li>
</a>
<a href="email.php">
<li>
Managed Email Systems
</li>
</a>
</ul>
</div>
<li class="servicesubitem">
<span class="subitem">Vessel
<br>
Security</span><span class="fa1 fa-lock"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="tracking.php">
<li>
Yacht Tracking
</li>
</a>
<a href="ssas.php">
<li>
SSAS
</li>
</a>
<a href="#">
<li>
SAT C
</li>
</a>
</ul>
</div>
</div>
CSS:
* Service Sub */
.servicesub { padding:10px; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; }
.servicesub li a {text-decoration: none;}
.servicesub li a:hover {color:#fff;}
.servicesub li { background-color: #017CEB; }
.servicesub li:hover { background-color: #015BAC; }
.servicesub li.active { background-color: #015BAC; }
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block; width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; }
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; }
.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; }
.servicesubitem { cursor: pointer; }
.servicesubli { cursor: pointer; display: none; }
.servicesubli.default { display: block; }
.servicesubli ul { width: 100%; font-size: 14px;}
.servicesubli li { padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;}
.servicesubli a { text-decoration: none; color: #fff; }
.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;}
.servicesub .getintouch:hover { background-color: #00539f; }
.servicesub .getintouch h3 { color: #fff; text-align: center; }
.servicesub .getintouch p { color:#fff; text-align: center; }
As you can see the accordion works to click on and the active class (which is set manually for this demo) is there I just want it so that the correct accordion part is toggled when the page is loaded. Thanks in advance.
To recycle your logic, You can just add your .active class to whichever element you wish, then search for .servicesubli.active on ready. Observe the following...
<div class="servicesubli active">
$(function() {
[...]
$('.servicesubli.active').slideToggle('fast');
});
JSFiddle Link - demo
Per comments, if you wish to target off servicesubitem.active, just modify to the following...
$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast');
JSFiddle Link - demo - .servicesubitem.active selector
Well you just need to trigger the click event once the page is loaded like below:
$('.servicesub').find('.active').trigger( "click" );
See the jsfiddle here: http://jsfiddle.net/beroza/a1mbgyqx/