---
title: "Discussion on \"How to make blob menu using HTML, CSS and JavaScript\" | Hashnode"
description: "Discussion on \"How to make blob menu using HTML, CSS and JavaScript\". This blog posts describes how to create a menu with cool animations."
url: "https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to make blob menu using HTML, CSS and JavaScript](https://yosracodes.hashnode.dev/blob-menu?utm_source=hashnode&utm_medium=feed)

This blog posts describes how to create a menu with cool animations.

Nov 19, 2021 · 5 min read · yosracodes.hashnode.dev  
Read the article

-   [#html5](https://hashnode.com/tag/html5)
-   [#html](https://hashnode.com/tag/html)
-   [#css](https://hashnode.com/tag/css)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#css-animation](https://hashnode.com/tag/css-animation)

## Written by

[Yosra Emad](https://hashnode.com/@yosracodes)

@yosracodes

  
[View profile](https://hashnode.com/@yosracodes)

A software engineering student

## Responses 21

Markdown supported · ⌘↵ to post

[FNAF](https://hashnode.com/@fnafgo)

[Sep 6, 2022](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6316ebd8360c57fcaa77d92c)

This is a very good article I have ever read. The information you gave was [moviedle](https://moviedle.io/) [quordle](https://quordlegame.io/) great and I learned a lot from you. I want to see the live version?

[Mike Shake](https://hashnode.com/@Moke)

[Feb 17, 2022](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/620e8439d589905b4129101a)

I have a question which is how can i highlight my code in my portfolio blog??

[MrakCw](https://hashnode.com/@MrakCw)

[Jan 31, 2022](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/61f84d309030330a7b25a3be)

Nice work 👍 but semantic tags would be better)) .nav > nav & div > ul & li + a 😝 🤙🧑‍💻

[Andrew Baisden](https://hashnode.com/@andrewbaisden)

[Dec 4, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/61abae98a375fb2266f3d3c7)

That design is ace 🔥

[Ajeet Yadav](https://hashnode.com/@ajeetyadav)

[Nov 24, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619da3091a07d7765ae864b2)

It's really 🆒

[Mohamed Mohamud](https://hashnode.com/@codewithmohamed)

[Nov 23, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619ce7d6fa52cd31fe52c837)

This is a comprehensive guide on how to make the blob menu. Excited to put this into action, thank you for the guide Yosra!

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 23, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619ce7d6fa52cd31fe52c837#reply-619cffb4fa52cd31fe52ca68)

thank you so much! would love to see your results!

[Ygritte tully](https://hashnode.com/@Yggy)

[Nov 22, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619c25413d02a57359808d64)

Wow. Great!!

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 23, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619c25413d02a57359808d64#reply-619cff9c06cdc0324d91486f)

thank you!

[Mudita](https://hashnode.com/@shapemyskillsofficia)

[Nov 22, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619b58e35bb9cc256fc6bf36)

Great tutorial. Thank for sharing

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 22, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619b58e35bb9cc256fc6bf36#reply-619b5abb5bb9cc256fc6bfab)

thank you so much!

[Shad Mirza](https://hashnode.com/@iamshadmirza)

[Nov 22, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619b2fe95bb9cc256fc6bb76)

This is cool. Bookmarked

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 22, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619b2fe95bb9cc256fc6bb76#reply-619b5ab15bb9cc256fc6bfa4)

thank you!

[Daniel Cranney](https://hashnode.com/@danielcranney)

[Nov 21, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619aae975bb9cc256fc6b30a)

Yosra, you genius! What a great component and a brilliant article to go with it.

Fantastic work!! 👏👏👏

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 21, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619aae975bb9cc256fc6b30a#reply-619adcccdf376a260c58ac3e)

thank you for your kind words Daniel!

[Amer Sikira](https://hashnode.com/@amersikira)

[Nov 21, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619a584a5bb9cc256fc6accc)

Love the article Yosra. Real comprehensive guide on how to create blob menu. 👏

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 21, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619a584a5bb9cc256fc6accc#reply-619adc9fdf376a260c58ac3a)

thank you!!

[Moustapha](https://hashnode.com/@Moustapha)

[Nov 21, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6199e909df376a260c589b92)

Great work Yosra. It looks awesome though there is no live version for viewing the code pen, but may allah give you energy to achieve more

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 21, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6199e909df376a260c589b92#reply-619a358ddf376a260c58a0e1)

thank you so much! your words mean a lot to me :D

[Roel Magdaleno](https://hashnode.com/@roelmagdaleno)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619953065bb9cc256fc69db9)

That menu looks creative, thanks for your guide.

The only thing that concerns me is the use of `@import`, which is bad for performance because slows down the initial render.

Check these links explaining that:

[gtmetrix.com/avoid-css-import.html](https://gtmetrix.com/avoid-css-import.html)

[csswizardry.com/2018/11/css-and-network-performan…](https://csswizardry.com/2018/11/css-and-network-performance/)

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 21, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619953065bb9cc256fc69db9#reply-619a357cdf376a260c58a0dd)

thanks! I only used it to get a new font :) It only downloads one font and there is no other way to get that font in codepen other than that :)

[Roel Magdaleno](https://hashnode.com/@roelmagdaleno)

[Nov 22, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619953065bb9cc256fc69db9#reply-619b023e5bb9cc256fc6b7b1)

[Yosra Emad](https://hashnode.com/posts/blob-menu/@yosracodes) Yes you can, just go to your HTML settings and insert your font links, like this:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637548524534/sg2hcBtTp.png)

:)

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 22, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619953065bb9cc256fc69db9#reply-619b5a995bb9cc256fc6bf9f)

[Roel Magdaleno](https://hashnode.com/@roelmagdaleno) i didnt know that! i thought it wasnt available in codepen to add things in the head tag! thank you so much for telling me!

[Davi Santos](https://hashnode.com/@DaviSantos)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6198d8da5bb9cc256fc69577)

Nossa isso ficou ótimo, já tenho ate umas ideias para implementar. Obrigado.

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6198d8da5bb9cc256fc69577#reply-61990c96df376a260c58903f)

thank you! (i translated this haha)

[Ayodele Samuel Adebayo](https://hashnode.com/@unclebigbay)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6198b4f6df376a260c588919)

Lovely, thanks for sharing !!!

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6198b4f6df376a260c588919#reply-61990c445bb9cc256fc699a7)

thank you for reading!

[Yuri](https://hashnode.com/@YuriCodesBot)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6198acf1df376a260c58885e)

Great tutorial, Yosra! So well explained i can't wait to put this to practice! Thank you for sharing :)

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6198acf1df376a260c58885e#reply-61990c36df376a260c589038)

thank you for your kind words Yuri!

[Akebu](https://hashnode.com/@akebu6)

[Nov 19, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619809ec5bb9cc256fc68946)

The blob is amazing, this is cute and creative 😊

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/619809ec5bb9cc256fc68946#reply-61990c265bb9cc256fc6999f)

thank you so much Akebu!

[Mansour Koura](https://hashnode.com/@koura)

[Nov 19, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/61980349df376a260c587ece)

That's fantastic Yosra! but why I can't see Live-version?

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/61980349df376a260c587ece#reply-61990c165bb9cc256fc69998)

ahh! I'm sorry I forgot to add the codepen link in the blog, you can find it here: [codepen.io/yosraemad/pen/GRvBrxR](https://codepen.io/yosraemad/pen/GRvBrxR)

[Sumudu Siriwardana](https://hashnode.com/@sumudusiriwardana)

[Nov 19, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6197e091df376a260c587ce4)

I love this blob menu. And this is a comprehensive guide on how to create!

[Yosra Emad](https://hashnode.com/@yosracodes)

[Nov 20, 2021](https://hashnode.com/posts/blob-menu/6197cb955bb9cc256fc68508/comment/6197e091df376a260c587ce4#reply-61990bd3df376a260c58902d)

thank you so much Sumudu! I'm glad you liked it!