We Keep Coding

Make a card burger menu dropdown

Okay so this is a bit of a longer code I've posted but I will try to explain what I'm trying to do here.
I have this burger menu icon to the right (three lines), and when these are clicked I want by items to slide down and be viewed like in this image
In my example you can see how I created the first part of it, but I don't know how to make this part, since position: absolute; and so on makes it look wired, and it starts to float in the right corner. I know I still need to round the corners and make some shadows, but that not the hard part. I've seen people using <nav> tags with <divs> inside instead of the way I do it with div outside and <ul> lists inside, but is that better or can this still be done, and how?
Example
function menuToggle() {
var list = document.getElementById("list");
var listElements = list.childElementCount;
var height = 1.5 * listElements;
var x = document.getElementById("burgerMenu");
if (x.style.height === "0rem") {
x.style.height = height + "rem";
} else {
x.style.height = "0rem";
}
}
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* Dark Theme */
--clr-bg-dark: #2F2F35;
--clr-card-bg-dark: #3A3B41;
--clr-card-body-text-dark: #8D90A1;
--clr-card-title-text-dark: #D3D3D9;
--clr-nav-activ-color-dark: #D3D3D9;
--clr-nav-hover-color-dark: #D3D3D9;
--dark-moon: url("../images/svg/dark_moon.svg") center no-repeat;
--dark-hover-moon: url("../images/svg/dark_moon_hover.svg") center no-repeat;
/* (Default) Light Theme */
--clr-bg-light: #E1E1E1;
--clr-card-bg-light: #F3F3F3;
--clr-nav-activ-color-light: #3A3B41;
--clr-nav-hover-color-light: #3A3B41;
--light-sun: url("../images/svg/light_sun.svg") center no-repeat;
--light-hover-sun: url("../images/svg/light_sun_hover.svg") center no-repeat;
/* (Default) Set Colors */
--foreground: var(--clr-bg-dark);
--background: var(--clr-bg-light);
--activ-mode-icon: var(--light-sun);
--activ-hover-mode-icon: var(--light-hover-sun);
--selected-nav-page: var(--clr-nav-activ-color-light);
--hover-nav: var(--clr-nav-hover-color-light);
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--speed: .3s;
}
.darkmodescss {
/* Used as classList.add('darkmodescss') by js/toggletheme.js
Replaces the (Default) Light Theme parameters with Dark Theme */
--foreground: var(--clr-bg-light);
--background: var(--clr-bg-dark);
--activ-mode-icon: var(--dark-moon);
--activ-hover-mode-icon: var(--dark-hover-moon);
--selected-nav-page: var(--clr-nav-activ-color-dark);
--hover-nav: var(--clr-nav-hover-color-dark);
--clr-icon-width: var(--clr-icon-width);
--clr-icon-height: var(--clr-icon-height);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: var(--clr-nav-color);
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.topnav a:hover {
color: var(--hover-nav);
}
.topnav a.active {
color: var(--selected-nav-page);
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
}
.nav-icon {
/* Navigation Icon Sizing - SVG Only */
width: 2em;
height: 2em;
padding: 0.09rem 0.15rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.disp_mode {
/* (Default) Dark / Light Mode - Icon Handling */
background: var(--activ-mode-icon) no-repeat;
}
.disp_mode:hover {
/* (Hover) Dark / Light Mode - Icon Handling */
background: var(--activ-hover-mode-icon) no-repeat;
}
.topnav-menu {
/* Burger Menu Content*/
width: 100%;
overflow: hidden;
transition: 1000ms;
background-color: none;
padding: 0;
}
.topnav-menu ul {
/* Burger Menu Content*/
float: right;
margin: 0;
list-style-type: none;
}
.topnav-menu a {
color: var(--clr-nav-color);
text-align: center;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
}
.topnav-menu a:hover {
color: var(--hover-nav);
}
.topnav-menu a.active {
color: var(--selected-nav-page);
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: var(--hover-nav);
}
<?php
declare(strict_types=1);
?>
<!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>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
<!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
<div class="topnav-menu" id="burgerMenu" style="height:0rem;">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>item2</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I found another example where they made it in css, and it could probably also be done like that even though I can't make it work?
Link to a CSS only dropdown

TL:DR that's a lot of code for something so simple. Don't rely on javascript to do the animations, just to put a "open" class on the css element. About the positioning, you need to tell the element which parent to use it's positioning, in this case, the hamburguer.
Also, you want the menu inside the DOM component it is parent of, in this case, the hamburguer menu it would be better inside the place where it should appear.
Let me try to solve it:
function menuToggle() {
var menu = document.querySelector('.right-nav');
menu.classList.toggle('open-hamburguer');
}
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* Dark Theme */
--clr-bg-dark: #2F2F35;
--clr-card-bg-dark: #3A3B41;
--clr-card-body-text-dark: #8D90A1;
--clr-card-title-text-dark: #D3D3D9;
--clr-nav-activ-color-dark: #D3D3D9;
--clr-nav-hover-color-dark: #D3D3D9;
--dark-moon: url("../images/svg/dark_moon.svg") center no-repeat;
--dark-hover-moon: url("../images/svg/dark_moon_hover.svg") center no-repeat;
/* (Default) Light Theme */
--clr-bg-light: #E1E1E1;
--clr-card-bg-light: #F3F3F3;
--clr-nav-activ-color-light: #3A3B41;
--clr-nav-hover-color-light: #3A3B41;
--light-sun: url("../images/svg/light_sun.svg") center no-repeat;
--light-hover-sun: url("../images/svg/light_sun_hover.svg") center no-repeat;
/* (Default) Set Colors */
--foreground: var(--clr-bg-dark);
--background: var(--clr-bg-light);
--activ-mode-icon: var(--light-sun);
--activ-hover-mode-icon: var(--light-hover-sun);
--selected-nav-page: var(--clr-nav-activ-color-light);
--hover-nav: var(--clr-nav-hover-color-light);
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--speed: .3s;
}
.darkmodescss {
/* Used as classList.add('darkmodescss') by js/toggletheme.js
Replaces the (Default) Light Theme parameters with Dark Theme */
--foreground: var(--clr-bg-light);
--background: var(--clr-bg-dark);
--activ-mode-icon: var(--dark-moon);
--activ-hover-mode-icon: var(--dark-hover-moon);
--selected-nav-page: var(--clr-nav-activ-color-dark);
--hover-nav: var(--clr-nav-hover-color-dark);
--clr-icon-width: var(--clr-icon-width);
--clr-icon-height: var(--clr-icon-height);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
/*overflow: hidden; *//* if this is set the hamburguer don't show inside. it is best to the hamburguer to be inside to know the positioning of the other elements he wants to be near */
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: var(--clr-nav-color);
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.topnav a:hover {
color: var(--hover-nav);
}
.topnav a.active {
color: var(--selected-nav-page);
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position:relative; /* all other positioned elements should use this as the indicator */
}
.nav-icon {
/* Navigation Icon Sizing - SVG Only */
width: 2em;
height: 2em;
padding: 0.09rem 0.15rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.disp_mode {
/* (Default) Dark / Light Mode - Icon Handling */
background: var(--activ-mode-icon) no-repeat;
}
.disp_mode:hover {
/* (Hover) Dark / Light Mode - Icon Handling */
background: var(--activ-hover-mode-icon) no-repeat;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px; /* can't assume the parents width */
overflow: hidden; /* this hides the shadow from inside, but we add some padding to fix this v */
padding: 5px;
transition: all .5s ease; /* !! */
background-color: none;
max-height:0; /* !! */
position:absolute; /* !! */
top:100%; /* distance itself 100% of the height of parent element */
right:0; /* aligned on the right of container */
opacity:0; /* just to hide it */
}
/* here the magic happens */
.open-hamburguer .topnav-menu{
opacity:1;
max-height:300px; /* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
/* float: right;*/ /* no need */
margin: 0;
padding:0; /* yes need */
list-style: none; /* shorthand */
box-shadow: 0 2px 2px gray; /* shorthand */
border-radius:10px; /* have to set here too otherwise the shadow would be weird */
}
.topnav-menu ul li:last-child {
border-top:1px solid gray; /* last item border */
}
.topnav-menu ul li:last-child a {
border-radius:0 0 10px 10px; /* round borders on end */
}
.topnav-menu ul li:first-child a {
border-radius:10px 10px 0 0; /* round borders on start */
}
.topnav-menu a {
background-color:white; /* best to have background for each link instead of container */
display:block; /* inline elements are a bother */
text-align:left; /* !! */
color: var(--clr-nav-color);
text-align: left;
padding: 0.313rem 0.313rem;
padding: 0.8rem 1rem; /* rem is not a good measure for this, if for some reason you want to increase the base font for text this all goes south */
text-decoration: none;
font-size: 1.063rem;
transition:all .5s ease; /* pretty */
}
.topnav-menu a:hover {
color: var(--hover-nav);
background-color:orange; /* cmon some color :P */
}
.topnav-menu a.active {
color: var(--selected-nav-page);
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: var(--hover-nav);
}
<?php
declare(strict_types=1);
?>
<!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>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
<div class="topnav-menu" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>item2</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
You get the point. Next time please try to share the code only for the subject at hand, it was hard running through this code that wasn't related.
Fun tho'
Edit
Actually added the overflow:hidden from the menu so you can't see the contents when the height is 0, to avoid hiding the box-shadow I added a little padding.

CSS. Hover Text. Appear Multiple images

I am new to web design and this is merely a hobby. I am trying to set up a little webpage for myself here.
I would like to have images appear in the "same location".
I have a sort of menu bar, with a caption that appears on hover over the bar, that will then display the images.
I had some issues with the menu bar displaying in a different container. Would using JavaScript be a solution?
As a work around I made the images display with a hover just below the text. Which is suitable but not preferred.
The problem is I cannot seem to add more than one .image and .text variable in the CSS. They seem to just over ride. I tried duplicating the div containers and adding duplicate classes to match the ones i found online. ie.:
.text2
.image2
.hover_container2
I am weak in this software coding stuff and would appreciate some help.
<!DOCTYPE html>
<html>
<head>
<style>
.item1{
position:relative fixed;
}
img {
position:relative;
top:5%;
left:5%;
opacity: 0; /* Change this to .5 for 50% opacity */
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
img:hover {
opacity: 1;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
div.hover_container
{
width: 100px; /* set a fixed width */
height: 900px; /* set a fixed height */
margin:-45px;
}
div.hover_container .text
{
display:block; /* shown as a block-type element by default, visible */
width: 100px; /* same width as container */
height: 100%; /* same height as container */
}
div.hover_container .image
{
display: none; /* hidden by default */
width: 100px; /* same width as container */
height: 100%; /* same height as container */
}
div.hover_container .image img
{
max-width: 900px; /* width of the image */
max-height: 900px; /* height of the image */
padding-left: 20px;
margin:0;
}
div.hover_container:hover .text
{
display: none; /* hidden when hovering the container */
}
div.hover_container:hover .image
{
display: block; /* shown when hovering the container */
}
</style>
</head>
<body>
<ul>
<li>viking</li>
</ul>
<div class="hover_container">
<div class="text"></div>
<div class="text2"></div>
<div class="image">
<img src="valerie_purple3_tn.png" alt="" />
</div>
</div>
</div>
<div style="margin-left:10%;padding:1px 16px;height:1000px;">
</div>
</body>
</html>
​

How to change hamburger menu icon when clicked?

Okay so I have a hamburger style menu that uses the normal 3 line icon but I'd like it so when you click it the icon changes to a cross. How would I achieve this? How would I structure the JavaScript?
HTML:
<ul class="navigation">
<li class="nav-item">Home</li>
<li class="nav-item">Meet the team</li>
<li class="nav-item">Blog</li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="menuChange()" />
<label for="nav-trigger"></label>
CSS:
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles */
list-style: none;
background: #000;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: #999999;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #ffffff;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* non-critical apperance styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url(../images/Menu.png);
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
Check it out.

I think the better solution is to use an event caused in the collapse menu instead of onclick.
show.bs.collapse - Fired after the show method is called.
shown.bs.collapse - Will wait for CSS transitions to complete
hide.bs.collapse - Fired when the hide instance method has been called.
hidden.bs.collapse - Will wait for CSS transitions to complete
Code look like this:
$('.navigation').on('show.bs.collapse', function() {
// set cross as content of menu button
});
$('.navigation').on('hide.bs.collapse', function() {
// set tree lines as content of menu button
});

CSS select previous sibling [duplicate]

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 years ago.
I have a progress bar which has two children(parts). Whenever each of this children is hovered the total height of the progress and its children will change. I have managed to solve for the first children using the next sibling selector but I can't find a solution for the second children (the yellow part). Up to now I have solved this using jQuery but I want to do this in pure CSS.
fiddle: https://jsfiddle.net/zfh263r6/5/
$('#start').on({
mouseenter: function () {
//$(this).css('height', '4px');
//$( 'progress' ).css('height', '4px');
},
mouseleave: function () {
//$(this).css('height', '');
// $( 'progress' ).css('height', '');
}
});
#progress_wrap {
position: relative;
height: 4px; /*max height of progress*/
background: #f3f3f3;
}
progress {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 100%;
border:none;
height: 2px;
transition:all .25s ease-in;
cursor: pointer;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
display: block;
}
progress:hover, progress:hover + #start {height: 4px}
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of default border in Firefox. */
border: none;
/* For IE10 */
color: #f8008c;
}
progress[value]::-webkit-progress-bar {
background-color: #fff;
border:none;
}
progress[value]::-webkit-progress-value {background:#f8008c}
progress::-ms-progress-value {background:#f8008c}
progress::-moz-progress-bar {background:#f8008c}
progress::-ms-fill {border: none}
#start {
height: 2px;
transition: all .25s ease-in;
cursor: pointer;
background-color: #ffe232;
position: absolute;
top: 0;
left: 0px;
width: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress_wrap">
<progress min="0" max="1" value="0.66" id="progress"></progress>
<div id="start" style="display: inline-block; left: 50px;"></div>
</div>

No CSS doesn't have a previous sibling selector but you can use ~ selector -
Let's say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}
<div class="parent">
link
link
link
link
link
</div>

From comment:
make progress and start the hover-height and then make progress_wrap overflow:hidden and shorter and make that expand on hover.
To avoid pushing other elements around, we can add some negative bottom margin at the same time.
#progress_wrap {
position: relative;
height: 2px;
background: #f3f3f3;
overflow:hidden;
transition: all .25s ease-in;
}
#progress_wrap:hover, progress:hover + #start {
height: 4px;
margin-bottom:-2px;
}
progress,#start {
height: 4px; /*This is a change from existing, not a new declaration*/
}
https://jsfiddle.net/5t90s4jk/

Define Javascript slider hit/rollover area

Im having an issue defining the hit area for a javascript sliding element.
See example:
http://www.warface.co.uk/clients/warface.co.uk/
Please slide over the grey box on the right side to reveal the button, although this works I would only like for the slider to only be triggered by rolling over the red block.
CSS
.slidingtwitter { /* -- This is the hit area -- */
background: #ccc;
width:255px;
height:55px;
overflow: hidden;
top:50%;
right: 0px; /* -- This is the sliding start point -- */
position: fixed;
font-family: Gotham, Sans-Serif;
z-index: 50;
}
.slidingtwitter.right {
right:0px;
}
.slidingtwitter .caption { /* -- This is the sliding area -- */
background: #fff;
position: absolute;
width:260px;
height:55px;
right: -205px; /* -- This is the sliding start point -- */
}
.slidingtwitter a {
color: #484848;
font-size: 20px;
text-transform: uppercase;
}
.slidingtwitter a:hover {
color: black;
}
.slidingtwitter .smaller {
font-size: 12px;
font-family: Gotham Medium;
}
.twitterblock {
background: #f35555 url("styles/images/button_twitter.png") no-repeat 14px 15px ;
width:35px;
height:35px;
padding:10px;
float:left;
display:block;
}
.slidingtwitter .followme {
background: url("styles/images/button_arrowheadthin.jpg")no-repeat right 0;
height:35px;
display:block;
float:left;
line-height:14px;
width:140px;
margin:10px 0px 0px 14px;
padding-top:6px;
padding-right: 40px;
}
JS
$('.slidingtwitter').hover(function(){
$(".slide", this).stop().animate({right:'0px'},{queue:false,duration:400}); //Position on rollover
},function() {
$(".slide", this).stop().animate({right:'-205px'},{queue:false,duration:400}); //Position on rollout
});
Any suggestions would be much appreciated.

I'm not sure if the gray area should be visible at all but you can check this solution:
animate the whole .slidingtwitter:
$('.slidingtwitter').hover(function(){
$(this).stop().animate({right:'0px'},{queue:false,duration:400});
},function(){
$(this).stop().animate({right:'-205px'},{queue:false,duration:400});
});
Change the CSS to stick the .slide{left:0;/*remove right:-205px;*/}
Set the starting point for .slidingtwitter{right:-205px;}
You can add cursor:pointer; to .twitterblock just to make it look like a button
Cheers
G.