JavaScript hover without using a mouse - javascript

I'm currently working on a website. I wanted to make it easier to people with disabilities to use. My boss is blind but he uses the program "JAWS" to navigate through things on his computer. What I'm trying to do is when he does on this website, he can press "tab" and the "hover menu" pops open.
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
color: white;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<nav class="menu">
<ul class="nav nav-pills" class="clearfix">
<li class="active"><a>Home</a>
</li>
<li>About<span class="arrow">▼</span>
<ul class="sub-menu">
<li><a align="left" href="#">About the Center</a>
</li>
<li>Membership
</li>
<li>History
</li>
<li>Mission
</li>
<li>Event Calendar
</li>
<li> News
</li>
</ul>
</li>
</ul>
</nav>
And this is what I tried to do.
if (window.addEventListener) {
var keys = "16";
window.addEventListener("keydown", function(e) {
keys.push(e.keyCode);
if (keys.toString() >= 0) {
document.getElementById("about").hover();
};
});
};

Related

how to keep first menu expanded in jquery & expand/collapse icon not working

I have a dropdown where I have to keep 1st menu expanded & expand/collapse icon. The icon is visible only onclick. By default, the icon is not reflected. I have to insert the icon from my local. Expand/Collapse is working.Maybe my approach to writing code is wrong Please help to fix the icon issue. Below is my code. Thanks in advance.
$(document).ready(function () {
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("expand collapse");
});
$('.sub-menu a').click(function(){
if($(this).hasClass('toggIconUp')){
$(this).removeClass('toggIconUp').addClass('toggIconDown');
}else{
$(this).removeClass('toggIconDown').addClass('toggIconUp');
//var blockId = $(this).parent().attr('data-toggle-id');
}
});
});
body {
background-color: #fff;
font-size: 14px;
}
.nav {
position: relative;
margin: 50px;
width: 170px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li a {
display: block;
background: #ffffff;
padding: 10px 15px;
color: #414141;
text-decoration: none;
}
.sub-menu ul li a:hover {
background: #dedede;
}
.nav ul li a .icon_sty {
text-align: center;
float:right;
}
.nav ul ul {
background-color:#eeeeee;
}
.toggIconDown {
background-image: url(./images/down_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
.toggIconUp {
background-image: url(./images/up_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class='sub-menu toggIconUp'>Panel<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>one </a></li>
<li><a href='#'>two </a></li>
<li><a href='#'>three </a></li>
<li><a href='#'>four </a></li>
<li><a href='#'>five </a></li>
</ul>
</li>
<li class='sub-menu toggIconUp'>second<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>second_one </a></li>
<li><a href='#'>second-two </a></li>
</ul>
</li>
</ul>
</div>

Submenu levels do not work properly Vanilla JS

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!')
}

Navbar works from my computer but not on the internet

I have 2 versions of a website i made one in english one in french. The navbar for the english version works perfectly on my computer and live on the internet so When i test the french website version on my computer the navbar works exactly as it should yet when live on the internet it's stuck at the top of the page, where as its suppose to be about 5 cms under the top. Here is the html and css code:
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown">
<li>Hébergement Web</li>
<li class="dropdown">
Forfaits
<ul class="dropdown-menu">
<li>Hébergement Partagé</li>
<li>Hébergement WordPress</li>
<li>Hébergement Cloud VPS</li>
</ul>
</li>
<li>Noms de domaines</li>
<li>Emails</li>
<li>E-commerce</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<a href="à propos de.html" class="dropdown-toggle" data-
toggle="dropdown">à propos de</a>
<li>Services</li>
<li>UTD Webhosting</li>
<li>Nos Datacenters</li>
</li>
<ul class="dropdown-menu">
<li>Coming Soon</li>
<li>404</li>
</ul>
</li>
</ul>
<li>Contact</li>
</ul>
<!-- Header Nav Links End -->
</div>
</div>
</nav>
<!-- Header Navbar End -->
</header>
CSS:
.header--navbar > .container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links > li {
float: none;
}
.header--nav-links > li > a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links > .dropdown > .dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links > .dropdown > .dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links > .dropdown > .dropdown-menu .dropdown-menu > li > a {
padding-left: 40px;
padding-right: 40px;
}
Quite a few of your tags (ul, li, also div) aren't closed properly in the code you posted. Browsers will try to interpret this in some way, but not necessarily the way you intended it, so this might be a cause for your problem.
I fixed those unclosed tags in the snippet below. It's hard to check your CSS, since most of the CSS rules you posted don't apply at all in the snippet, since they use the class .header--nav-links and similar in their selectors which isn't included in your HTML code.
Nevertheless, maybe the edited HTML code already fixes the display problem you are mentioning.
.header--navbar>.container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links>li {
float: none;
}
.header--nav-links>li>a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links>.dropdown>.dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links>.dropdown>.dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links>.dropdown>.dropdown-menu .dropdown-menu>li>a {
padding-left: 40px;
padding-right: 40px;
}
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown">Hébergement Web</li>
<li class="dropdown">
Forfaits
<ul class="dropdown-menu">
<li>Hébergement Partagé</li>
<li>Hébergement WordPress</li>
<li>Hébergement Cloud VPS</li>
</ul>
</li>
<li>Noms de domaines</li>
<li>Emails</li>
<li>E-commerce</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
à propos de
<li>Services</li>
<li>UTD Webhosting</li>
<li>Nos Datacenters</li>
</ul>
<ul class="dropdown-menu">
<li>Coming Soon</li>
<li>404</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- Header Nav Links End -->
</div>
<!-- Header Navbar End -->

Navigation menu drop down tabs in jquery

I have a requirement create navigation menu tabs, each tab has child tab like drop-down menu. Whenever I click on the each tab corresponding content should display (same for sub tab also). I am facing css issue how to display correctly the sub tabs related to menu and also need to display sub tab related content when i click on it.can anyone help me on this?
$(document).ready(function(){
$('ul#myNavUl li').on("click", (function(e) {
// Add selected class to clicked tab
$(this).addClass('selected').siblings().removeClass('selected');
// Determine selected li index in respect to parent ul
var tabIndex = $(this).index();
// Find article respective to selected tab
var article = $(this).closest('.content').find('.articles').children().eq(tabIndex);
// Add selected class to respective article
article.addClass('selected').siblings().removeClass('selected');
var parentH = $('ul#myNavUl li ul').parent().height();
$('ul#myNavUl li ul').css('top', parentH);
$('ul#myNavUl li ').hover(function(){
$('ul', this).show();
}, function(){
$('ul', this).hide();
});
}));
});
body {
background-color: #333;
font-family: "Open Sans Condensed";
margin: 0;
}
.content {
width: 100%;
margin: 0 auto;
padding: 12px;
}
.article {
display: none;
margin: 100px auto 0;
width: 1024px;
padding: 8px 12px;
border-radius: 5px;
background-color: #f9f9f9;
}
.article.selected {
display: block;
}
.article h2, .article p {
color: #2a2a2a;
}
ul#myNavUl {
list-style: none;
text-align: center;
color: #fff;
}
ul#myNavUl li {
position: relative;
width: 15%;
margin: 0 4px;
padding: 15px;
float: left;
background-color: #0077bb;
}
ul#myNavUl li:hover {
background-color: #00aaee;
}
ul#myNavUl li.selected {
background-color: #00aaee;
}
ul#myNavUl li.selected::after {
position: absolute;
display: block;
width: 0;
bottom: -15px;
left: calc(50% - 15px);
content: "";
border-width: 15px 15px 0;
border-style: solid;
border-color: #00aaee transparent;
}
ul#myNavUl li a{
text-decoration: none;
color: white;
}
ul#myNavUl li ul{
position:absolute;
left:0;
display:none;
}
<div class="content">
<div class="tabs">
<ul id="myNavUl">
<li class="selected">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4
<ul><!-- added drop-down items -->
<li><a href="#son-of-tab3" >drop-down 1</a></li>
<li><a href="#son-of-tab3" >drop-down 2</a></li>
<li><a href="#son-of-tab3" >drop-down 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="articles">
<div class="article selected">
<h2>Article 1</h2>
</div>
<div class="article">
<h2>Article 2</h2>
</div>
<div class="article">
<h2>Article 3</h2>
</div>
<div class="article">
<h2>Article 4</h2>
</div>
<div class="article">
<h2>Article 5</h2>
</div>
</div>
</div>
I build for you a container with tabs and screens,
let me know if that what you looking for.
html:
<div id="tp--nav-bar">
<ul id="nav-bar--list">
<li class="controler">
<a>home</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>about</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>gallery</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>contact</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
</ul>
</div>
scss:
#mixin transition($ease, $s) {
-webkit-transition: $ease $s;
-moz-transition: $ease $s;
-ms-transition: $ease $s;
-o-transition: $ease $s;
transition: $ease $s;
}
#mixin translate($x, $y) {
-webkit-transform: translate($x,$y);
-moz-transform: translate($x,$y);
-ms-transform: translate($x,$y);
-o-transform: translate($x,$y);
transform: translate($x,$y);
}
#nav-bar--list {
font-family: 'Raleway', sans-serif;
> li {
cursor: pointer;
position: relative;
display: inline-block;
float: left;
width: 25%;
height: 50px;
line-height: 50px;
text-align: center;
background: #00aaee;
color: #fff;
overflow: hidden;
a {
display: block;
width: 100%;
height: 100%;
}
}
> li.active {
background: #007eb1;
overflow: visible;
}
> li:hover {
background: #007eb1;
}
}
.screen {
position: absolute;
top: 100%;
left: 0;
width: 100%;
line-height: 40px;
text-align: center;
background: #00aaee;
color: #fff;
z-index: -1;
opacity: 0;
#include translate(0px, 50px);
#include transition(cubic-bezier(0.4, 0.1, 0, 1.6), 0.45s);
li:hover {
background: #007eb1;
a {
color: #fff;
text-decortion: none;
}
}
}
.screen.active {
z-index: 1;
opacity: 1;
#include translate(0px, 0px);
}
jQuery:
$(document).ready(function() {
tabPanel('#tp--nav-bar')
});
function tabPanel(element) {
var container = $(element),
controlers = container.find('.controler'),
screens = container.find('.screen'),
map = {};
for (i = 0; i < controlers.length; i++) {
var control = controlers[i],
screen = screens[i],
controler = 'controler-' + i,
screener = 'screener-' + i;
$(control).attr('id', controler);
$(screen).attr('id', screener);
map[controler] = screener;
};
controlers.click(function() {
var controlerId = $(this).attr('id'),
controlerClass = $(this).attr('class'),
controlerClass = controlerClass.indexOf('active');
if (controlerClass == -1) {
controlers.removeClass('active');
screens.removeClass('active');
$('#' + map[controlerId]).addClass('active');
$('#' + controlerId).addClass('active');
}
});
}
My Fiddle
I checked your code and looked in the console of the browser; it has one jQuery error like $ is not defined. I think you forget to add jQuery library; that's the way this error occurs. Add jQuery file or you can use jQuery cdn also like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Add this line add before the </body> tag and then check if it works.

Highlighting an element in the menu by manipulating the opacity

html:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a </button>
</li>
<li id="item3">b </li>
<li id="item4">c </li>
<li id="item5">d </li>
<li id="item6">e </li>
<li id="item7">f </li>
</ul>
</div>
CSS:
lu, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style: none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size: 1.5em;
color: #000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li {
/* PARENT HOVER */
opacity: 0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color: #000000;
cursor: pointer;
}
In the current code when the user hover over an element, the other elements in the menu will reduce in opacity. How can i as well do the same procedure after clicking an element.. By clicking an element it'll keep its opacity however the unclicked elements will reduce in opacity, thus highlighting the selected element.
You will need javascript for this*. For example:
var $li = $('.headlines li').click(function() {
var state = !$(this).hasClass('active');
$(this).parent().toggleClass('active', state);
$li.removeClass('active');
$(this).toggleClass('active', state);
});
ul, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width:150px;
height: 350px;
}
.menu li {
position: relative;
right: 0;
margin: auto;
border-style:none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li,
.headlines.active li {
opacity:0.4;
cursor: pointer;
}
.headlines li:hover,
.headlines li.active {
opacity: 1;
color:#000000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a</button>
</li>
<li id="item3">b</li>
<li id="item4">c</li>
<li id="item5">d</li>
</ul>
</div>
* technically it's possible to do it with pure CSS, but the HTML structure will become complex and not that semantic.

Categories

Resources