Responsive Sidebar Menu With SubMenu Using HTML CSS And JavaScript

[@Jopurance]

This channel is probably the most 2021 Design channel I ever seen, you are so good bro please keep it like that you are the only one providing such a good design into code !! If one day you think about making a calendar into code I will be forever thankful Thanks again man !!

[@Bedimcode]

Thank you very much friend, for your words, and it is a pleasure to help. Of course I will take that calendar into account, greetings.

[@creativeminer]

Wow.This sidebar is very beautiful.⭐⭐ Thanks for this video.😘😘

[@Bedimcode]

Thanks for the comment friend, and it is a pleasure, greetings.

[@diegomontenegro8198]

Sin dudas la mejor Sidebar que ví de todas las que encontré en video. Excelente trabajo 👍

[@Bedimcode]

Gracias por el apoyo amigo, saludos.

[@ahangaraadil]

Every step is explained with the cursor and it predicts that creativity is something there behind the person. 👨‍💻

[@Bedimcode]

Thank's my friend regards

[@brennenbaxter3626]

Love the design! Simple and clean

[@Bedimcode]

Thank's my friend regards

[@arunnegi9505]

One of the best channel to enhance your UI skills

[@Bedimcode]

Thank's my friend regards.

[@arunnegi9505]

@@Bedimcode don't forget me when you will get famous

[@CynthiaSotoCaballerolYEAHl]

Love your designs and implementations. Beautiful work as always

[@Bedimcode]

Hi Cynthia, thank you, greetings.

[@denniswilliamsjr5646]

Frickin love this video man 😭

[@Bedimcode]

Thank's my friend regards

[@ghaziabbas3087]

Great Content! 💯 For the design and simplicity mate! One thing I'd like to see in your future videos is that it would be great if you could explain things to us while coding! Get a mic and talk to your audience while you create the wonderful! Looking forward for more amazing content man! Good luck! ❤️

[@Bedimcode]

Thanks friend, one day it will be a friend to explain while I write code, greetings.

[@abubalo]

May God bless you and give you strength to continue making great and impactful tutorials. Amen 🙏

[@Bedimcode]

Thanks friend, same blessings for you

[@nelschannel3207]

Sir thank you so much you've help me with my project i copied your codes thank you much love.

[@rimzzlabs]

awesome video friend! keep it up

[@Bedimcode]

Thanks my friend

[@escanorgod]

Can you create a tutorial how to design a reservation website...love your videos.. please upload more awesome videos like this

[@Bedimcode]

I'll think about it friend, greetings.

[@CreativeTutorialsWeb]

Amazing Video Keep it up

[@Bedimcode]

Thank's my friend regards.

[@CreativeTutorialsWeb]

@@Bedimcode You're welcome😍

[@Бат-АмгаланБ-ю9з]

WoooooW so cool So creative work Gooood luck

[@Bedimcode]

Thank's my friend regards

[@sebwatts6659]

That is awesome. Really like it.

[@Bedimcode]

Thank's my friend Seb, regards.

[@anuj7286]

This is amazing!! 😍

[@Bedimcode]

Thanks friend Anuj, greetings

[@ElegantCoder]

Clean love it 😍

[@Bedimcode]

Thanks friend Elegant Coder.

[@ElegantCoder]

@@Bedimcode most welcome

I want to study like you, where should I study?

[@Bedimcode]

I suggest you study, html from scratch, css from scratch, javascript from scratch and javascrip on the sun, it is the most basic. I recommend you www.w3schools.com/ www.freecodecamp.org/ But I suggest you look for more websites

[@vanshshah2994]

This person needs to teach how to make UI like this that's too good plz. teach how to make UI like this. Amazing video

[@Bedimcode]

Many ask me to teach the user interfaces, but it would be to comfort a whole agenda, since the videos I make are not easy to make, it takes time. I do not promise anything, but I will think about it, regards.

[@vanshshah2994]

Then can you provide some references or materials from where we can learn or you learning to design. Because I started with HTML and CSS but I am still lack Design like this.

[@Bedimcode]

@@vanshshah2994 Sure friend here some Colors copypalette.app/ colors.dopely.top/ colors.eva.design/ Illustrations undraw.co/illustrations www.freepik.es/stories www.drawkit.io/#animals www.manypixels.co/gallery Images www.remove.bg/ www.pexels.com/es-es/ www.freepng.es/ iconos8.es/photos unsplash.com/ Icons ionicons.com/ iconscout.com/ boxicons.com/ fontawesome.bootstrapcheatsheets.com/#

[@zankoahmadi7891]

Hi, this is a great tutorial, but I wish the drop-downs were in JavaScript or jqury, which was activated by clicking and with the touch page or menu

[@Bedimcode]

I wanted to do something different, in my past videos of even sidebar with submenu that when clicking is displayed with javascript, you can implement it friend, greetings.

[@h4nzo692]

Cool 🔥

[@Bedimcode]

Thank's my friend regards

[@ahmadfauzi-ho6zg]

Thanks for sharing this amaizing code, your skill is so cool

[@Bedimcode]

Thanks for the comment friend, greetings.

[@ibrahimhaddad9742]

thank you broo, this is great job

[@Bedimcode]

It is a pleasure friend, greetings

[@carlosenriquecastanedaguti8130]

Hey excelente tutorial, fácil de seguir. Una pregunta: Cuando grabas, ¿ya tienes programado el código en otro monitor y vas transcribiendo, cierto? O lo haces mientras grabas?

[@Bedimcode]

Hola gracias. Si el codigo ya esta escrito cuando grabo. O si no imaginate memorizarlo todo creo que es imposible para cualquiera. Saludos

[@mohammaddori1446]

Thanks for Video (:

[@Bedimcode]

It's a pleasure, greetings

[@xhaiii]

I have a problem when i'm trying to make toggle menu it doesn't show console shows "Cannot read property 'addEventListener' of null" Edit: oops my wrong i forgot to add 'header_toggle' But overall great work nice design and fully functional, :)

[@Bedimcode]

Thank you very much for your comments friend, greetings.

[@souvicksen8918]

Thanks bro ❤️❤️❤️❤️

[@Bedimcode]

It's a pleasure, my friend.

[@vuongqtvn]

Nice tutorial

[@Bedimcode]

Thank's my friend regards

[@kirindev]

thank you

[@sunris3919]

Hello Bedimcode, in a project do you analyzing into a notebook before you program it right?

[@Bedimcode]

When one analyzes in a notebook it is called making a wireframe, I am honest I make the wireframes or more said the structure of a project in a web design tool.

[@sunris3919]

@@Bedimcode tks this help me alot.

[@leonardotelesdealmeida9515]

Te felicito por tu brillante trabajo. ¿Podrías crear un dashboard? ¿por qué no utilizas Bootstrap en tus proyectos?

[@Bedimcode]

Gracias amigo Leonardo, tratare de ponerlo en mi agenda un Dashboard, claro seria con boostrap, se tranbaja mas rapido. Saludos

[@leonardotelesdealmeida9515]

@@Bedimcode muchas gracias

[@RoyBoy-xe4bi]

Brilliant menu structure and design. I watched the video but it is fairly advanced for my basic coding brain. I downloaded the .zip file from GitHub and tried to import into Wordpress as a template, pop-up and plug-in. Nothing worked. Is there any other way I can implement this widget into my site, without building it from scratch? I've spent hundreds of hours searching for a perfectly clean responsive sidebar menu. This is the BEST! Can you help me? Thank you for your time.

[@Bedimcode]

About wordpress I have no knowledge, greetings.

[@kaabemedia]

Waaaaw cool Can I use it as personal

[@Bedimcode]

Thanks friend, of course use it.

[@Deus-lo-Vuilt]

nice good video

[@henrymendeez]

Hey man! Gracias por este video, en realidad haces cosas muy buenas y de calidad! Crees que podrías hacer un video en donde enseñes cómo asignar una clase a un enlace basándose en la página activa? Digamos, doy click a "About us" y este cambia su estilo a uno diferente mientras estoy en la página de "About us".

[@Bedimcode]

Creo que si te entiendo, pero en varios tutoriales, hago esa opcion, que cuando das clic en un enlace esta permanece activa referenciando al enlace que diste clic. Incluso lo hice en este tutorial.

[@henrymendeez]

@@Bedimcode Gracias por la respuesta. Quería preguntarte si sería posible hacer que el menú se expanda al hacer click (en la versión de escritorio) y no cuando está en hover? En otro comentario respondiste pero para un principiante como yo no quedó totalmente claro. Gracias.

[@lstynrn]

best

[@Bedimcode]

Thanks

[@daltonrandall4348]

How do you make it start as open by default?

[@WeCrackAllGames]

What vscode extensions are you using?

[@Bedimcode]

live server, live sass, vscode-icons, svg preview and the theme is f-one-dark. vscodethemes.com/e/sldobri.daily

[@TechnoSG]

U are pro brother 👍👍👍👍 I'm Nooooob

[@Bedimcode]

Thanks friend, we all started from the simplest to the most professional, greetings

[@TechnoSG]

@@Bedimcode Bro Please Make Url Shorten Script

[@shivrajnag12]

Awesome tutorial. Guys anyone has React version of it ?

[@FaizHakim]

owaah, the first comment

[@Bedimcode]

👍

[@SabirKhan-gp1vj]

Great plz creat tha 4 5 pages website

[@Bedimcode]

Thank's my friend regards

[@adarshrathi8265]

I want how you work on js but you don't use

[@leonardotelesdealmeida9515]

Hola, Bedimcode. Vengo decirte que ayer por la noche finalizé este sidebar para crear un dashboard para un proyecto privado que tengo. Te agradezco, una ves más, por tu brillante trabajo. Quiero reportarte un error que encontré en tu código. Este error ocurre solamente en Google Chrome. En el navegador Firefox no pasa nada. Puedes probar ahora mismo si todavía tienes el código. Por ejemplo, si cambias el nombre de la app el el navbar para B-edimcode el navbar no va a tener el comportamiento que tiene en el video. Si pones espacio en blanco tampoco funciona bien el navbar. Para solucionar este problema tuve que poner el nav__icon y el nav__icon-name con la propiedad grid en el css. Ellos no tienen esta propiedad y por eso no se comportan bien en Google Chrome.

[@Bedimcode]

Gracias amigo, por encontrar ese error, lo revisare mas detenidamente y lo corregire, saludos.

[@AaryashK]

how can i hide this to the side and when I hover it or click the arrow this will popout

[@Bedimcode]

The sidebar is displayed with hover effect in desktop mode.

[@humanityandpeace2081]

Can you please tell me the name of the theme of vs code that have you used

[@Bedimcode]

Several come but choose f-one-dark vscodethemes.com/e/sldobri.daily

[@guerreropuentepedrodamian9686]

tengo un error el cual es que header_logo no me funciona y la barra lo tapa :( ¿Alguna solución?

[@Bedimcode]

Hola amigo, te paso esa parte del header en un archivo de texto, espero soluciones el error, saludos. drive.google.com/file/d/1s21QrHA6KDDzT5ZgGKXdzUMq42_zpgW5/view?usp=sharing

[@saiprasadambrale5369]

Sir please add your voice and explain each step

[@Bedimcode]

I would love to friend, but there are reasons why you can not, greetings

[@saiprasadambrale5369]

@@Bedimcode try please

[@missmosotho]

I tried following this video step by step and it still doesn't work... well, the js part of it

[@Bedimcode]

It works correctly friend, check it well, greetings

[@Akshayweb]

what's the theme name in vs code ??

[@Bedimcode]

Hello friend, greetings, the topic is this, but choose f-one-dark since there are several. vscodethemes.com/e/sldobri.daily

[@frames123]

But I thought you used ion icons

[@Bedimcode]

Use many icons, this ionic, boxicons, remix icons, iconscout. I like to explore new icon libraries.

[@frames123]

@@Bedimcode Its always good to explore😊😊. Wonder if dark mode is possible, its just that dark mode is the future now🤔🤔. Can we use defer attribute for script tag I don't like to put it at last of the code😕

[@beticohernandez9536]

Full

[@weirddev]

Can you just talk so we understand it more better. Also dont define color names first. While watching this video you suddenly type var(--first-color) and we dont know what that is. So we have to seek behind and see what that was.

[@Bedimcode]

Hello friend, I am not available to speak in the videos yet. And on the variables everyone has her point of view, but good advice. Enjoy the video, greetings.