For the love of god! I have spent hours trying to figure this out, and nothing seems to work. Please, much help is needed.
So i have managed to write a menu burger (and i dont know how, it's the only component i managed to assign animations too). And on clicking on the burger menu some other links appear and i want it to ease-in/slide-in when appearing on click and out when disappearing on click. Same goes with the searchbar that appears on clicking the 'DISCOVER' link. I surrender!!
const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menu.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menu.classList.remove('open');
menuOpen = false;
}
});
const discoverLink = document.querySelector('.menuItem:first-child');
const searchbar = document.querySelector('.searchbar');
let searchOpen = false;
discoverLink.addEventListener('click', () => {
if (!searchOpen) {
searchbar.classList.toggle('open');
searchbar.classList.add('open');
searchOpen = true;
} else {
searchbar.classList.remove('open');
searchOpen = false;
}
});
#font-face {
font-family: 'Montserrat-Light';
src: url(fonts\Montserrat-Light.ttf) format(ttf);
}
body {
background: #272727;
display: flex;
justify-content: center;
align-items: center;
min-height: 10vh;
}
ul {
list-style: none;
}
.menu-btn {
position: absolute;
left: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 30px;
height: 4px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 30px;
height: 4px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
/*desloca 1 faixa para cima e outra para baixo */
.menu-btn__burger::before {
transform: translateY(-6px);
}
.menu-btn__burger::after {
transform: translateY(6px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-32px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.menu {
display: none;
/* hide the menu by default */
}
.menu-btn.open+.menu {
display: inline-block;
/* display the menu when the button is clicked */
}
.menu-links {
position: relative;
left: 100px;
top: 3px;
}
.menu-links a {
text-decoration: none;
/* remove the underline */
font: 12px Montserrat-Light, sans-serif;
color: lightgray;
}
.menu__item {
display: inline-block;
margin-right: 10px;
}
.navShowed {
position: absolute;
display: flex;
width: 280px;
right: 10px;
margin-top: auto;
}
.menuItem {
font: 12px Montserrat-Light, sans-serif;
display: inline-block;
margin-right: 20px;
cursor: pointer;
color: lightgray;
}
.discover-link {
position: relative;
}
.searchbar {
display: none;
position: relative;
right: 300px;
top: 38%;
width: 200px;
height: 15px;
transform: translateY(-50%);
transition: all 0.5s ease-in-out;
}
.searchbar input[type="text"] {
width: 100%;
height: 100%;
padding: 0 20px;
font-size: 10px;
color: #333;
}
.searchbar.open {
display: inline-block;
}
<!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">
<title>Trying Animations out</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<ul class="menu">
<div class="menu-links">
<li class="menu__item">NIKE</li>
<li class="menu__item">NEW BALLANCE</li>
<li class="menu__item">REEBOK</li>
<li class="menu__item">ADIDAS</li>
<li class="menu__item">ASICS</li>
</div>
</ul>
<div class="navShowed">
<h3 class="menuItem discover-link">DISCOVER</h3>
</div>
<div class="searchbar">
<input type="text" placeholder="Search...">
</div>
<script src="main.js"></script>
</body>
</html>
Related
The objective here is to display the boxed nav bars vertically when I hover over one of horizontal parent nav bars. When I stop hovering over this bar, that boxed child nav bar should disappear. The detailed HTML and CSS codes are as follows:
a {
background-color: transparent;
}
a {
background-color: transparent;
box-sizing: border-box;
color: #3197d6;
cursor: pointer;
text-decoration: none;
transition: none;
}
a:hover {
text-decoration: underline;
}
a:hover
{
color: #71bff1;
outline-width: 0;
}
a:hover {
opacity: 1;
transform: translate3d(-50%, -80%, 0);
}
.z-nav-list {
margin: 0 auto;
list-style-type: none;
padding: 0;
overflow: hidden;
max-width: 90%;
}
#media (min-width:1600px)
{
.z-nav-list
{
max-width: 1600px;
}
}
#media (min-width:768px)
{
.z-nav-list_item+.z-nav-list_item
{
margin-left: 10px;
}
}
.z-nav-list_item {
float: left;
}
.z-nav-list_link {
display: block;
color: #232320;
font-size: 1.1em;
padding: 1.5em 0.75em;
transition: color .2s linear;
position: relative;
text-decoration: none;
}
#media (min-width:1100px) {
.z-nav-list_link {
padding: 1.5em 2em;
}
}
.z-nav-list_link--project {
padding-left: 0;
}
.z-nav-list_link--project span {
position: relative;
z-index: 10;
}
.z-nav-list_link--project span:before {
z-index: 5;
content: "";
width: 100%;
position: absolute;
bottom: -10px;
height: 3px;
left: 0;
display: block;
background: #ffc4ff;
transform: translate3d(0, 5px, 0);
transition: all .2s cubic-bezier(.175, .885, .32, 1.275);
opacity: 0;
}
.z-nav-list_link--project:hover span:before {
opacity: 1;
transform: translateZ(0) scale3d(1.1, 1.1, 1.1) rotate(-2deg);
}
.z-nav.show-project .z-nav_project,
.z-nav .project-is-visible
{
opacity: 1;
pointer-events: all;
transform: translateZ(0);
}
.z-nav_project
{
pointer-events: none;
opacity: 0; /*0: transparent */
transition: all 0.2s cubic-bezier(.175, .885, .32, 1.275);
transform: translate3d(0, 15px, 0);
position: absolute;
left: 0;
top: 65px;
z-index: 10000; /*this element is always on the top */
display: none; /* remove all the elements */
/* transform: translateZ(0);*/
}
#media (min-width:992px)
{
.z-nav_project
{
display: inline-block;
}
}
.z-nav_project-list
{
list-style-type: none;
margin: 0;
padding: 1.5em 2em 2em;
background: #232320;
box-shadow: 0 4px 4px rgba(0, 0, 0, .06), 0 19px 20px rgba(0, 0, 0, .15);
border-radius: 20px;
min-width: 15em;
}
.z-nav_project-list-item+.z-nav_project-list-item {
margin-top: .5em;
}
.z-nav_project-list-item-link {
padding: .6em 0;
color: #fff;
font-size: 18px;
position: relative;
display: inline-block;
}
.z-nav_project-list-item-link span {
position: relative;
z-index: 10;
}
.z-nav_project-list-item-link:before {
z-index: 5;
content: "";
width: 100%;
position: absolute;
bottom: 3px;
height: 3px;
left: 0;
display: block;
background: #ffc4ff;
transform: rotate(-1deg);
transition: all .2s cubic-bezier(.175, .885, .32, 1.275);
}
.z-nav_project-list-item-link:after {
z-index: 1;
content: "";
height: 100%;
width: 180%;
position: absolute;
left: 0;
display: block;
top: 0;
}
.z-nav_project-list-item-link:hover {
text-decoration: none;
color: #ffc4ff;
}
.z-nav_project-list-item-link:hover:before {
transform: scale3d(1.2, 1.2, 1.2);
}
.z-nav_project-list-item-link:active:before {
transform: scale3d(1.1, 1.1, 1.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>Document</title>
</head>
<body>
<header class="z-nav">
<nav class="z-nav">
<ul class="z-nav-list c-nav-list--info">
<li class="z-nav-list_item z-nav-list_item--project">
<a class="z-nav-list_link z-nav-list_link--project" href="#"><span>Project</span></a>
</li>
<li class="z-nav-list_item z-nav-list_item--about">
<a class="z-nav-list_link z-nav-list_link--about" href="/about"><span>About</span></a>
</li>
</ul>
<div class="z-nav_project">
<ul class="z-nav_project-list">
<li class="z-nav_project-list-item">
<span>Project1</span>
</li>
<li class="z-nav_project-list-item">
<span>Project2</span>
</li>
<li class="z-nav_project-list-item">
<span>Project3</span>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
If I hover over the horizontal leftmost bar "Project", it should display a vertical nav bar like the following picture. However, my code can not meet this functionality. Can someone help me out? Basically, I want to use CSS opacity property to turn on/off the vertical nav bar. but it does not work. How can I improve this code? Thanks in advance.
I'm trying to create a hover effect where words appear over the hero section when the mouse hovers over it. If you uncomment the code at the bottom of the CSS file you will see that the code works just fine. The only problem is the backround picture dispears and turns completely white. I don't know how to fix it.
Uncomment the code all the way at the bottom of the CSS to see what I'm talking about
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 555;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
#navbar__logo {
background-color: #ff8d02;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#trade {
background-color: #0045f2;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
position: relative;
font-size: 13px;
bottom: 6px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
background: linear-gradient(to right, rgb(240, 105, 2), #8c8393, #4d7fff);
color: #fff;
transition: all 0.3s ease;
}
.navbar__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
border-radius: 4px;
transition: all 1s ease;
}
.navbar__links:hover {
color: #ff7802;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url(./images/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg);
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0) );
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
/*
.hero_two {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
opacity: 0;
transition: all 0.25s ease;
}
.hero_two > * {
transform: translateY(20px);
transition: all 0.25s ease;
}
.hero_two:hover {
opacity: 1;
}
.hero_two:hover {
transform: translateY(0);
} */
<!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>Pigeon</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Pigeon<small id="trade">TRADE</small>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
```
The problem is that you are overwriting the background-image property value from .hero when you add background: rgba(0, 0, 0, 0.6); for .hero_two
Use instead background-color: rgba(0, 0, 0, 0.6);
The property background is a shorthand for all background properties including background-image.
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
Read more here -> background property
See below
EDIT after comments:
You are using two classes on the SAME element. If you write some styles for hero_two it will overwrite the styles for hero. because you are selecting the same element.
If I understand correctly, you want to show an 'overlay' and make the text appear when hovering. You can use a pseudo-element for that ( :after in this case) and some tweaks in your css styling. ( Remove the hero_two classname because it's useless )
/* Hero Section */
.hero {
padding: 50px 0;
background-image: url("https://via.placeholder.com/150");
background-size: cover;
overflow: hidden;
position: relative;
background-position: top;
display: flex;
flex-direction: column;
}
.hero__heading {
color: #fff;
font-size: 100px;
margin-left: 30px;
text-shadow: 2px 2px 8px #000000c4;
}
.orange {
color: rgb(255, 89, 0);
}
.main__btn {
margin: 0 auto;
margin-top: 3rem;
}
.main__btn a {
color: #fff;
text-decoration: none;
z-index: 2;
position: relative;
padding: 10px 20px;
font-size: 1.8rem;
}
.button__color {
background: -webkit-linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
background: linear-gradient(to right, #1e5dff, rgb(255, 89, 0));
}
.hero:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.hero * {
transform: translateY(20px);
transition: all 0.25s ease;
opacity: 0;
}
.hero:hover * {
transform: translateY(0px);
color: #ffffff;
opacity: 1;
}
.hero:hover:after {
opacity: 1;
}
<div class="hero_two hero" id="home">
<div class="hero__container">
<div class="image__overlay">
<div class="hero__content">
<h1 class="hero__heading">Get started <br>making your <span class="orange">online <br>business</span> today!</h1>
</div>
</div>
</div>
<div class="main__btn">
<button class="button button__color">Explore</button>
</div>
</div>
Next time please share only relevant code ( eg. navbar has nothing to do with this ) and take the time to make a code snippet like the one above that reproduces your problem. ( For images, please use a placeholder as we cannot use your own images 'cause we don't have them )
happy coding.
For some context, I am trying to add a hamburger navigation menu to the top right of my website. When you click on it and it expands out into a full page. Nothing crazy. This part actually works. It's all HTML and CSS, no JS. The rest of the website so far is a 3D globe use ArcGIS API for Javascript contained in a #sceneContainer. I've been playing around with this for a while but can't spot the issue.
There are two main issues:
I initially added the navbar #keyframe BEFORE the scene container in the main.css file, but what would happen is that the navbar would work just fine, but it is covered up by an all-white background. I could tell the globe was still rendering because right when you refresh the website it quickly appears and gets covered up. The second part of this is...
I tried putting the #keyframe AFTER the #sceneContainer which allowed the globe to become visible again, but the navbar won't open up.
Almost seems like they are overlapping each other. I want them to coexist together in the same screen where when you click on the menu it covers the whole map. I know it's probably something obvious but I'm stumped. My guess is I messed up somewhere with the sizing or something with the sceneContainer.
Any help would be super cool! 🙏
Here is my Code:
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<script src="main.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
</body>
</html>
Well, I played with the CSS a little... tweaked some things. And I found that this did the job-
<style>
.esri-view {
z-index: -1;
position: absolute;
}
</style>
full example-
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<!-- <link rel="stylesheet" href="main.css"> -->
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<!-- <script src="main.js"></script> -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
.esri-view {
z-index: -1;
position: absolute;
}
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
<script>
require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new SceneView({
container: "sceneContainer", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
});
</script>
</body>
</html>
I am using algolia autocomplete in my app. And I would like to build a search bar that expands like the expandable example on this page. I have a layout with a header bar that has a search input for bigger screens. On small screens I only have a magnifying glass icon, that on click toggles another header with a search bar, that I initially have it hidden. Here is the fiddle, which I wasn't able to get working, but hope it can still give you some overview. This is the layout:
<header class="mdc-toolbar mdc-toolbar--fixed toolbar--custom">
<div class="mdc-toolbar__row">
<section class="menu mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section">
<form action="/search" method="get" class="search-field-desktop">
<div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon autocomplete-search-field">
<i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
<input name="q"
type="text"
class="mdc-text-field__input search-input-js aa-input-search"
placeholder="Search for players and videos ..."
aria-label="Full-Width Text Field">
</div>
</form>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
search
more_vert
</section>
</div>
</header>
<header class="search-field-phone mdc-toolbar mdc-toolbar--fixed toolbar--custom">
<div class="mdc-toolbar__row">
<a id="search-input-close" class="material-icons mdc-toolbar__menu-icon" tabindex="0">arrow_back</a>
<form action="/search" method="get">
<div class="mdc-text-field mdc-text-field--box autocomplete-search-field">
<input name="q"
type="text"
class="mdc-text-field__input search-input-js aa-input-search"
placeholder="Search for players and videos ..."
aria-label="Full-Width Text Field"
autofocus>
</div>
</form>
</div>
</header>
The problem I have is that the dropdown menu is not visible on small screens for some reason and on bigger screens it is. This is the scss/css:
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
height: 100%;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 0;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
display: block;
width: 100%;
height: 72px;
clear: both;
.mdc-list-item {
height: 72px;
}
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 30px;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration,
.aa-input-search::-webkit-search-cancel-button,
.aa-input-search::-webkit-search-results-button,
.aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
.toolbar--custom {
color: $white;
.mdc-toolbar__row {
min-height: 56px;
}
form, .autocomplete-search-field {
width: 100%;
}
.mdc-text-field--box:not(.mdc-text-field--upgraded) {
height: 36px;
}
.mdc-text-field--box {
overflow: visible;
margin: auto;
.mdc-text-field__icon {
bottom: 8px;
font-size: 22px;
}
}
.mdc-text-field--box:after,
.mdc-text-field--box:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#search-input-open {
display: none;
}
#media only screen and (max-width: 782px) {
#search-input-open {
display: block;
}
.search-field-desktop {
display: none;
}
}
}
.search-field-phone {
clip-path: circle(0%);
visibility: hidden;
.mdc-text-field {
clip-path: circle(0%);
}
}
#mixin search-animated-open {
-webkit-animation: open 0.3s forwards;
animation: open 0.3s forwards;
animation-timing-function: $mdc-animation-standard-curve-timing-function;
}
#mixin search-animated-close {
-webkit-animation: close 0.3s forwards;
animation: close 0.3s forwards;
animation-timing-function: $mdc-animation-standard-curve-timing-function;
}
.search-field-phone-open, {
visibility: visible;
#include search-animated-open;
.mdc-text-field {
#include search-animated-open;
}
}
.search-field-phone-close, {
#include search-animated-close;
.mdc-text-field {
#include search-animated-close;
}
}
#keyframes open {
from {
clip-path: circle(0 at calc(100% - 68px) 50%);
}
to {
clip-path: circle(150% at calc(100% - 68px) 50%);
}
}
#keyframes close {
from {
clip-path: circle(150% at calc(100% - 68px) 50%);
}
to {
clip-path: circle(0 at calc(100% - 68px) 50%);
visibility: hidden;
}
}
The layout of the whole page looks like this:
<div id="app">
#include('layouts.partials.sidebar')
#include('layouts.partials.navigation')
<div class="page-content">
#yield('content')
</div>
</div>
Where the navigation partial is the file with headers shown above. This is the sidebar partial:
<aside class="mdc-drawer mdc-drawer--temporary mdc-typography">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content">
Header here
</div>
</header>
<nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
</a>
</nav>
</nav>
</aside>
This is the css for the page:
body {
margin: 0;
}
#app {
display: flex;
}
.page-content {
display: inline-flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
}
I am not sure what is causing this behaviour, why is the dropdown menu for bigger screens visible, and the one for smaller screens not?
Update
I have noticed that when I have opened search input on small screens, if I remove the search-field-phone-open then the dropdown menu is visible, I am not sure what is in that class causing that the dropdown is not visible?
.search-field-phone-open, {
visibility: visible;
#include search-animated-open;
.mdc-text-field {
#include search-animated-open;
}
}
I am not sure I understood what you need but check the snippet below:
var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
var index = client.initIndex('contacts');
$('.input-search').autocomplete({ hint: false }, [
{
source: function(searchBar, cb) {
index.search(searchBar, { hitsPerPage: 5 }, function(error, content) {
if (error) {
cb([]);
return;
}
cb(content.hits, content);
});
},
displayKey: 'name',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.name.value;
}
}
}
]);
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
height: 100%;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.mdl-textfield {
margin: -20px !important;
}
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/material-components-web#0.8.0/dist/material-components-web.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
<script src="https://unpkg.com/material-components-web#0.8.0/dist/material-components-web.min.js"></script>
<header class="mdc-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="site-search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input input-search" name="searchBar" type="search" id="site-search" />
<label class="mdl-textfield__label" for="site-search">Search</label>
</div>
</div>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
Custom icon
</section>
</div>
</header>
Hope this helps you.
References
I referred to mdc-toolbar available on GitHub.
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>