Skip to content

Commit b7f1ca4

Browse files
fullstackNRJfullstackNRJ
committed
day 27
1 parent 7701da0 commit b7f1ca4

File tree

8 files changed

+273
-0
lines changed

8 files changed

+273
-0
lines changed

‎each day build day!/Day 27/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Cool dropdown menu
2+
3+
You know how most of the dropdowns behave, they have same size and design and are mostly boring. Today, I tried to create a different kind of dropdowm menu using plain JS, html & css. It changes its size depending on the content or te items that are present in the list.
4+
5+
The idea is simple to have a small div follow your cursor all along and only display when you hover over the list or the items and cover their content.
6+
7+
# Challenges
8+
- CSS3 styling
9+
- window.offset
10+
- getBoundingClientRect()
11+
- mouse eventlistener

‎each day build day!/Day 27/four.png

667 KB
Loading

‎each day build day!/Day 27/index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Fancy DropDown 💧 </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<nav class="top">
11+
<div class="dropdownBackground">
12+
<span class="arrow"></span>
13+
</div>
14+
15+
<ul class="cool">
16+
<li>
17+
<a href="#">About Me</a>
18+
<div class="dropdown dropdown1">
19+
<div class="bio">
20+
<img src="">
21+
<p>Neeraj, loves web development. He expertizes in things like JavaScript, CSS and Microservices, also TT. Wait. TT isn't part of web development.</p>
22+
</div>
23+
</div>
24+
</li>
25+
<li>
26+
<a href="#">Projects</a>
27+
<ul class="dropdown courses">
28+
<li>
29+
<span class="code">RY</span>
30+
<a href="">Get Rated yourself</a>
31+
</li>
32+
<li>
33+
<span class="code">HDGB</span>
34+
<a href="">HotDog browser</a>
35+
</li>
36+
<li>
37+
<span class="code">GID</span>
38+
<a href="">Get It Delivered</a>
39+
</li>
40+
<li>
41+
<span class="code">STF</span>
42+
<a href="">Shorten Text Files</a>
43+
</li>
44+
<li>
45+
<span class="code">WTF</span>
46+
<a href="">What The Food?!</a>
47+
</li>
48+
<li>
49+
<span class="code">SYG</span>
50+
<a href="">Select your Grid</a>
51+
</li>
52+
<li>
53+
<span class="code">TTTT</span>
54+
<a href="">Tic Tac Toe Tor</a>
55+
</li>
56+
<li>
57+
<span class="code">WCLI</span>
58+
<a href="">Web CLI</a>
59+
</li>
60+
<li>
61+
<span class="code">MMD</span>
62+
<a href="">Master Microservices Design</a>
63+
</li>
64+
</ul>
65+
</li>
66+
<li>
67+
<a href="#">Other Links</a>
68+
<ul class="dropdown dropdown3">
69+
<li><a class="button" href="">Twitter</a></li>
70+
<li><a class="button" href="">Facebook</a></li>
71+
<li><a class="button" href="">Blog</a></li>
72+
</ul>
73+
</li>
74+
</ul>
75+
</nav>
76+
77+
78+
<script src="main.js"></script>
79+
</body>
80+
</html>

‎each day build day!/Day 27/main.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
const triggers = document.querySelectorAll('.cool > li'); // hover area complete li
3+
const background = document.querySelector('.dropdownBackground');
4+
const nav = document.querySelector('.top');
5+
6+
function mouseEnter(){
7+
//first add the class to the <li></li>
8+
this.classList.add('trigger-enter');
9+
//load content only if 'trigger-enter exits
10+
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
11+
//then add open class to background div (this class has opacity 1)
12+
background.classList.add('open');
13+
14+
//get the coords for enclosing nav and dropdown
15+
const dropdown = this.querySelector('.dropdown'); // not querySelectorAll because we want one at a time
16+
const dropdownCoords = dropdown.getBoundingClientRect();
17+
const navCoords = nav.getBoundingClientRect();
18+
19+
const divCoords = {
20+
height: dropdownCoords.height, //match the content height width
21+
width: dropdownCoords.width,
22+
top: dropdownCoords.top - navCoords.top,
23+
left: dropdownCoords.left - navCoords.left
24+
}
25+
26+
background.style.setProperty('height',`${divCoords.height}px`)
27+
background.style.setProperty('width', `${divCoords.width}px`)
28+
background.style.setProperty('transform',`translate(${divCoords.left}px,${divCoords.top}px)`)
29+
30+
}
31+
32+
function mouseLeave(){
33+
//remove classes
34+
this.classList.remove('trigger-enter', 'trigger-enter-active');
35+
background.classList.remove('open');
36+
}
37+
38+
39+
triggers.forEach(trigger => trigger.addEventListener('mouseenter',mouseEnter))
40+
triggers.forEach(trigger => trigger.addEventListener('mouseleave',mouseLeave))

‎each day build day!/Day 27/one.png

671 KB
Loading

‎each day build day!/Day 27/style.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
html {
2+
box-sizing: border-box;
3+
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
4+
}
5+
6+
*, *:before, *:after {
7+
box-sizing: inherit;
8+
}
9+
10+
body {
11+
margin: 0;
12+
min-height: 100vh;
13+
background:
14+
linear-gradient(45deg, rgb(76, 196, 243) 0%, hsla(340, 100%, 55%, 0) 70%),
15+
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
16+
linear-gradient(225deg, rgb(13, 93, 242) 10%, hsla(140, 90%, 50%, 0) 80%),
17+
linear-gradient(315deg, rgb(61, 195, 236) 100%, hsla(35, 95%, 55%, 0) 70%);
18+
}
19+
20+
h2 {
21+
margin-top: 0;
22+
padding-top: .8em;
23+
}
24+
25+
nav {
26+
position: relative;
27+
perspective: 600px;
28+
}
29+
30+
.cool > li > a {
31+
color: rgb(238, 238, 227);
32+
text-decoration: none;
33+
font-size: 20px;
34+
background: rgba(0,0,0,0.2);
35+
padding: 10px 20px;
36+
display: inline-block;
37+
margin: 20px;
38+
border-radius: 5px;
39+
}
40+
41+
nav ul {
42+
list-style: none;
43+
margin: 0;
44+
padding: 0;
45+
display: flex;
46+
justify-content: center;
47+
}
48+
49+
.cool > li {
50+
position: relative;
51+
display: flex;
52+
justify-content: center;
53+
}
54+
55+
.dropdown {
56+
opacity: 0;
57+
position: absolute;
58+
overflow: hidden;
59+
padding: 20px;
60+
top: -20px;
61+
border-radius: 2px;
62+
transition: all 0.5s;
63+
transform: translateY(100px);
64+
will-change: opacity;
65+
display: none;
66+
}
67+
68+
.trigger-enter .dropdown {
69+
display: block;
70+
}
71+
72+
.trigger-enter-active .dropdown {
73+
opacity: 1;
74+
}
75+
76+
.dropdownBackground {
77+
width: 100px;
78+
height: 100px;
79+
position: absolute;
80+
background: #fff;
81+
border-radius: 4px;
82+
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);
83+
transition: all 0.3s, opacity 0.1s, transform 0.2s;
84+
transform-origin: 50% 0;
85+
display: flex;
86+
justify-content: center;
87+
opacity: 0;
88+
}
89+
90+
.dropdownBackground.open {
91+
opacity: 1;
92+
}
93+
94+
.arrow {
95+
position: absolute;
96+
width: 20px;
97+
height: 20px;
98+
display: block;
99+
background: white;
100+
transform: translateY(-50%) rotate(45deg);
101+
}
102+
103+
.bio {
104+
min-width: 500px;
105+
display: flex;
106+
justify-content: center;
107+
align-items: center;
108+
line-height: 1.7;
109+
}
110+
111+
.bio img {
112+
float: left;
113+
margin-right: 20px;
114+
}
115+
116+
.courses {
117+
min-width: 300px;
118+
}
119+
120+
.courses li {
121+
padding: 10px 0;
122+
display: block;
123+
border-bottom: 1px solid rgba(0,0,0,0.2);
124+
}
125+
126+
.dropdown a {
127+
text-decoration: none;
128+
color: #f1efe7;
129+
}
130+
131+
a.button {
132+
background: black;
133+
display: block;
134+
padding: 10px;
135+
color: white;
136+
margin-bottom: 10px;
137+
}
138+
139+
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
140+
.button[href*=twitter] { background: #019FE9; }
141+
.button[href*=facebook] { background: #3B5998; }
142+
.button[href*=courses] { background: #ffc600; }

‎each day build day!/Day 27/three.png

631 KB
Loading

‎each day build day!/Day 27/two.png

632 KB
Loading

0 commit comments

Comments
 (0)