im currently working on a project for my company and im pretty new to html and css.
my question is this, im trying to make a menu resize its size when i hover on top of it so the submenu is open.
the div .itemMenu should go from width 100% to 50%, so the submenu (.itemSubmenu) can be shown
here are some pics
and this is my code
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
/* Body tools */
body {
margin: 0 auto;
user-select: none;
overflow: hidden;
background-color: black;
}
/* Container */
.container {
display: flex;
flex-direction: row;
position: fixed;
width: 100%;
height: 100%;
}
/* Left DIV */
.left {
display: flex;
flex-direction: row;
width: 20%;
border: 3px solid green;
}
.itemMenu {
text-align: center;
height: 100%;
width: 100%;
background-color: var(--Gray);
}
.itemMenu span {
color: white;
font-size: 30px;
}
.itemSubmenu {
display: none;
}
.itemMenu:hover>.itemSubmenu {
display: flex;
height: 100%;
width: 100%;
margin-left: 100%;
background-color: white;
}
/* Right DIV */
.right {
display: flex;
flex-direction: column;
width: 80%;
}
.content {
width: 100%;
height: 70%;
background-color: var(--Gray);
border: 5px solid yellow;
}
.bottom {
width: 100%;
height: 30%;
background-color: var(--DarkBlue);
border: 10px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left">
<div class="itemMenu">
<div class="itemSubmenu"></div>
</div>
</div>
<div class="right">
<div class="content"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
Good day ^^
I've spent a few minutes creating something similar using #keyframes. Unfortunately they are a bit janky for how I used them but it works, here's the code;
*{margin: 0px; padding: 0px;}
body{background-color: lightblue;}
/* Menu Area */
.Menus{background-color: darkred; position: fixed; left: 0vw; top: 0px; width: 20vw; height: 100vh; display: grid; grid-template-columns: 100% 0%;}
.Menus:hover{animation: PopOutMenu 0.2s forwards;}
/* Menus */
.Menu1, .Menu2{height: 100%;}
.Menus .Menu1{background-color: red;}
.Menus .Menu2{background-color: orange; color: transparent;}
.Menus .Menu2:hover{animation: DisplayMenu 1s forwards;}
/* Main Content */
.Main{background-color: blue; margin-left: 20vw;}
/* Keyframe Animations */
#keyframes PopOutMenu{
0%{grid-template-columns: 100% 0%;}
01%{grid-template-columns: 90% 10%;}
25%{grid-template-columns: 80% 20%;}
50%{grid-template-columns: 70% 30%;}
75%{grid-template-columns: 60% 40%;}
100%{grid-template-columns: 50% 50%;}
}
#keyframes DisplayMenu{
0%{color: transparent;}
100%{color: black;}
}
<body>
<section class="Menus">
<div class="Menu1">
<h1>Menu1</h1>
<a>Link One</a>
<a>Link Two</a>
<a>Link Three</a>
</div>
<div class="Menu2">
<h1>Menu2</h1>
<a>This Page1</a>
<a>This Page2</a>
<a>This Page3</a>
</div>
</section>
<div class="Main">
<h1>Menu</h1>
<a>Test</a>
<a>Test</a>
<a>Test</a>
</div>
</body>
Perhaps this can be helpful to you. Tweak it how you'd like and perhaps change it out for something smoother later.
Version 2
I've kept working on it. This is much smoother.
*{margin: 0px; padding: 0px;}
body{background-color: lightblue;}
a{display: block;}
/* Menu Area */
.Menus{position: fixed; left: 0vw; top: 0px; width: 20vw; height: 100vh; display: grid; grid-template-columns: 100% 0%;}
.Menus:hover{animation: PopOutMenu 0.25s forwards;}
/* Menus */
.Menu1, .Menu2{height: 100%;}
.Menus .Menu1{background-color: dimgray;}
.Menus .Menu2{background-color: gray; position: absolute; left: 10vw; z-index: -1; width: 50%;}
/* Main Content */
.Main{background-color: blue; margin-left: 20vw;}
/* Keyframe Animations */
#keyframes PopOutMenu{
0%{grid-template-columns: 100% 0%;}
10%{grid-template-columns: 95% 05%;}
20%{grid-template-columns: 90% 10%;}
30%{grid-template-columns: 85% 15%;}
40%{grid-template-columns: 80% 20%;}
50%{grid-template-columns: 75% 25%;}
60%{grid-template-columns: 70% 30%;}
70%{grid-template-columns: 65% 35%;}
80%{grid-template-columns: 60% 40%;}
90%{grid-template-columns: 55% 45%;}
100%{grid-template-columns: 50% 50%;}
}
<body>
<section class="Menus">
<div class="Menu1">
<h1>Menu1</h1>
<a>Link One</a>
<a>Link Two</a>
<a>Link Three</a>
</div>
<div class="Menu2">
<h1>Menu2</h1>
<a>This Page1</a>
<a>This Page2</a>
<a>This Page3</a>
</div>
</section>
<div class="Main">
<h1>Main Content</h1>
<h2>Greetings and welcome to our site!</h2>
</div>
</body>
Hopefully that can be beneficial to you.
Related
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.
I created a web page that scrolls horizontally when you scroll vertical. And I want the scrolled value on scrolling. Here is what I have done
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
I tried using window.addEventListener('scroll') but not getting any scrolled value. I tried debugging Js code in chrome but function is not even invoking on scrolling.
window.addEventListener('scroll', () => {
console.log(Scrolled);
});
You need to set addEventListener on scroll of div.outer-wrapper and get scrollTop
document.getElementsByClassName("outer-wrapper")[0].addEventListener('scroll', function(e) {
var div = document.getElementsByClassName("outer-wrapper")[0].scrollTop;
console.log(div);
});
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.
I am creating an eCommerce site. I have a header and a sidebar. And then I have the main body section. In the main body section, I have a heading for Featured Products. And then I have some images below the Featured Products heading which I will replace with actual images. But when I add the image, and then I also add the Add the Add to Cart button below each image. But when I add a button, it is coming right to the image instead of below it. Even though I have a line break tag.
Some help will be really appreciated
Thanks
The index.php
<?php
require_once 'Partials/header.php';
?>
<br><br><br><br>
<link rel="stylesheet" type="text/css" href="Styles/Style.css">
<div class="main_wrapper">
<?php
require_once 'Partials/sidebar.php';
?>
<!--The main body section start here-->
<div class="main">
<!--Featured Products List Starts Here-->
<h2 style="text-align: center;">Featured Products</h2>
<div class="container">
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
</div>
<h2 style="text-align: center;">New Arrivals</h2>
<div class="container 2">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Clothes</h2>
<div class="container 3">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Brands</h2>
<div class="container 4">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: auto;
justify-content: space-between;
}
.container > img {
display: block;
margin-top: 5px;
}
</style>
<!--Featured Products List Ends Here-->
<button name="Black">Black</button>
</div>
<!--The main body section ends here-->
<!--Back To Top Coding Starts Here-->
<head>
<style>
#back-to-top-btn{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #fff;
color: #333;
cursor: pointer;
outline: none;
border: 3px solid #333;
border-radius: 50%;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-property: background-color, color;
}
#back-to-top-btn:hover, #back-to-top-btn:focus{
background-color: #333;
color: #fff;
}
/* Animations */
.btnEntrance {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: btnEntrance;
}
/* zoomIn */
/* #keyframes btnEntrance {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 1;
}
} */
/* fadeInUp */
#keyframes btnEntrance {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.btnExit {
animation-duration: 0.25s;
animation-fill-mode: both;
animation-name: btnExit;
}
/* zoomOut */
/* #keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
} */
/* fadeOutDown */
#keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
</style>
</head>
<button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>
</body>
</html>
And then this is the header.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home - Diamond Collections</title>
<script src="https://kit.fontawesome.com/1cde82a3ba.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
/*background-image: radial-gradient(circle, red, yellow, green);*/
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
height: 76px
}
.logo {
grid-column: 2 / 3;
position: absolute;
height: 200px;
//transform: scale(2,2);
}
nav {
// all: unset; /* this causes issues with Edge, since it's unsupported */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: 1.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
h1 {
margin:0
}
.logo a {
display: flex;
justify-content: center;
}
.logo img {
height: 74px;
margin-top: 1.1px;
}
</style>
</head>
<body>
<header>
<h1 class="logo"><img src="Images/Logo5.JPG"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<form action="" method="" class="search" style="margin-top: 24px;">
<input type="" name="search" placeholder="Search..." style="padding: 5px; font-size: 15px">
</form>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
And then this is the sidebar.php
<style>
.sidenav {
height: 100%;
width: 160px;
margin-top: 6.1%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<div class="sidenav">
New Arrivals
Featured
Clothes
Brands
</div>
I reviewed your code and the reason you're not getting the result you want is because you put everything inside the div CONTAINER.
You put IMG BUTTON IMG BUTTON IMG BUTTON IMMG BUTTON so when the code runs it displays everything in a straight line as it actually is.
in order to get the result you want you need to structure your code with more divs inside the container div.
EXAMPLE:
<div class="container">
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
</div>
Let me know if you need more help.
And P.S keep your style code inside the style.css and not html files.
Take this snippet:
.container {
width: 150px;
height: 100px;
}
.test {
color: white;
background-color: red;
width: 100%;
height: 25%;
transition: height ease 1s;
}
.test:hover {
height: 100%;
}
<div class="container">
<div class="test">Hover Here</div>
</div>
A simple div inside a container which expands to 100% when hovered over. What I am trying to make is very simular to this, but in a navigation menu (similar to http://www.mineplex.com/).
When a user hovers over the container div (not the main box itself) I need the main div to expand from 0% to 100% in height.
I have tried using JQuery to solve this using a ".hovered" class with no luck. How can one code this?
Any help is much appreciated. Thanks!
Here's a demonstration:
Similarities between both the code snippets:
The containers make use of flex display to make a responsive navbar container, with each of its items spanning a width of 20% (which can be adjusted).
Each of the items (with relative positioning) has two sub containers (with absolute positioning), the first being overlay which we're making use for getting the blue transitioning background(z-index:1) and the second which has a fixed text on the front (z-index:2).
Now, the z-index makes sure that the overlay will be transitioned at the back and text will be fixed in the front, another thing to keep in mind is since we're transitioning it from the bottom up, we set the bottom:0 on the overlay class as well as height:0%;.
On hovering , we transition the height from 0% to 100%.
Differences between both the code snippets:
In the first snippet, we're transitioning each item on hover by making use of .items:hover .overlay.
Whereas in the second snippet, we're transitioning every item when the container is hovered instead of individual items by using .container:hover > *.items> .overlay ( ">" is a direct child selector ).
First: Hovering each item individually to expand the overlay.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.items:hover .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>
Second: When the user hovers over the container, expanding all the overlays.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.container:hover > *.items> .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>
ul{
list-style-type: none;
margin-left: 0;
padding-left: 0;
display: flex;
}
ul li{
border: 1px solid #d3d3d3;
text-align: center;
height: 100px;
width: 100px;
margin-right: 4px;
}
ul li a{
color: #000000;
text-decoration: none;
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul li a:after{
content: '';
position: absolute;
background: lightblue;
left: 0;
bottom: 0;
height: 0%;
width: 100%;
z-index: -1;
}
ul li a:hover:after{
animation: bounce 1s ease-in-out forwards;
}
#keyframes bounce {
0% {height: 0%}
20% { height: 100%}
55% { height: 95%}
100% {height: 100%}
}
<ul>
<li>Lorem, ipsum.</li>
<li>Saepe, asperiores!</li>
<li>Vitae, expedita?</li>
<li>Dicta, quo.</li>
<li>Sed, et.</li>
</ul>
i wrote some code
//html
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
//This is sass
ul {
list-style:none;
background:red;
li {
display:inline-block;
padding:10px;
position:relative;
&:before {
position: absolute;
content: "";
width: 100%;
height: 0%;
left: 0;
bottom: 0;
background:blue;
transition: height ease-in-out 0.5s;
}
a {
z-index:2;
position:relative;
color:white;
}
&:hover {
&:before {
height: 100%;
}
}
}
}
My goal is to have five or so divs inside a parent div. When a div is clicked it should expand over the other divs. What confuses me is how to get said div to expand above the other divs so when the reset/back/close button is clicked all of the divs are shown once again.
When hovered, the div should expand slightly.
The parent container is 1900 by 500.
My code:
.one {
height: 100%;
width: 20%;
background-color: #ffccaa;
float: left;
}
.two {
height: 100%;
width: 20%;
background-color: #ffffcc;
float: left;
}
.three {
height: 100%;
width: 20%;
background-color: #aabbcc;
float: left;
}
.four {
height: 100%;
width: 20%;
background-color: #cccccc;
float: left;
}
.five {
height: 100%;
width: 20%;
background-color: #ff11bb;
float: left;
}
* {margin: 0; padding: 0;}
.header {height: 50vh; width: 100vw; background-color: #000;}
.navi {height: 100px; width: 100%; background-color: #fccaab; margin-top: 5px;}
.logo {height: 100%; width: 500px; background-color: #ccc; align:center; margin: auto;}
.content {height: auto; width: 100%; background-color: #ccffca; margin-top: 5px;}
.footer {height: 10vh; width: 100%; background-color: #abcdef; margin-top: 5px;}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/file.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="navi">
<div class="logo"></div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
In this example the clicked div is given 100% width and its siblings have their width removed. The transition gives a smooth animation.
Create the hover with the :hover pseudo class on the div. In this example, the div is scaled slightly using the transform scale property like this:
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
The scale is removed when selected with .selected:hover { transform: scale(1) }
Working Example
Note: I have changed all the ids to classes and condensed all the duplicate styles into body > div; all the direct div children of body have the same width, height, transition, and are floated to the left.
$('body > div').on('click', function() {
$(this).toggleClass('selected').siblings().toggleClass('hide');
});
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body > div {
transition: all 0.3s;
float: left;
height: 100%;
width: 20%;
}
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
.one {
background-color: #ffccaa;
}
.two {
background-color: #ffffcc;
}
.three {
background-color: #aabbcc;
}
.four {
background-color: #cccccc;
}
.five {
background-color: #ff11bb;
}
.selected {
width: 100%;
}
.selected:hover {
transform: scale(1);
}
.hide {
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>