Skip to content

Commit

Permalink
Full menu
Browse files Browse the repository at this point in the history
  • Loading branch information
vickkie committed Mar 2, 2024
1 parent 6f76835 commit 6491112
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 28 deletions.
Binary file added assets/svg/10.2b4ffb11.webp
Binary file not shown.
Binary file added assets/svg/6.bff66b08.webp
Binary file not shown.
Binary file added assets/svg/9.b586fa93.webp
Binary file not shown.
24 changes: 13 additions & 11 deletions css/multi-menu.css
Original file line number Diff line number Diff line change
Expand Up @@ -522,20 +522,17 @@ body {
.reachussvg {
width: 100px;
height: 50px;
transition: translate 0.3s ease;
margin-top: -30px;
}

.menuUzi__item-link:hover .reachussvg {
animation: moveright 3s ease;
.menuUzi__item-link {
display: flex;
align-items: center;
justify-content: center;
}

@keyframes moveright {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(20px);
}
.reachussvg img {
width: 100%;
height: auto;
}

@media screen and (max-width: 767px) {
Expand All @@ -546,3 +543,8 @@ body {
right: 0.5rem;
}
}

.yearnow {
font-size: 2rem;
color: var(--color-bg);
}
31 changes: 15 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -164,9 +164,9 @@ <h2 class="hidcontent__title">Hypercritical</h2>
<div class="menuUzi__item-inner">
<div class="mainmenuUzi">
<a href="index" class="mainmenuUzi__item">Home</a>
<a href="blog" class="mainmenuUzi__item">Blog</a>
<a href="services" class="mainmenuUzi__item">services</a>
<a href="about" class="mainmenuUzi__item">Work</a>
<a href="company" class="mainmenuUzi__item">Company</a>
<a href="studio" class="mainmenuUzi__item">studio</a>
<a href="contact" class="mainmenuUzi__item">Contact</a>
</div>
<p class="label label--topleft label--vert-mirror">the important stuff</p>
Expand All @@ -182,8 +182,8 @@ <h2 class="hidcontent__title">Hypercritical</h2>
<div class="menuUzi__item menuUzi__item--3" data-direction="bt">
<div class="menuUzi__item-inner">
<div class="sidemenuUzi">
<a href="company" class="sidemenuUzi__item" data-cursor="-medium -exclusion">
<span class="sidemenuUzi__item-inner">The Company</span></a
<a href="studio" class="sidemenuUzi__item" data-cursor="-medium -exclusion">
<span class="sidemenuUzi__item-inner">The studio</span></a
>
<a href="about" class="sidemenuUzi__item" data-cursor="-medium -exclusion">
<span class="sidemenuUzi__item-inner">Insights</span></a
Expand All @@ -207,19 +207,18 @@ <h2 class="hidcontent__title">Hypercritical</h2>
<div class="menuUzi__item menuUzi__item--4" data-direction="rl">
<div class="menuUzi__item-inner">
<p class="label label--topleft label--line">Reach us now</p>
<a href="contact" class="menuUzi__item-link"
>Tell your<br /><br />
Idea<br /><br />
<span>
<svg class="reachussvg">
<path d="M0 10h73" stroke="#fff" stroke-width="2"></path>
<path
d="M71.526 0C74.012 4 77.882 7.422 82 10c-4.156 2.539-7.865 6-10.474 10h-2.485c2.608-4 5.744-7.379 9.618-10C74.785 7.34 71.526 4 69 0h2.526zm-6 0C68.013 4 71.884 7.422 76 10c-4.156 2.539-7.865 6-10.474 10H63.04c2.606-4 5.745-7.379 9.617-10C68.786 7.34 65.526 4 63 0h2.526z"
fill="#fff"
></path>
</svg>
</span>
<a href="contact" class="menuUzi__item-link">
<div class="reachussvg">
<img src="assets/svg/10.2b4ffb11.webp" alt="contact button 2" class="contact-emoji" />
<img
src="assets/svg/9.b586fa93.webp"
alt="contact button 2"
class="laugh-emoji"
style="display: none"
/>
</div>
</a>
<div class="yearnow">©2024</div>
</div>
</div>
<div class="menuUzi__item menuUzi__item--5" data-direction="tb">
Expand Down
25 changes: 24 additions & 1 deletion js/main/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ new Promise((resolve, reject) => {
})
.catch((error) => {
console.error("Error loading config:", error);
reject(error); // Reject the promise if there's an error
reject(error); // Reject the promise if there's an error`
});
});
})
Expand All @@ -53,3 +53,26 @@ new Promise((resolve, reject) => {
.catch((error) => {
console.error("Failed to load configuration or assign links:", error);
});

//GRoup 3: animation on hover of contact emoji

document.addEventListener("DOMContentLoaded", () => {
let menuUziItemLink = document.querySelector(".menuUzi__item-link");
let defaultImage = menuUziItemLink.querySelector(".contact-emoji");

let rotateremoji = gsap.timeline();

const rotateemoji = () => {
rotateremoji.to(defaultImage, {
duration: 1,
rotation: -360,
repeat: -1,
ease: "linear",
});
};

menuUziItemLink.addEventListener("mouseover", rotateemoji);
menuUziItemLink.addEventListener("mouseout", () => {
rotateremoji.kill();
});
});

0 comments on commit 6491112

Please sign in to comment.