I have a hover effect on all my list items and active hover effect on my top list item "testimonials". I would like the active hover effect on "testimonials" to de-activate when hovering over the other list items. this way only one hover effect will be active at one time but the default "testimonials" link will always be active if no other hover is in effect.
I understand this may require some jquery? Any and all help would be greatly appreciated.
here is my code, HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<ul>
<li>
<a class="testimonials" href="#">
<h1>testimonials</h1>
<h2>We love our</h2>
<div class="selector"><img scr="img/logo.png"></img></div>
</a>
</li>
<li>
<a class="instructions" href="#">
<h1>instructions</h1>
<h2>For your information</h2>
</a>
</li>
<li>
<a class="Benefits" href="#">
<h1>benefits</h1>
<h2>A choice</h2>
</a>
</li>
<li>
<a class="Top-Recipe" href="#">
<h1>top</h1>
<h2>Recommendation</h2>
</a>
</li>
<li>
<a class="Affiliations" href="#">
<h1>affiliations</h1>
<h2>Valued Retailers</h2>
</a>
</li>
</ul>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
}
.wrapper
{
position: fixed;
width: 50%;
height: 100vh;
padding-left: 40px;
padding-right: 40px;
background: #fff;
}
.wrapper ul
{
position: absolute;
top: 20%;
left: 23%;
right: 10%;
}
.wrapper ul li
{
list-style: none;
margin-top: 10%;
}
.wrapper ul li a
{
text-decoration: none;
color: #011933;
}
.wrapper ul li a:hover
{
text-decoration: none;
}
.wrapper ul li a h1
{
font-size: 28px;
}
.wrapper ul li a h1:hover
{
font-size: 28px;
color: #8a6b0c;
}
.wrapper .testimonials
{
color: #8a6b0c;
}
.wrapper ul li a h2
{
font-size: 14px;
margin-left: 20px;
opacity: .6;
}
.wrapper ul li a h1, h2
{
width: 50%;
height: 60px;
padding: 0;
display: inline;
}
Instead of setting the color on the .testimonials class, you could change this to be an 'active' class and have it work on the element and childs (in this case the text). Then use jQuery/JavaScript to control the toggling of the active class.
So I've done this to the CSS:
.wrapper .active *
{
color: #8a6b0c;
}
Instead of:
.wrapper .testimonials
{
color: #8a6b0c;
}
And then controlling the toggling with jQuery like so:
$( "li" ).hover(
function() {
if ($('.testimonials')[0].classList.contains('active')) {
$('.testimonials').toggleClass('active');
}
$( this ).toggleClass('active');
},
function() {
$( this ).toggleClass('active');
if (!$('.testimonials')[0].classList.contains('active')) {
$('.testimonials').addClass('active');
}
}
);
And I also added the active class into the HTML on the testimonials element:
<a class="testimonials active" href="#">
Working fiddle: http://jsfiddle.net/f9pqsd8v/10/
Related
I changed styles on anchor tags and icons I want to add a transition to them and I don't know how.
const listItems = document.querySelectorAll("nav ul li");
const icons = document.querySelectorAll("nav ul li i");
const visitButtons = document.querySelectorAll("nav ul li a.visit--link");
listItems.forEach((item, id) => {
item.addEventListener("mouseover", function() {
icons[id].style.display = "none";
visitButtons[id].style.transform = "translateX(0%)";
visitButtons[id].style.display = "inline-block";
});
item.addEventListener("mouseout", function() {
icons[id].style.display = "inline-block";
visitButtons[id].style.transform = "translateX(100%)";
visitButtons[id].style.display = "none";
});
});
nav {
width: 30%;
border: 1px solid #333;
border-radius: 5px;
display: flex;
flex-direction: column;
}
h2 {
font-size: 36px;
text-align: center;
border-bottom: 1px solid #333;
justify-content: center;
margin: 0;
padding: 15px 30px;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
transition: 2s;
}
nav ul li i {
margin: 0px 5px;
}
nav ul li a {
text-decoration: none;
margin: 0;
color: #000;
}
nav ul li i,
nav ul li a {
font-size: 36px;
padding: 15px;
}
nav ul li a.visit--link {
background-color: #80d6ff;
color: #fff;
transform: translateX(100%);
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sliding Sidebar</title>
<script src="https://kit.fontawesome.com/02de928ecb.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<h2>MOST POPULAR CASINOS</h2>
<ul>
<li>
<div>
<a href="#"><i class="fa-brands fa-fantasy-flight-games"></i>MUCHO VEGAS</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"><i class="fa-brands fa-fantasy-flight-games"></i>LOKI</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"><i class="fa-brands fa-fantasy-flight-games"></i>GOLDEN STAR</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"><i class="fa-brands fa-fantasy-flight-games"></i>BITSTARY</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"><i class="fa-brands fa-fantasy-flight-games"></i>GUNSBET</a
>
</div>
VISIT
</li>
</ul>
</nav>
</body>
</html>
I am adding a Visit link at mouseover on list items and hide the icons. On mouseout I'm hiding the link and showing the icons. I thought that just adding transition 1s to anchor tags would add the transition to all styling changes on anchor tags.
Avoid using display: none when you want to transition the element because it will ignore all transitions and animations, instead you can use opacity: 0 and width: 0 or move it outside screen view using transform property:
const listItems = document.querySelectorAll("nav ul li");
const icons = document.querySelectorAll("nav ul li i");
const visitButtons = document.querySelectorAll("nav ul li a.visit--link");
listItems.forEach((item, id) => {
item.addEventListener("mouseover", function () {
icons[id].style.transform = "translateX(-100px)"; // to move it outside screen
icons[id].style.width = 0; // remove width for the text next to it to move in place of it
visitButtons[id].style.transform = "translateX(0%)";
visitButtons[id].style.opacity = 1; // fade in
});
item.addEventListener("mouseout", function () {
icons[id].style.transform = "translate(0)"; // return it to it's initial position
icons[id].style.width = "auto"; // add width back to icon
visitButtons[id].style.transform = "translateX(100%)";
visitButtons[id].style.opacity = 0; // unfade, hide
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sliding Sidebar</title>
<script
src="https://kit.fontawesome.com/02de928ecb.js"
crossorigin="anonymous"
></script>
<style>
nav {
width: 40%;
border: 1px solid #333;
border-radius: 5px;
display: flex;
flex-direction: column;
overflow: hidden; /* this is needed for the visit text to not show up outside the nav when entering the screen */
}
h2 {
font-size: 36px;
text-align: center;
border-bottom: 1px solid #333;
justify-content: center;
margin: 0;
padding: 15px 30px;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 1s;
}
nav ul li i {
margin: 0px 5px;
transition: all 1s;
}
nav ul li a {
text-decoration: none;
margin: 0;
color: #000;
}
nav ul li i,
nav ul li a {
font-size: 36px;
padding: 15px;
}
nav ul li a.visit--link {
background-color: #80d6ff;
color: #fff;
transform: translateX(100%);
opacity: 0;
transition: all 1s;
}
</style>
</head>
<body>
<nav>
<h2>MOST POPULAR CASINOS</h2>
<ul>
<li>
<div>
<a href="#"
><i class="fa-brands fa-fantasy-flight-games"></i>MUCHO VEGAS</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"
><i class="fa-brands fa-fantasy-flight-games"></i>LOKI</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"
><i class="fa-brands fa-fantasy-flight-games"></i>GOLDEN STAR</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"
><i class="fa-brands fa-fantasy-flight-games"></i>BITSTARY</a
>
</div>
VISIT
</li>
<li>
<div>
<a href="#"
><i class="fa-brands fa-fantasy-flight-games"></i>GUNSBET</a
>
</div>
VISIT
</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}
The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}
I have 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/
Basically the problem I am having is that I have some CSS that is affecting both my nav bar and slider, because they are both using and essentially the nav bar is working but the slider is being affected.
I am still pretty new to coding so I didn't know what specifically to search online to fix this problem, any help is greatly appreciated.
HTML being affected.
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
<li>
<img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
</ul>
</div>
NAV BAR
<!--section1-->
<section id="top" class="Back to top">
<img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png">
<div class="top-bar-container">
<div class="top-bar">
</div>
<nav class="nav-bar">
<ul>
<li>About</li>
<li><a href="#photos" >Gallery</a></li>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="header-container">
<div class="header">
</h3>
<h4>
NAV BAR CSS:
.top-bar-container .top-bar {
width: 800px;
}
.top-bar-container .top-bar .logo {
float: left;
}
.top-bar-container .top-bar .logo span {
color: #27AD60;
}
.top-bar-container .nav-bar {
float: right;
}
.top-bar-container .nav-bar ul li {
list-style-type: none;
display: inline-block;
padding: 21px 27px;
font-size:15px;
}
.top-bar-container .nav-bar ul li a:not(.active) {
text-decoration: none;
color: white;
}
.top-bar-container .nav-bar .active {
color: white;
text-decoration: none;
padding-top:34px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 16px;
color: grey;
text-decoration: none;
position: relative;
}
ul li a:hover, ul li a.selected{
color:white;
}
ul li a.selected:before, ul li a:hover:before {
content: '';
width: 100%;
position: absolute;
top: -19px;
left: 0;
height: 3px;
background: white;
}
h3{
font-size: 121.5%;
line-height: 2.;
font-family: 'PT Sans', sans-serif;
text-align: center;
}
Your issue is that the CSS selectors are not descriptive enough. ul and li will target both HTML sections.
You can change them to classes or ids so that the selectors are more descriptive.
I would recommend reading up on CSS selectors as it will make HTML and CSS a lot easier.
In below code the Purchase, sale, and new menus have some multilevel menus which need to open onClick using jQuery also when click on another menu the first one multilevel menu should be close and then this menu should be open with some transition effects.
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('li').on('click', function(e) {
$(this).next('li li').toggleClass('showingg');
});
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
}
#handle {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
-moz-transition: linear 0.4s;
}
li {
float: left;
}
li a {
text-decoration: none;
display: block;
padding: 15px;
background: #0C9;
color: #FFF;
border-bottom: 1px solid #ccc;
}
li a:hover {
background: #333;
}
li ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
#media screen and (max-width: 480px) {
#handle {
display: block;
background: #066;
color: #fff;
padding: 10px;
text-align: center;
box-sizing: border-box;
font-size: xx-large;
cursor: pointer;
}
li {
width: 100%;
text-align: center;
font-size: x-large;
}
ul {
max-height: 0;
overflow: hidden;
}
li a:hover {
background: #0C9;
}
.showing {
max-height: 200em;
}
li:hover > ul {
position: relative;
}
/*li li {
display:none;
}*/
li li:hover > ul {
left: 0;
position: relative;
}
li li a {
background: #CCC;
}
.showingg {
display: block;
;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available stock
</li>
<li>
Purchase +
<ul>
<li>
Purchase Return +
<ul>
<li>Return1
</li>
</ul>
</li>
</ul>
</li>
<li>
Sale +
<ul>
<li>
Sale Return +
<ul>
<li>Return2
</li>
</ul>
</li>
</ul>
</li>
<li>Cash Recieve
</li>
<li>Cash Payment
</li>
<li>
New +
<ul>
<li>New Product
</li>
<li>New Supplier
</li>
<li>New Town
</li>
<li>New Customer
</li>
</ul>
</li>
<li>Opening Stock
</li>
<li>Gate Pass
</li>
<li>Sale History
</li>
</ul>
</nav>
</div>
</body>
</html>