We Keep Coding

CSS: Dropdown menu expands when hover below actual target

My best attempt to remedy this toggles the visibility on and off when hovering. However, this isn't ideal because the menu is supposed to transition into view. If the visibility is toggled, the transition isn't seen by the user when approaching the "hover element" from below.
My testing makes me think the issue is purely CSS related but I've gone ahead and included the javascript if it helps. The visibility toggle I mentioned above is commented out.
let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');
menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);
//visibilityToggle('hidden', 'none');
function func() {
console.log('out');
//visibilityToggle('visible', 'visible');
}
function func2() {
//visibilityToggle('hidden', 'none');
console.log('in');
}
function visibilityToggle(vis, point) {
for (let i = 0; i < items.length; i++){
items[i].style.visibility = vis;
items[i].style.pointerEvents = point;
}
}
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
position: relative;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
.trigger:hover .items {
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
}
#menuBtn {
border: 5px solid black;
}
<p>I am lost</p>
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items">
One
Two
Three
Four
</div>
</div>
</div>

I guess that issue can solve without js. Just change hover event to a #menuBtn and .items and insert reset pointer-events: initial . And should changing link class from items to item, because you applying styles to the group of links and the links itself.
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.menu a.active {
background-color: #04aa6d;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
position: relative;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
#menuBtn:hover + .items, /* Add event to #menuBtn */
.items:hover { /* Keep hover effect on the .items */
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
pointer-events: initial; /* Reset pointer-events */
}
#menuBtn {
border: 5px solid black;
}
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items">
One
<!-- Changed items to item -->
Two
<!-- Changed items to item -->
Three
<!-- Changed items to item -->
Four
<!-- Changed items to item -->
</div>
</div>
</div>

Issue was ur items was position:relative so it actually is in same position as they are visible,So need to make them relatable only when hover otherwise make it position:absolute
.item-div{
position: absolute;
}
.trigger:hover .items {
position:relative;
}
let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');
menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);
//visibilityToggle('hidden', 'none');
function func() {
console.log('out');
//visibilityToggle('visible', 'visible');
}
function func2() {
//visibilityToggle('hidden', 'none');
console.log('in');
}
function visibilityToggle(vis, point) {
for (let i = 0; i < items.length; i++){
items[i].style.visibility = vis;
items[i].style.pointerEvents = point;
}
}
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
position:relative;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.item-div{
position: absolute;
width: 100%
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
.trigger:hover .items {
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
position:relative;
}
#menuBtn {
border: 5px solid black;
}
p:first-child {
text-decoration: line-through;
}
<p>I am lost</p>
<p>Your are Alive</p>
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items item-div">
One
Two
Three
Four
</div>
</div>
</div>

CSS Navbar Transition is Smooth on Scroll Down but no Transition at all on Scroll Back Up

I am currently working on a website with a navigation bar at the top of the screen that is initially transparent when you first visit the site, but turns into a white bar with black text the moment you start scrolling down. It also shrinks a little. It has a really nice and smooth transition as it changes it's color and shrinks, but when you scroll back to the top of the page, there is no more smooth transition but rather an instant ugly transition. Actually the changing of the color back to transparent seems okay but the resize of the bar lacks the transition. I uploaded a GIF so you can see exactly what's the problem.
There is a second problem I would like to ask for. As you can see in the GIF, there is an underline animation on text hover, however, I cannot get it to work on the white navbar. I want that underline to become black, just like the text and shrink with the rest of the navbar.
Here is the GIF:
https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif
Also the CSS:
/* -=-=-=-=-= FONT IMPLEMENTATION =-=-=-=-=- */
#import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');
/* -=-=-=-= END FONT IMPLEMENTATION =-=-=-=- */
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Roboto",sans-serif;
font-weight: lighter;
}
header.index {
width: 100%;
height: 100vh;
background: url(../res/images/back.png) no-repeat 50% 50%;
background-size: cover;
}
header.page1 {
width: 100%;
height: 100vh;
background: url(../res/images/test.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
}
.logoimg {
position: fixed;
display: inline-block;
float: left;
width: 235px;
height:54px;
margin: 37px 80px;
transition: 0.5s ease-in-out;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: 0.5s ease-in-out;
}
nav ul {
line-height: 100px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 50px;
transition: 0.5s ease-in-out;
}
nav ul li {
display: inline-block;
padding: 16px 20px;
transition: 0.5s ease-in-out;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 24px;
transition: 0.5s ease-in-out;
}
nav ul li a.current{
font-weight: 600;
}
nav.scrolled{
background: #fff;
min-height: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled ul li a{
text-decoration: none;
color: #000;
font-size: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled img{
width: 180px;
height: 41px;
margin: 27px 80px;
transition: 0.5s ease-in-out;
}
/* -=-=-=-=-= MENU ITEM HOVER ANIMATION =-=-=-=-=- */
.menu a {
transition: color 0.1s, background-color 0.1s;
}
.menu a {
position: relative;
display: block;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #fff;
}
.menu a::before {
content: '';
display: block;
position: absolute;
bottom: 24px;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
background-color: #fff;
}
.menu a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
.menu.scrolled {
color: #000;
background-color:
}
/* -=-=-=-=-= END MENU ITEM HOVER ANIMATION =-=-=-=-=- */
And the JS:
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('scrolled');
}
else {
$('nav').removeClass('scrolled');
}
})
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop()> 2) {
$('.logo img').attr('src', 'res/logos/main.png');
}
if ($(this).scrollTop() < 2) {
$('.logo img').attr('src', 'res/logos/main_light.png');
}
});
});
And the important HTML:
<header class="index">
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logoimg" src="res/logos/main_light.png">
</a>
</div>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Company</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Note that .scrolled is the one that changes the navbar once you scrolled. May your road lead you to warm sands!

You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.
You can either change .menu a to .menu nav ul li a or redesign your classes.
For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.

Onclick only every other click

The problem I have come up to is that the onclick function I have made in JavaScript only can be executed every other click on the button. This happened after adding this code (because I want to hide the class/div after x seconds):
popup.classList.toggle("show");
setTimeout(
function() {
popup.classList.toggle("hide");
}, 750);
}
So with other words, it works the first time clicking then when the class is shown for x seconds and when I am gonna click it again. Nothing happens, but on the next click it works. And this goes on and on and on. What can the problem?
I tried copying the code but it doesnt seem to work in jsfiddle as it did in the project. If someone could tell me whats the problem in this code and how to make it show the popup every time the button is clicked.
https://jsfiddle.net/xxuvwc1b/
function showpop() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
setTimeout(
function() {
popup.classList.toggle("hide");
}, 750);
}
.popup {
background-color: black;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-weight: bold;
font-family: 'Raleway', sans-serif;
font-size: 1em;
text-decoration: none;
color: green;
float: left;
border-radius: 5px;
border: none;
width: 100%;
}
:focus {
outline: 0 !important;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<button class="popup" onclick="showpop();"><span class="popuptext" id="myPopup">HERE I AM!</span>SHOW ME A POPUP</button>

You click on it and add the class show. Almost a second later, you add the class hide (it still has the class show).
You click on it again and you remove the class show. Almost a second later, you remove the class hide.
The next click adds both. The 4th removes both. And so on.
Use a single class and toggle that on and off.

How can i override css button or checkbox placement

i am new user here and i am making a GUI but i am stuck at the placement of checkbox (styling)
spacing issue:
when i add the toggle switch(checkbox) all my aliments for the switches gets destroyed any ideas??
.btn-group button {
background-color: Transparent;
border: ;
color: white; /* White text */
padding: 29px 23px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 10%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
margin: 30px 1px;
}
<div class="btn-group">
<button id = "camera" onclick="camera()"></button>
<input id=pumptoggle type="checkbox" class="toggle-switch">
<button id = "fish" onclick="fish()"></button>
<button id = "outside" onclick="outside()"></button>
<button onclick="bulb()"></button>
</div>
<head>
<link rel="stylesheet" href="toggle-switches.css">
</head>
toggle-switches.css
input[type=checkbox].toggle-switch {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 6em;
height: 3em;
border-radius: 3em;
background-color: #ddd;
outline: 0;
cursor: pointer;
transition: background-color 0.09s ease-in-out;
position: relative;
}
input[type=checkbox].toggle-switch:checked {
background-color: #3af;
}
input[type=checkbox].toggle-switch::after {
content: '';
width: 3em;
height: 3em;
background-color: white;
border-radius: 3em;
position: absolute;
transform: scale(0.7);
left: 0;
transition: left 0.09s ease-in-out;
box-shadow: 0 0.1em rgba(0, 0, 0, 0.5);
}
input[type=checkbox].toggle-switch:checked::after {
left: 3em;
}

You can either use the !important attribute or define new style using id attribute as specificity of id is more than class selector.# is use to select dom using id in css
#camera{
// styles for camera
}

create new CSS class and use !important to the property which you want to override ,
For eg,if you want to override left-margin you can do it as below
.new-class-name{
margin-left: 10% !important
}

Font Awesome with Half Style CSS

I'm wondering if anyone can help me / If this is even possible.
I'm trying to half style (using halfstyle.js) the youtube font-awesome icon so that the icon is like the youtube logo (bottom half red, top half white)
I'd like to do this on hover, but I can't even seem to get this going for just as default.
JSFiddle
body {
background: rgba(0,0,0,.4);
}
.fa {
font-size: 10em;
color: white;
}
.fa-youtube {}
.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
<i class="fa fa-youtube textToHalfStyle"></i>

You cannot do that for FontAwesome i.fa icons because, already HalfStyle is based on the ::after and ::before pseudo elements. Also, FontAwesome uses :after for this. You need to create another element and give :hover option for achieving this.
Snippet
$(function () {
$(".textToHalfStyle").each(function () {
$(this).parent().append('<div class="cloned"></div>');
$(".cloned").append($(this).clone());
});
});
body {
background: rgba(0,0,0,.4);
font-size: 160px;
}
.fa {
color: #fff;
}
.cloned {
opacity: 0;
position: absolute;
display: block;
z-index: 1;
left: 8px;
top: 76px;
height: 0.65em;
overflow: hidden;
}
.cloned .fa {
position: relative;
top: -68px;
color: #f00;
}
.fa:hover ~ .cloned,
.cloned:hover {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<i class="fa fa-youtube textToHalfStyle"></i>