I'm currently trying to learn jQuery and JavaScript, and for my navigation I'm trying to make it look underlined on mouseover which, although it might not be the cleaned of code, I have managed to do it using a addClass and removeClass.
I am now trying to make the underline class fade in and fade out, which I believe is something normally done with CSS3 but due to just trying to learn jquery, I've been trying to figure it out.
I've tried putting .fadeIn() and .fadeOut() in different places in the code, but nothing seems to work, so I'm assuming this is not the correct way to do it.
Here's my code
HTML
<div class="navleft">
<ul>
<li class="active">Home</li>
<li class="active1">Dealerships</li>
<li class="active1">Contact</li>
</ul>
</div>
CSS
.navleft ul li.active1 {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
.navleft ul li.active {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
Javascript
$(function(){
$('.navleft ul li').removeClass('active1');
$('.navleft ul li').mouseover(function(){
$(this).addClass('active1');
});
$('.navleft ul li').mouseout(function(){
$(this).removeClass('active1');
})
});
If anyone could help, that would be great, as I'm really stuck on this one.
Classes can't fade in or out. fadeIn and fadeOut are for the opacity of elements. If you actually want to ›fade‹ a style you have to either write your own animation code (which I wouldn't recommend) or use CSS3 transitions, which I would recommend anyways.
Here's a CSS way to smoothly transition from one border to another on hovering: http://jsfiddle.net/u4h7k/2/.
HTML:
<ul id = "nav">
<li>Home</li>
<li>Dealerships</li>
<li>Contact</li>
</ul>
CSS:
#nav > li {
position: relative;
cursor: pointer;
}
#nav > li:before, #nav > li:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid blue;
opacity: 0;
-webkit-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
#nav > li:after {
border-bottom: 1px solid red;
opacity: 1;
}
#nav > li:hover:after {
opacity: 0;
}
#nav > li:hover:before {
opacity: 1;
}
Related
I am in a situation where I want to animate mobile navigation. User clicks on a burger and the nav slides down, by clicking on any link or the burger itself nav slides back up.
Till this day I solved this by making 2 divs where first has
display: block; with animation to slide down and the another has display: none; with animation to slide up. After clicking on burger these two options would switch and that will do the thing.
It works just fine, however, I think it can be done with less code.
Something like this?
This uses the css transition property to animate the sliding.
document.getElementById("toggle").addEventListener("click", e => {
document.getElementById("menu").classList.toggle("menu-hidden");
});
body {
margin: 0;
}
.menu {
height: 300px;
width: 100%;
background-color: lightgreen;
transition: all 0.5s;
overflow: hidden;
}
.menu-hidden {
height: 0;
}
<button id="toggle">Toggle menu</button>
<div class="menu" id="menu">Menu content</div>
Please try this. Make click () event to assign ON & OFF value to button.
function onoff(){
currentvalue = $('#onoff').val();
if(currentvalue == "Off"){
$('#onoff').val("On");
}else{
$('#onoff').val("Off")
}
}
</script>
<input type="button" value="On" id="onoff" onclick="onoff();"> ```
Here is another method. This simply makes it so the menu is positioned out of the screen using transform translate, transitions and z-index, and on hamburger click it toggles the menu to slide down to its original position. I have also added functionality so that menu items, on click, will also toggle the menu slide.
document.getElementById("hamburger").addEventListener("click", e => {
document.getElementById("menu").classList.toggle("slide");
});
Array.from(document.getElementsByClassName("menu-item")).forEach((item) => {
item.addEventListener("click", function() {
document.getElementById("menu").classList.toggle("slide");
});
}
);
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
position: relative;
background: #fff;
z-index: 2;
}
#menu {
background: lightblue;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
transform: translateY(-100%);
transition: 0.3s ease-in-out;
}
#menu li {
list-style: none;
padding: 0.5rem 1rem;
cursor: pointer;
}
.slide {
transform: translateY(0) !important;
transition: 0.3s ease-in-out;
}
<nav>
<button id="hamburger">Toggle</button>
</nav>
<ul id="menu">
<li class="menu-item">Link 1</li>
<li class="menu-item">Link 2</li>
<li class="menu-item">Link 3</li>
</ul>
I am trying to make a div display when hovering over an a tag. I also want the div to not disappear when the mouse moves onto the displayed div. Although I want the div to disappear when you aren't hovering on the a tag text or the div itself.
This is being specifically used for a navigation bar that can display content on one of the tabs when hovering over it.
I have tried using the .div-name + .div-name2 {} method, but since I have content between these two divs, this solution does not work.
If there is a better way of doing this e.g. through some sort of bootstrap mechanic, that would be great to know as well as I am sure I am over-complicating this using javascript and jquery. Otherwise helping me with the javascript/jquery would be greatly appreciated.
$(".hover-btn").mouseenter(function() {
$(".hover-btn-section").stop().fadeIn(500);
});
$(".hover-btn").mouseleave(function() {
$(".hover-btn-section").stop().delay(500).fadeOut(500);
});
$(".hover-btn-section").mouseenter(function() {
$(".hover-btn-section").stop();
});
.hover-btn {
border: 1px solid red;
}
.hover-btn-section {
display: none;
width: 100%;
border: 1px solid green;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class='hover-btn'>hover-btn</a>
<a href="#" class='link2'>link2</a>
<div class="hover-btn-section">
<p>Testing Area</p>
</div>
What you describe can be achieved using CSS only. Instead of the adjacent sibling selector + use the sibling selector ~:
.hover-btn {
border: 1px solid red;
}
.hover-btn:hover ~ .hover-btn-section {
opacity: 1;
pointer-events: all;
}
.hover-btn-section {
opacity: 0;
width: 100%;
border: 1px solid green;
background-color: yellow;
pointer-events: none;
transition: opacity .3s ease-in-out;
}
.hover-btn-section:hover {
opacity: 1;
pointer-events: all;
}
hover-btn
link2
<div class="hover-btn-section">
<p>Testing Area</p>
</div>
I want to implement the following tiny drop down menu into my project.
Is there anything inherently wrong with my code? I attempted the :hover pseudo via CSS but was unsuccessful. Is there a better way to JS this thing?
document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
document.querySelector('.dropdown-content').style.visibility = 'visible'
})
document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
document.querySelector('.dropdown-content').style.visibility = 'hidden'
})
.dropdown {
display: flex;
align-items: flex-start;
}
.dropbtn {
background-color: darkslategray;
color: white;
padding: 6px 10px 6px;
font-size: 18px;
border: none;
cursor: pointer;
}
.dropdown-content {
background-color: darkslategray;
display: inline-grid;
visibility: hidden;
padding: 6px 10px 6px;
}
img {
margin: 3px;
height: 40px;
width: 120px;
border: 1px solid gray;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt="">
<img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt="">
<img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt="">
</div>
</div>
Codepen: https://codepen.io/HelleFl/pen/KyWYYX
Although there are several posts describing how to create a dropdown menu using just HTML and CSS, I'll try to answer your question.
tl;dr: Use CSS over JS for better performance
CSS or JS? Which one is better?
Basically whenever possible, use CSS over JS. There is a great SO answer about this here.
Going further, CSS animations should be preferred over JS animations unless the animation should have some advanced effects. There is a good google developers blog post on this as well.
How to create a dropdown menu
You can find the answer here. Basically you need to set the :hover onto the parent element, that holds both the link and submenu.
li img {
width: 120px;
height: auto;
}
ul > li {
display: inline;
position: relative;
min-width: 150px;
}
/* hide submenus by setting the max-height to 0 */
ul > li > ul {
max-height: 0;
overflow: hidden;
transition: max-height .75s ease;
}
/* set max-height to an approximate height it could have */
ul > li:hover > ul {
max-height: 300px;
}
ul.submenu {
background: #eee;
position: absolute;
left: 0;
top: 1em;
}
ul.submenu > li {
display: block;
}
<nav>
<ul>
<li>Hyperlink 1</li>
<li>
Hyperlink 2
<ul class="submenu">
<li><img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt=""></li>
<li><img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""></li>
<li><img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt=""></li>
</ul>
</li>
</ul>
</nav>
I guess you was facing the same issue that I was facing when I checked your codepen, since the .dropbtn are in the same level as .dropdown-content, the selector .dropbtn:hover .dropdown-content wont work since its searching for a child inside .dropbtn, so you have to use the sibling selector:
.dropbtn:hover ~ .dropdown-content{
visibility: visible
}
(CSS animation its better than Javascript)
Also, a good practice in Javascript is to save the DOM element into an variable if you will use it multiple times, so you dont have to search for the DOM element again:
var dropBtnDOM = document.querySelector('.dropbtn');
var dropdownContentDom = document.querySelector('.dropdown-content');
dropBtnDOM.addEventListener('mouseenter', function(){
dropdownContentDom.style.visibility = 'visible'
})
dropBtnDOM.addEventListener('mouseleave', function(){
dropdownContentDom.style.visibility = 'hidden'
})
.dropdown:hover .dropbtn ~ .dropdown-content{
visibility: visible
}
I'm trying to have my header change opacity when you scroll down say aproximatly 500px down. I'm making a single page with a header infront of a bxslider so when I scroll down the opacity should increase for the header because the text still needs to be readable.
http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/
I'd like something like this but I find it very hard to edit
I already tried to look for answers here but only thing close to this is: Header changes as you scroll down (jQuery) or Fade opacity when scrolling but the one doesn't work for me and the other is to hard to understand and change
<header class="main-header">
<img src="images/logo.png"/>
<nav>
<a id="active" href="#Platenbeurs">Platenbeurs</a>
Voorstelling
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
EDIT
Here is the css code to see that the header is actualy not opacity 1.
.main-header{ position: fixed; max-width: 1024px; width: 100%; height: 100px; padding: 1%; text-align: right; background: rgba(255,255,255,0.2); border-top: 5px solid black; border-bottom: 5px solid black; }
.main-header nav a{ color: white; text-decoration: none; opacity: 1; }
If fixed it myself...
HTML
<header class="main-header clearfix">
<img src="images/logo.svg"/>
<nav>
Platenbeurs
Voorstelling
Artiesten
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
CSS
.main-header{
position: fixed;
width: 100%;
z-index: 101;
padding: 15px;
text-align: right;
background-color: rgba(0,0,0,0.2);
border-top: 5px solid black;
}
.main-header nav a{
color: white;
text-decoration: none;
opacity: 1;
}
Javascript
$(window).scroll(function(event){
if($(document).scrollTop() > 300){
if(header.data('opacity') == 'start'){
header.data('opacity','scrolled');
header.css("background", "rgba(0,0,0,1)");
}
}else{
if(header.data('opacity') == 'scrolled'){
header.data('opacity','start');
header.css("background", "rgba(0,0,0,0.2)");
}
}
});
The opacity off the header is already 1. You can't increase the opacity, instead you can set the background color for header on scroll. Please refer the following snippet: http://jsfiddle.net/uy25hw21/
I have many unordered lists of 5 li in each like
<ul class="Rank">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I want to change background-color of current li:hover element and all previous li elements in that list. Suppose, if I hover over 3rd li then 3rd, 2nd and 1st li should have background-color:#00f;
I can do it in jQuery or JavaScript, but I want it in pure CSS. Currently following this article: http://css-tricks.com/useful-nth-child-recipies/
I can change background of currently hovered li element with this .Rank li:hover but cannot understand how can I change background-color of the previous elements of that current .Rank list.
From above article I also learnt to change background until nth-chid but cannot figure out how to apply :hover on it.
.Rank li:nth-child(-n+5)
{
background-color:#00f;
}
http://jsfiddle.net/coma/PLBYG/2/
or
http://jsfiddle.net/coma/PLBYG/3/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
}
ul.rank > li {
position: relative;
margin: 0;
height: 30px;
background: #ccc;
transition: background-color 350ms;
}
ul.rank:hover > li {
background-color: #00f;
}
ul.rank > li + li {
margin-top: 10px;
}
ul.rank > li:hover ~ li {
background: #ccc;
}
ul.rank > li + li:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
or!!!
http://jsfiddle.net/coma/PLBYG/4/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
Posting my answer for reference (to those who come viewing this later like I did).
Here is a solution that doesn't use :before or :after.
http://jsfiddle.net/nLCZK/
It uses float: right for all the lis, and you also have to put the lis in opposite order you want them to appear.