≫ Live Demo On JSFiddle ≪
Occurring Problems / Questions
1). Toggling Show/Hide
Upon clicking on the same drop toggle, or another, I need to reverse the process of any already clicked drop toggles and then show the clicked drop toggle. The current version simply uses the following jQuery code:
$(".HonorBarsList a").click(function(){
$(this).parent().parent().parent().css({ marginBottom : "296px" });
$(this).parent().css({ borderBottom : "none" });
$(this).parent().find("ul").show();
});
I understand that I could loop through the entire scope, applying the initial CSS to all, however this seems like a rather lengthy way to do this.
Q). What is my best solution to use here?
2). Last List Set > UL > Top Left Border
This list is generated via a PHP PDO query, therefore the amount of list items will be unknown. On my provided demo, the last set has only three LI's meaning at the top left corner, there appears to be missing border.
Q). Should I fake this by having the link drop toggle's bottom border white and the UL simply have all borders, or is there another trick I can use, remembering that the last set could have 1-4 LI's within.
It is ok to reset the CSS to all the relevant elements. It might be better to do it with an active class though to make the jQuery code a bit cleaner.
Below is an example of just setting the CSS back to it's defaults before applying the relevent CSS to the clicked element.
$(document).ready(function(){
"use strict";
$(".myList a").click(function(){
// store relevent elements
var parentUl = $(this).parent().parent().parent();
var $this = $(this);
if($this.hasClass("active-li")) {
// if clicked element is already active then toggle class
parentUl.toggleClass("active-ul");
$this.toggleClass("active-li");
} else {
// otherwise remove active class from active elements
$(".active-ul").removeClass("active-ul");
$(".active-li").removeClass("active-li");
// then toggle the active class on the clicked parent element
parentUl.toggleClass("active-ul");
$this.toggleClass("active-li");
}
});
});
.myList {
display: block;
float: left;
width: 600px;
height: auto;
margin:0;
padding:0;
border-top:1px solid black;
}
.myList > li,
.myList > li > ul {
display: block;
float: left;
height: 50px;
width: 600px;
margin: 0;
padding: 0;
}
.myList > li > ul > li {
display: block;
float: left;
height: 51px;
width: 150px;
border-left: 1px solid black;
box-sizing: border-box;
overflow: hidden;
}
.myList > li > ul > li:last-of-type { border-right: 1px solid black; }
.myList > li > ul > li a {
display: block;
height: 50px;
width: 100%;
border-bottom: 1px solid black;
position:relative;
z-index:2;
}
.myList > li > ul > li > a > div {
display: block;
float: left;
}
.myList > li > ul > li > ul {
display: none;
position: absolute;
height: 150px;
width: 600px;
margin-top: -1px;
margin-left: -1px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-sizing: border-box;
z-index:1;
}
.myList > li > ul > li:nth-of-type(2) > ul { margin-left: -151px; }
.myList > li > ul > li:nth-of-type(3) > ul { margin-left: -301px; }
.myList > li > ul > li:nth-of-type(4) > ul { margin-left: -451px; }
.myList .active-ul {
margin-bottom:150px;
}
.myList .active-li {
border-bottom:1px solid white;
}
.myList .active-li + ul {
display:block;
}
<ul class="myList">
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Maybe it's better to use the .toggle from jQuery
you can handle initial state and new state onclick event
$(".myList a").click(function(){
$(this).parent().parent().parent().toggle(function () {
$(this).parent().parent().parent().css({borderBottomLeftRadius: "150px"});
}, function () {
$(this).parent().parent().parent().css({borderBottomLeftRadius: "0px"});
});
)};
Related
I am working on an accessible navigation and would like to toggle submenu items on click using the same click handler but their closest respective sub-menu-items. (Any accessibility help is a bonus.) Is the only way to do this by setting an ID? If so, I would like this to be dynamic in the JS where the data-id is not hardcoded.
function handleSubmenuToggle() {
console.log('click');
document.querySelector('.sub-menu-items').style.display = 'block';
}
.nav-menu-container {
background: black;
color: white;
font-size: 0.875rem;
padding: 1.3125rem 1.875rem;
}
.menu-item {
display: inline;
padding: 0 0.75rem;
position: relative;
}
.menu-item button {
background-color: transparent;
border: none;
color: white;
}
.sub-menu-items {
background: white;
display: none;
left: -25px;
min-width: 183px;
padding: 10px 0;
position: absolute;
top: 40px;
}
.sub-menu-items.show {
display: block !important;
}
.sub-menu-items:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
content: " ";
position: absolute;
top: -10px;
left: 42%;
}
.sub-menu-items a {
color: black;
text-decoration: none;
padding: .5rem 1rem;
display: block;
}
.sub-menu-items a:hover {
background-color: lightgray;
}
<header>
<nav aria-label="Empower Reservation Navigation" class="nav-menu-container">
<ul class="menu-items">
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed' onclick="handleSubmenuToggle();">Menu Item 1 <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed' onclick="handleSubmenuToggle()">Menu Item 2<i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Tools <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Contact [Name] <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
</ul>
</nav>
</header>
Thanks in advance!
https://codepen.io/fawn-marie/pen/GRBobNX?editors=1111
W3 has some great examples how to implement WCAG features with ARIA attributes. A specific example could be found here: Navigation Menubar Example.
Give the <button> element two new aria attributes
aria-haspopup to indicate that there is a flyout submenu;
aria-expanded to provide information if the flyout is visible or not
By doing this you're giving the <button> the control over the state of the submenu. aria-expanded will now tell you the current state of the submenu. You can manipulate this state through JavaScript by setting the attribute value with Element.setAttribute.
Then you can open and close your submenu by styling the submenu based on the aria-expanded value. Since the button is a sibling of the submenu, you can use the sibling selector + to select the submenu whenever the button has a certain attribute, like this.
ul.submenu {
display: none;
}
button[aria-expanded="true"] + ul.submenu {
display: block;
}
The cool thing about this is that the <button> is the only authority over the submenu. From here you only have to listen for clicks on the button to toggle the aria-expanded state. The rest will be governed by CSS.
I suggest you look at the W3 link as it shows more attributes that you should use in this kind of structure to improve accessibility.
const subMenuToggles = document.querySelectorAll('.sub-menu-toggle');
document.addEventListener('click', event => {
const subMenuToggle = event.target.closest('.sub-menu-toggle');
if (subMenuToggle === null) {
return;
}
for (const toggle of subMenuToggles) {
if (toggle.hasAttribute('aria-haspopup')) {
toggle.setAttribute('aria-expanded', 'false');
}
}
if (!subMenuToggle.hasAttribute('aria-haspopup')) {
return;
}
if (subMenuToggle.getAttribute('aria-expanded') === 'true') {
subMenuToggle.setAttribute('aria-expanded', 'false');
} else {
subMenuToggle.setAttribute('aria-expanded', 'true');
}
});
.nav-menu-container {
background: black;
color: white;
font-size: 0.875rem;
padding: 1.3125rem 1.875rem;
}
.menu-item {
display: inline;
padding: 0 0.75rem;
position: relative;
}
.menu-item button {
background-color: transparent;
border: none;
color: white;
}
.sub-menu-items {
display: none;
background: white;
left: -25px;
min-width: 183px;
padding: 10px 0;
position: absolute;
top: 40px;
}
.sub-menu-toggle[aria-expanded="true"] + .sub-menu-items {
display: block;
}
.sub-menu-items:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
content: " ";
position: absolute;
top: -10px;
left: 42%;
}
.sub-menu-items a {
color: black;
text-decoration: none;
padding: .5rem 1rem;
display: block;
}
.sub-menu-items a:hover {
background-color: lightgray;
}
<header>
<nav aria-label="Empower Reservation Navigation" class="nav-menu-container">
<ul class="menu-items">
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Menu Item 1 <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Menu Item 2<i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Tools <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Contact [Name] <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
</ul>
</nav>
</header>
I'm working on a mock site for my web developer portfolio. I don't have much experience with Javascript and JQuery, but I'm trying to figure out the most efficient way to show and hide dropdowns for a nav menu. My JQuery isn't working and I wanted to know if anyone had any tips. Also, I do plan on making dropdowns for all the instruments in the first Ul.
HTML:
<body>
<div class="container-fluid">
<div id="main-page">
<ul id="main-menu">
<li class="main-menu-list-items" style="border: 1px solid black;">
<div class="dropdown">
<ul>
<li>Products</li>
<div id="myDropdown" class="dropdown-content">
<ul>
<li class="dropdown-submenu"><a onclick="myClarinetDrop()" class="clarinet-drop" href="#">Clarinet</a>
<div id="my-clarinet-dropdown" class="dropdown-content">
<ul>
<li>Bb Clarinet</li>
<li>Bb Bass Clarinet</li>
<li>Eb Clarinet</li>
<li>Alto Clarinet</li>
<li>Bb German Clarinet</li>
<li>Bb Contrabass Clarinet</li>
</ul>
</li>
<li>Saxophone</li>
<li>Flute</li>
<li>Bassoon</li>
<li>Recorder</li>
<li>Brass</li>
<li>Guitar</li>
<li>Piano</li>
<li>Orchestral</li>
<li>Percussion</li>
</div><!--closes "myDropdown"-->
</ul>
</div><!--closes dropdown-->
</li>
<li class="main-menu-list-items"style="border: 1px solid black;">
<span>Shop By Brands</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>How To Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>Quick Order</span>
</li>
<li class="main-menu-list-items" style="border: 1px solid black;">
<span>About Us</span>
</li>
</ul><!--closes "main-menu"-->
</div><!--closes "main-page"-->
</div><!--closes "container-fluid"-->
</body>
CSS:
body {
margin:0;
padding:0;
}
.main-menu-list-items {
list-style-type:none;/*removes bullet point*/
float:left;/*puts list items side by side -- with no spaces*/
padding:15px 75px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown >ul {
margin-left:-40px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display:none;
position: absolute;
min-width: 1154px;
border:1px solid black;
margin-left:-76px;
margin-top:15px;
height:50px;
list-style-type:none;
}
.dropdown-content > ul {
list-style-type:none;
}
.dropdown-content >ul >li {
position:relative;
float:left;
padding:15px 29px;
}
.dropdown-submenu > div > ul > li {
position:relative;
float:left;
padding:15px 52px 0 30px;
}
.dropdown-submenu > div > ul {
border:1px solid black;
height:50px;
margin-left:-70px;
bottom:-54px;
min-width: 1114px;
position:absolute;
list-style-type:none;
display:none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
JQuery:
$(' .main-menu-list-items > .dropdown').click(function() {
var submenu = $(this).children('.dropdown > ul');
if($('.dropdown-content').css('display') == 'none') {
$(submenu).show();
}
else {
$(submenu).hide();
}
});
If you want to open a single sub-menu, it should be sufficient to add a class. You can then show the child element (.dropdown-content) by adding another CSS rule. If you remove that class, the child node will be hidden again. I have rewritten your code a bit and improved it that purpose:
$('.main-menu-list-items > .dropdown').click(function() {
var $this = $(this); // performance, so we do not have to call $(this) multiple times
if(!$this.hasClass('show')) {
$this.addClass('show');
} else {
$this.removeClass('show');
}
});
Then add this to your CSS. This works because you previously have hidden this element within your CSS:
.show .dropdown-content {
display: block;
}
As a side note: remove onclick="myFunction()". You do not have this function defined, so it will only give you errors in the console.
The first thing you might want to fix is your HTML. The only allowed direct descendants of a ul are li, do remove the divs. Also, you have a few instances in your HTML where your closing brackets are in the wrong place, thus creating invalid HTML.
Here's a simple format for a menu, but you'd have to redo your CSS to use it:
<nav>
<ul>
<li class="dropdown">
<a href="#" >Products</a>
<ul class="sub-menu">
<li class="dropdown">
Clarinet
<ul class="sub-menu">
<li>Bb Clarinet</li>
<li>Bb Bass Clarinet</li>
<li>Eb Clarinet</li>
<li>Alto Clarinet</li>
<li>Bb German Clarinet</li>
<li>Bb Contrabass Clarinet</li>
</ul>
</li>
<li>
Saxophone
</li>
<li>
Flute
</li>
<li>
Bassoon
</li>
<li>
Recorder
</li>
<li>
Brass
</li>
<li>
Guitar
</li>
<li>
Paino
</li>
<li>
Orchestral
</li>
<li>
Percussion
</li>
</ul>
</li>
<li>
Shop By Brands
</li>
<li>
How to Order
</li>
<li>
Quick Order
</li>
<li>
About Us
</li>
</ul>
</nav>
Then, to show the sub-menu, regardless of how many times it's nested, you could do something like:
$('.dropdown').on('click', function() {
$(this).children('.sub-menu').toggleClass('hideSubMenu');
});
Thank you for all that helped me with this question!!
I completely re-did my HTML because I realized there were tons of errors.
HTML:
<nav>
<ul id="main-bar">
<li class="dropdown">
Product
<!--sub-menu will hold all contents in dropdown --list items-->
<ul id="product-bar" class="sub-menu">
<li>Clarinet</li>
<li>Saxophone</li>
<li>Flute</li>
<li>Bassoon</li>
<li>Recorder</li>
<li>Brass</li>
<li>Guitar</li>
<li>Piano</li>
<li>Orchestral</li>
<li>Percussion</li>
</ul><!--closes product-bar-->
</li><!--closes product list item that is holding all the products-->
<li>Shop By Brands</li>
<li>How to Order</li>
<li>Quick Order</li>
<li>About Us</li>
</ul><!--closes main-bar-->
</nav>
I re-did my CSS as well:
body {
margin:0;
padding:0;
}
#main-bar {
list-style-type:none;/*removes bullets*/
height:50px;/*sets height of main-bar to same height as li's in #main-bar*/
}
#main-bar > li {
float:left;/*puts list items next to each other*/
border:1px solid black;
padding:15px 80px;
}
#main-bar > li > a {
text-decoration:none;/*removes underline from link*/
}
#product-bar {
position: absolute;
min-width: 1154px
border:1px solid black;
margin-left:-81px;
margin-top:15px;
height:50px;
list-style-type:none;
display:none
}
#product-bar > li {
float:left;
padding:15px 30px;
}
#product-bar > li > a {
text-decoration:none;
}
.show #product-bar {
display:block;
}
And finally, I went with this approach for the JQuery
JQuery:
$('.dropdown').on('click', function() {
var $this = $(this);times
if(!$this.hasClass('show')) {
$this.addClass('show');
} else {
$this.removeClass('show');
}
});
ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
<ul class="number-list">
<li>
<a role="button">1</a>
</li>
<li>
<a role="button">11</a>
</li>
<li>
<a role="button">31</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">16</a>
</li>
<li>
<a role="button">6</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">21</a>
</li>
<li>
<a role="button">2</a>
</li>
<li>
<a role="button">44</a>
</li>
</ul>
I'm new in javascript and I need help and I would be grateful if sombody help !
in this case I have a list of buttons and I want restrict the number of selecting buttons like 6 buttons.and each button can be select just for once and after select color of it get change.help me please to write this code.thank you
var SelectCount=0;
function ButtonSelected(id) {
if (SelectCount < 3) {
document.getElementById(id).style.backgroundColor="red";
SelectCount+=1;
}
}
ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
<ul class="number-list">
<li >
<a id="n1" onclick="ButtonSelected('n1')" role="button">1</a>
</li>
<li>
<a id="n2" onclick="ButtonSelected('n2')" role="button">11</a>
</li>
<li>
<a id="n3" onclick="ButtonSelected('n3')" role="button">31</a>
</li>
<li>
<a id="n4" onclick="ButtonSelected('n4')" role="button">12</a>
</li>
<li>
<a id="n5" onclick="ButtonSelected('n5')" role="button">16</a>
</li>
<li>
<a id="n6" onclick="ButtonSelected('n6')" role="button">6</a>
</li>
<li>
<a id="n7" onclick="ButtonSelected('n7')" role="button">12</a>
</li>
<li>
<a id="n8" onclick="ButtonSelected('n8')" role="button">21</a>
</li>
<li>
<a id="n9" onclick="ButtonSelected('n9')" role="button">2</a>
</li>
<li>
<a id="n10" onclick="ButtonSelected('n10')" role="button">44</a>
</li>
</ul>
This code will change the button to red and increment the counter. In this code, three buttons max can be selected. Buttons cannot be deselected.
var SelectCount = 0;
function ButtonSelected(id) {
if (document.getElementById(id).style.backgroundColor == "red") {
SelectCount -= 1;
document.getElementById(id).style.backgroundColor = "purple";
document.getElementById("checker").innerHTML = SelectCount + " selected (3 max)";
} else {
if (SelectCount < 3) {
document.getElementById(id).style.backgroundColor = "red";
SelectCount += 1;
document.getElementById("checker").innerHTML = SelectCount + " selected (3 max)";
} else {
document.getElementById("checker").innerHTML = "You must unselect another button before selecting this one.<br />Maximum of three buttons selected reached.";
}
}
}
ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
<ul class="number-list">
<li>
<a id="n1" onclick="ButtonSelected('n1')" role="button">1</a>
</li>
<li>
<a id="n2" onclick="ButtonSelected('n2')" role="button">11</a>
</li>
<li>
<a id="n3" onclick="ButtonSelected('n3')" role="button">31</a>
</li>
<li>
<a id="n4" onclick="ButtonSelected('n4')" role="button">12</a>
</li>
<li>
<a id="n5" onclick="ButtonSelected('n5')" role="button">16</a>
</li>
<li>
<a id="n6" onclick="ButtonSelected('n6')" role="button">6</a>
</li>
<li>
<a id="n7" onclick="ButtonSelected('n7')" role="button">12</a>
</li>
<li>
<a id="n8" onclick="ButtonSelected('n8')" role="button">21</a>
</li>
<li>
<a id="n9" onclick="ButtonSelected('n9')" role="button">2</a>
</li>
<li>
<a id="n10" onclick="ButtonSelected('n10')" role="button">44</a>
</li>
</ul>
<div id="checker">
Select up to three buttons.
</div>
This answer allows deselecting a button and provides user feedback as well. As in my other answer, a max of three buttons can be selected at a time.
ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
ul.number-list li a.selected {
background: red;
}
<ul class="number-list">
<li>
<a role="button">1</a>
</li>
<li>
<a role="button">11</a>
</li>
<li>
<a role="button">31</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">16</a>
</li>
<li>
<a role="button">6</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">21</a>
</li>
<li>
<a role="button">2</a>
</li>
<li>
<a role="button">44</a>
</li>
</ul>
<script>
window.addEventListener('load', function () {
document.querySelectorAll("ul.number-list li a").addEventListener('click', function() {
this.className = 'selected';
});
});
</script>
I want to create a side menu and my code look like this :
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
}
#submenus {
background-color: green;
display: none;
}
submenus ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
But I when I show my submenu, he do not apear outside the box...
I want a menu like this :
I need absolutely need the "overflow-y" because I have a lot of menu and I need to have a scrolling option. Did you know how to have this result?
You have <ul id="submenus"> within <div id="menus">, if you don't want the sub menus inside of the menu, make another <div>, and put it in that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
<div>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</div>
</nav>
Then to get them side-by-side, apply float:left; to #menus:
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
float: left;
}
#submenus {
background-color: green;
display: none;
}
submenus, ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}
You can change your CSS and use absolute position on the submenu:
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
#submenus {
position:absolute;
left:100%;
top:0;
background-color: green;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
Bonus -- Quick Multiple SubMenus
$('span').click(function(){
var col = $(this).data('color');
$('.submenus').hide();
$('span').css('background', '');
$(this).css('background', col);
$(this).next('.submenus').show().css('background', col);
})
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
.submenus {
position:absolute;
left:100%;
top:0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span data-color="red">Menu 1</span>
<ul class='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
<span data-color="yellow">Menu 2</span>
<ul class='submenus'>
<li>SubMenu 21
</li>
<li>
SubMenu 22
</li>
<li>
SubMenu 23
</li>
</ul>
</li>
<li>
<span data-color="green">Menu 3</span>
<ul class='submenus'>
<li>SubMenu 31
</li>
<li>
SubMenu 32
</li>
<li>
SubMenu 33
</li>
</ul>
</li>
</ul>
</div>
</nav>
my Fiddle : https://jsfiddle.net/atg5m6ym/6471/
i was trying to create a navigation bar with the active border below each navigation link, when the user hovers on it. but i want that border on the current item that was hovered. i want to remove that border from that other links. i was trying the code, but it seems my logic is not working.
my javascript
$('ul > li > a').mouseenter(function(){
$(this).find('div').addClass('activeItemNav').siblings('div').removeClass('activeItemNav');
});
You can use css :hover, you don't need jQuery for this:
ul li{
text-align:center;
}
a:hover > div{
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
HOME
<div></div>
</a>
</li>
<li>
<a href="#">
ABOUT
<div></div>
</a>
</li>
<li>
<a href="#">
TEAM
<div></div>
</a>
</li>
<li>
<a href="#">
SERVICES
<div></div>
</a>
</li>
<li>
<a href="#">
PORTFOLIO
<div></div>
</a>
</li>
<li>
<a href="#">
CONTACT
<div></div>
</a>
</li>
</ul>
Is this what you look for?
Updated fiddle
ul li:hover div {
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
ul li{
list-style-type: none;
text-align:center;
}
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
HOME
<div></div>
</a>
</li>
<li>
<a href="#">
ABOUT
<div></div>
</a>
</li>
<li>
<a href="#">
TEAM
<div></div>
</a>
</li>
<li>
<a href="#">
SERVICES
<div></div>
</a>
</li>
<li>
<a href="#">
PORTFOLIO
<div></div>
</a>
</li>
<li>
<a href="#">
CONTACT
<div></div>
</a>
</li>
</ul>
You could do this using CSS instead, and set the border as an ::after element. Then you can show this ::after only on hover as such: ul li:hover::after.
An ::after or ::before is a pseudo element in the targeted element.
This way you do not need the unnecessary div.
I have updated your fiddle: https://jsfiddle.net/atg5m6ym/6475/
This Help you :
<!DOCTYPE html>
<html>
<head>
<style>
.activeItemNav {
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
ul li{
text-align:center;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="nav navbar-nav navbar-right">
<li>HOME<div></div></li>
<li>ABOUT<div></div></li>
<li>TEAM<div></div></li>
<li>SERVICES<div></div></li>
<li>PORTFOLIO<div></div></li>
<li>CONTACT<div></div></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul li a ").mouseenter(function(){
$("div",this).addClass("activeItemNav");
}).mouseleave(function(){
$("div",this).removeClass("activeItemNav");
})
})
</script>
</body>
</html>