Skip to content

Commit

Permalink
Added a dropdown functionality
Browse files Browse the repository at this point in the history 
committed changes to the existing follow-along navigation bar by adding additional functionality of dropdown animation. dropdown animation works only when the mouse is moved from the top of the navigation bar to the navigation link. for the rest of the mouse movement, the previously designed follow-along is followed.
  • Loading branch information
@karun2001
karun2001 committed Oct 28, 2023
1 parent 7c04fd5 commit 752c322
Show file tree
Hide file tree
Showing 2 changed files with 313 additions and 0 deletions.
151 changes: 151 additions & 0 deletions 26 - Stripe Follow Along Nav/DROPDOWN_index copy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Follow Along Nav</title>
<link rel="stylesheet" href="DROPDOWN_style.css" />
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>

<h2>Cool</h2>
<nav class="top">
<div class="dropdownBackground">
<span class="arrow"></span>
</div>

<ul class="cool">
<li>
<a href="#">About Me</a>
<div class="dropdown dropdown1">
<div class="bio">
<img src="https://logo.clearbit.com/wesbos.com">
<p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!</p>
</div>
</div>
</li>
<li>
<a href="#">Courses</a>
<ul class="dropdown courses">
<li>
<span class="code">RFB</span>
<a href="https://ReactForBeginners.com">React For Beginners</a>
</li>
<li>
<span class="code">ES6</span>
<a href="https://ES6.io">ES6 For Everyone</a>
</li>
<li>
<span class="code">NODE</span>
<a href="https://LearnNode.com">Learn Node</a>
</li>
<li>
<span class="code">STPU</span>
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
</li>
<li>
<span class="code">WTF</span>
<a href="http://Flexbox.io">What The Flexbox?!</a>
</li>
<li>
<span class="code">GRID</span>
<a href="https://CSSGrid.io">CSS Grid</a>
</li>
<li>
<span class="code">LRX</span>
<a href="http://LearnRedux.com">Learn Redux</a>
</li>
<li>
<span class="code">CLPU</span>
<a href="http://CommandLinePowerUser.com">Command Line Power User</a>
</li>
<li>
<span class="code">MMD</span>
<a href="http://MasteringMarkdown.com">Mastering Markdown</a>
</li>
</ul>
</li>
<li>
<a href="#">Other Links</a>
<ul class="dropdown dropdown3">
<li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
<li><a class="button" href="http://wesbos.com">Blog</a></li>
<li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
</ul>
</li>
</ul>
</nav>

<div class="ele"></div>
</body>
<script>
const triggers = document.querySelectorAll(".cool > li")
const background = document.querySelector(".dropdownBackground");
const nav = document.querySelector('nav');
const navCoords = nav.getBoundingClientRect();

let aboveNav = false;
let find = true;

function handleEnter(e){
console.log("entered stop finding");
find = false;
this.classList.add("trigger-enter");
setTimeout(()=>{
if(this.classList.contains("trigger-enter"))
{ this.classList.add("trigger-enter-active") }
}, 150);
background.classList.add("open");

const dropdown = this.querySelector(".dropdown");
const dropdownCoords = dropdown.getBoundingClientRect();

const coords = {
height: dropdownCoords.height ,
width: dropdownCoords.width,
top: dropdownCoords.top - navCoords.top,
left: dropdownCoords.left - navCoords.left
}
background.style.setProperty("height",`${coords.height}px`);
background.style.setProperty("width", `${coords.width}px`);



if(aboveNav){

document.documentElement.style.setProperty(`--dropdown-left`,`${coords.left}px`);
document.documentElement.style.setProperty(`--dropdown-top`,`${coords.top}px`);
background.classList.add("animateDown");
background.style.setProperty("transform", `translate(${coords.left}px, ${coords.top}px)`);
}
else{
background.style.setProperty("transform", `translate(${coords.left}px, ${coords.top}px)`);
}
}

function handleLeave(){
console.log("LEAVE..");
this.classList.remove("trigger-enter", "trigger-enter-active");
background.classList.remove("open");
background.classList.remove("animateDown");
find = true;
}
function mousePosition(e){
if(find){
if(e.y < navCoords.top){
aboveNav = true;
}
else{
aboveNav = false;
}
}
console.log(aboveNav);
}

document.querySelector("body").addEventListener('mousemove', mousePosition)
triggers.forEach(trigger => trigger.addEventListener('mouseenter',handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave',handleLeave));
</script>
</html>
162 changes: 162 additions & 0 deletions 26 - Stripe Follow Along Nav/DROPDOWN_style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
html {
box-sizing: border-box;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}

*, *:before, *:after {
box-sizing: inherit;

}
:root{
--dropdown-left: 0;
--dropdown-top: 0;
}
body {
margin: 0;
min-height: 100vh;
background:
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
perspective: 1800px;
}

h2 {
margin-top: 0;
padding-top: .8em;
}

nav {
position: relative;
perspective: 600px;
}

.cool > li > a {
color: yellow;
text-decoration: none;
font-size: 20px;
background: rgba(0,0,0,0.2);
padding: 10px 20px;
display: inline-block;
margin: 20px;
border-radius: 5px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

.cool > li {
position: relative;
display: flex;
justify-content: center;
}

.dropdown {
opacity: 0;
position: absolute;
overflow: hidden;
padding: 20px;
top: -20px;
border-radius: 2px;
transition: all 0.5s;
transform: translateY(100px);
will-change: opacity;
display: none;
}

.trigger-enter .dropdown {
display: block;
}

.trigger-enter-active .dropdown {
opacity: 1;
}

.dropdownBackground {
width: 100px;
height: 100px;
position: absolute;
background: #fff;
border-radius: 4px;
box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
transition: all 0.3s, opacity 0.1s, transform 0.2s;
transform-origin: 50% 0;
transform : rotateX('45deg');
display: flex;
justify-content: center;
opacity:0;
}

.dropdownBackground.open{
opacity: 1;
}

.arrow {
position: absolute;
width: 20px;
height: 20px;
display: block;
background: white;
transform: translateY(-50%) rotate(45deg);
}

.bio {
min-width: 500px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.7;
}

.bio img {
float: left;
margin-right: 20px;
}

.courses {
min-width: 300px;
}

.courses li {
padding: 10px 0;
display: block;
border-bottom: 1px solid rgba(0,0,0,0.2);
}

.dropdown a {
text-decoration: none;
color: #ffc600;
}

a.button {
background: black;
display: block;
padding: 10px;
color: white;
margin-bottom: 10px;
}

/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
.button[href*=twitter] { background: #019FE9; }
.button[href*=facebook] { background: #3B5998; }
.button[href*=courses] { background: #ffc600; }


.animateDown{
animation: movedown 0.3s ease 1;
animation-fill-mode: forwards;
}
@keyframes movedown{
0%{
transform: translate(var(--dropdown-left), calc(var(--dropdown-top) - 20px));
}
100%{
transform : translate(var(--dropdown-left), var(--dropdown-top));
}
}

0 comments on commit 752c322

Please sign in to comment.