https://github.com/medsagou/intro-section-with-dropdown-navigation
https://github.com/medsagou/intro-section-with-dropdown-navigation
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/medsagou/intro-section-with-dropdown-navigation
- Owner: medsagou
- Created: 2022-08-05T11:10:36.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-05T11:50:50.000Z (about 3 years ago)
- Last Synced: 2025-01-03T19:26:56.659Z (9 months ago)
- Language: CSS
- Size: 466 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Intro section with dropdown navigation solution
This is a solution to the [Intro section with dropdown navigation challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5). .
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
- View the optimal layout for the content depending on their device's screen size
- See hover states for all interactive elements on the page
### Screenshot
### Links
- Solution URL: [https://github.com/medsagou/intro-section-with-dropdown-navigation.git](https://github.com/medsagou/intro-section-with-dropdown-navigation.git)
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
## My process
no process just keep going when you get stuck.
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Next.js](https://nextjs.org/) - React framework
- [Styled Components](https://styled-components.com/) - For styles
- [Modern css reset](https://piccalil.li/blog/a-modern-css-reset/) - piccalil
### What I learned
```html
```
```css
@media (hover: hover) {
/* hover things */
.learn-more-button{
border: 2px solid transparent;
}
.login-desktop:hover {
color: var(--neutral-300);
}
.register-desktop:hover{
border: .15em solid var(--neutral-300);
color: var(--neutral-300)
}
.main-container-menu ul li a:hover {
color: var(--neutral-300);
}
.learn-more-button:hover{
background-color: var(--neutral-100);
color: var(--neutral-300);
border: 2px solid var(--neutral-200);
}
}
```
```js
// variable for desktop
const features = document.getElementById("features-button");
const company = document.getElementById("company-button");
const drpDownOne = document.getElementById("drop-down-one");
const drpDownTwo = document.getElementById("drop-down-two");
// variable for mobile
const menuBtn = document.getElementById("menu-botton");
const closeBtn = document.getElementById("close-menu-botton");
const menuContainer = document.getElementById("main-container-menu");
const imgCloseOpenMenuOneDown = document.getElementById("close-open-img1-down");
const imgCloseOpenMenuOneUp = document.getElementById("close-open-img1-up");
const imgCloseOpenMenuTwoUp = document.getElementById("close-open-img2-up");
const imgCloseOpenMenuTwoDown = document.getElementById("close-open-img2-down");
// var width = window.matchMedia("(min-width: 600px)")
// function for dekstop
features.addEventListener('click',function() {
const test = features.getAttribute('area');
if (test=='false'){
drpDownOne.style.display = 'block';
features.setAttribute('area','true');
imgCloseOpenMenuOneDown.style.display='none';
imgCloseOpenMenuOneUp.style.display='block';
imgCloseOpenMenuTwoDown.style.display='block';
imgCloseOpenMenuTwoUp.style.display='none';
drpDownTwo.style.display = 'none';
company.setAttribute('area','false');
} else {
imgCloseOpenMenuOneDown.style.display='block';
imgCloseOpenMenuOneUp.style.display='none';
drpDownOne.style.display = 'none';
features.setAttribute('area','false');
}
});
company.addEventListener('click',function() {
const test = company.getAttribute('area');
if (test=='false'){
drpDownTwo.style.display = 'block';
company.setAttribute('area','true');
imgCloseOpenMenuTwoDown.style.display='none';
imgCloseOpenMenuTwoUp.style.display='block';
imgCloseOpenMenuOneDown.style.display='block';
imgCloseOpenMenuOneUp.style.display='none';
drpDownOne.style.display = 'none';
features.setAttribute('area','false');
} else {
imgCloseOpenMenuTwoDown.style.display='block';
imgCloseOpenMenuTwoUp.style.display='none';
drpDownTwo.style.display = 'none';
company.setAttribute('area','false');
}
});
window.addEventListener('click', function(e){
if (!features.contains(e.target) & !company.contains(e.target)){
drpDownOne.style.display = 'none';
features.setAttribute('area','false');
drpDownTwo.style.display = 'none';
company.setAttribute('area','false');
imgCloseOpenMenuTwoDown.style.display='block';
imgCloseOpenMenuTwoUp.style.display='none';
imgCloseOpenMenuOneDown.style.display='block';
imgCloseOpenMenuOneUp.style.display='none';
}
});
// functions for mobile
menuBtn.addEventListener('click', function() {
menuContainer.style.display='block';
})
closeBtn.addEventListener('click', function() {
menuContainer.style.display='none';
})
window.addEventListener('click',function(e){
if (!menuContainer.contains(e.target) & !menuBtn.contains(e.target)){
menuContainer.style.display='none';
imgCloseOpenMenuTwoDown.style.display='block';
imgCloseOpenMenuTwoUp.style.display='none';
imgCloseOpenMenuOneDown.style.display='block';
imgCloseOpenMenuOneUp.style.display='none';
}
})
```
### Continued development
My first project with menu, Im so glad for finishing this work. Specialy the mobile version with the side menu on the right.
### Useful resources
- [W3schools](https://www.w3schools.com/) - This helped me for javaScript eventListener. I really liked this pattern and will use it going forward.
- [stackoverflow](https://stackoverflow.com/) - this website help me on the javascript when i get stock.
## Author
- Website - [Mohamed Sagou](https://github.com/medsagou)
- Frontend Mentor - [@medsagou](https://www.frontendmentor.io/profile/medsagou)
- Twitter - [@sagoumohamed](https://www.twitter.com/sagoumohamed)
## Acknowledgments
nothing for this project.
List
Calendar
Reminders
Planning