News Homepage - Vanilla CSS (Burger Menu CSS ONLY) 🍔

Community feedback

• 

  James•160

  @jamescheinPosted about 2 years ago

  Lovey stuff. All the extra touches make yours an interesting extended challenge tutorial. I was struggling to use :hover pseudo to create a toggle to no avail - of course an input element is a good solution for this job of a CSS toggle. Although, I am still wondering if there is any way to use a button element as a toggle in CSS for a maybe more elegent and semantically solid solution?

  May I recommend a link around all the individual news or second-level story blocks content and fixing them up so when you roll over any part of a story the headline is highlighted and a click anywhere on the story will take you to the associated page.

  Many thanks. Very useful.

  Marked as helpful

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @jameschein Hey James, thanks for the time spent writing this feedback! The input element is cool, but I've used it due my lack of knowledge of JS. Many of my previous solution I tried to implement a lots of things that are 100% easier with JS without CSS tricks, now I decided to finally study JS and stop to struggle to do complex things with CSS that are easier with JS.

  About the story blocks I'll apply your suggestions ASAP, I wasn't thinking about that. Thank you for the tip!

  Have a nice day James. Keep it up =)

  1
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Oi Lucas, de boa?

  Parabéns por completar esse desafio man, ficou muito bom gostei dos detalhes do burguer menu auahuhauh ficou realmente muito bom! agora eu consegui entender como você fez ele com o input, muito criativo auahuahu

  Uma dica se você quiser adicionar uma animação bem simples, no menu, podemos fazer isso:

  .menu {
      /* display: none; */
      visibility: hidden;
      width: 0;
      height: 0;
      transition: 0.8s;
      opacity: 0%;
  }
  

  e quando estiver ativo:

  .menu-btn:checked~.menu {
      width: 180px;
      height: 240px;
      opacity: 90%;
      visibility: visible;
      /* display: flex; */
  }
  

  o resto esta otimo!

  espero que ajude... 👍

  Marked as helpful

  0

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @AdrianoEscarabote Valeu! Chegou a hora de aprender JS pra parar de fazer essas maracutaias com CSS hahahaha

  1
• 

  Jorge pereira•230

  @jorgealves-bPosted about 2 years ago

  Is perfect ! I can't join flex-box with grid. I need to study more, but there's something that makes me pensive... a lot is said about semantics, but people use a lot of divs and classes.

  this challenge I only managed to do the mobile version, it's frustrating.

  Marked as helpful

  0
• 

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted about 2 years ago

  Bro how did you do your menu bar without js?

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @chukwudobe-Micah Hey my friend! I've used an input under the burger image that activates the menu. Check my repository and you'll see inside the html the <input> and inside the css the activation on click that shows and hides menu.

  =)

  0

  

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted about 2 years ago

  @correlucas okay then, thanks a lot. Also, I've been meaning to ask a question. On your testimonial grid solution (web view) I saw that if you over a container, the rest of the containers blurred, I've been meaning to ask how you pulled that off? How did an action in a container affect the other containers and the whole body?

  0