Responsive Dropdown Menu Bar Using HTML CSS & JavaScript

Поделиться
HTML-код
  • Опубликовано: 12 июн 2024
  • Responsive dropdown menu bar using HTML CSS & JavaScript. Responsive dropdown navbar html css javascript. Responsive dropdown navigation menu using html css and javascript. Responsive dropdown menu with submenu
    🔔 Subscribe for more!
    / @bedimcode
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    🔗 Source code
    github.com/bedimcode/responsi...
    💎 Membership
    www.buymeacoffee.com/bedimcod...
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    👨‍💻 Build the project from scratch
    github.com/bedimcode/responsi...
    👆 Download (empty files)
    - Click on the GitHub link
    - Click the green button (code)
    - Click Download ZIP
    📂 Assets
    Fonts: fonts.google.com/
    Icons: remixicon.com/
    JS Functions: github.com/bedimcode/responsi...
    ⏱ Timestamps
    0:00 Intro Responsive Dropdown Menu
    2:20 Project Setup
    3:22 Variables & Reset CSS
    4:07 Reusable CSS
    4:25 Header
    09:08 Navbar
    11:05 Show Navbar Menu
    15:50 Dropdown
    18:26 Show Dropdown Menu
    22:14 Dropdown SubMenu
    26:33 Breakpoints
    34:16 Final Project
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    🔥 Follow me!
    / bedimcode
    / bedimcode
    ☕️ Support me
    www.buymeacoffee.com/bedimcode
    ko-fi.com/bedimcode
    👍 Thanks for watching!
    Make sure to like + Subscribe for more! 💗
    #responsivenavbar #dropdownmenu #bedimcode

Комментарии • 45

  • @paweb.4272
    @paweb.4272 9 месяцев назад

    I Love yours projects and design. Its simple and clean. Perfect to me.

  • @Hutchhh
    @Hutchhh 2 месяца назад

    I'm only 11 minutes in to the first episode but this is by one of the best frontend tutorials I've seen. I love that the design involves a lot of features, and shows better ways to debug what affects what through inspect element

    • @Bedimcode
      @Bedimcode  2 месяца назад

      Thanks for the support friend, greetings.

  • @RoberthSandoval
    @RoberthSandoval Год назад +3

    Excelente! Ya hice el tutorial me quedó pro el menu. ¡Muchas gracias! por compartir tus conocimientos @Bedimcode 👏

    • @Bedimcode
      @Bedimcode  Год назад +1

      Gracias por el apoyo amigo, saludos.

  • @keinermendoza4631
    @keinermendoza4631 5 месяцев назад

    what a good content, great work

  • @raitaskeen
    @raitaskeen Год назад

    Awesome...!

  • @chacataplan
    @chacataplan Год назад

    Excelente!!!, gracias por el gran aporte

    • @Bedimcode
      @Bedimcode  Год назад +1

      Un placer amigo, saludos.

  • @tanaht23
    @tanaht23 Год назад +1

    wow.. awesome

  • @ViKasHShArmA-rw7cw
    @ViKasHShArmA-rw7cw 3 месяца назад

    I have a question regarding in mobile view , when I will click on navigation menu down arrow icon the page will load automatically, because it it present inside anchor tag, so how can stop , when I click on down arrow icon then show me only sub menu not load the page , and when I will click on anchor tag text so then only the page will load or goes to that page

  • @XLOYT
    @XLOYT 3 месяца назад +1

    i wish you receive my message. thank you so much brother. you are my teacher

  • @vighneshbangar3830
    @vighneshbangar3830 Год назад +1

    Great video! It really helped me! But, I have a question, how do you convert ui's from dribbble into websites? Like how do you get all assets and all?

  • @pourianayeb1063
    @pourianayeb1063 Год назад

    Super cool

  • @kingm1shot492
    @kingm1shot492 Год назад +6

    I am waiting for your voice to make videos more attractive ❤❤

  • @user-wk7xv7mz8w
    @user-wk7xv7mz8w Год назад +1

    Thank you very much for your good content. I am constantly learning from you. Can you make pagination for a movie website using vanilla js ❤❤❤

    • @Bedimcode
      @Bedimcode  Год назад +1

      I'll take it into account, thanks for the support friend, greetings.

  • @nicolasmendez4146
    @nicolasmendez4146 Год назад +2

    Muy bueno 🤩
    Por casualidad tenes cursos para aprender de todo lo sabes 🤔
    Estaria bueno poder hacer ese tipo de trabajos por cuenta propia

    • @Bedimcode
      @Bedimcode  Год назад

      Gracias amigo, pero lo siento no cuento con cursos de diseño web, saludos.

  • @diegomaldonado4359
    @diegomaldonado4359 9 месяцев назад +1

    que video tan increible, me ayudo mucho. solo que al momento de ponerle el cdn de bootstrap a mi proyecto desacomodo todo el menu. pero la solucion fue cambiar todas las etiquetas que tuvieran el nombre de "nav" por cualquier otro para que los etilos de bootstrap no interrumpieran

    • @Bedimcode
      @Bedimcode  9 месяцев назад

      Gracias por el dato amigo, la información puede ser util para cualquier desarrollador, saludos.

  • @CuervoXP
    @CuervoXP 4 месяца назад

    You are the best

  • @ethanjames
    @ethanjames Год назад +1

    Hey! great video, but can I ask what font do you use for vs code?

    • @Bedimcode
      @Bedimcode  Год назад

      Thanks friend, vsc font is 'Cascadia Code', regards.

  • @juniorsemerzier660
    @juniorsemerzier660 Год назад

    🔥

  • @sharathnayar26
    @sharathnayar26 4 месяца назад +1

    It was really good !
    Does the click will work in mobile devices? Because in desktop the drop down is working while hovering the menu.

    • @omerdeniz979
      @omerdeniz979 3 месяца назад

      Did you find an answer about this?
      I'm having the same problem right now.
      Click event does not work on mobile devices

  • @dagotube1634
    @dagotube1634 Год назад

    Nice , I love your Channel❤❤ can you make responsive cake design website please?

    • @Bedimcode
      @Bedimcode  Год назад +1

      Thanks friend, it is in my plans to make a cake website, greetings.

  • @asjad.hassan
    @asjad.hassan 11 месяцев назад

    Hey what extension your were using for comments in this video plz tell me

    • @Bedimcode
      @Bedimcode  11 месяцев назад +1

      Comments inserted manually friend, greetings.

  • @musicfan507
    @musicfan507 Год назад

    brother, you are the best blogger in your segment, I love watching you, you can make websites for making money so that any of your viewers can customize the site for themselves and can get passive income from it, it would be great, I have never met such a project , and one more request, you can do a project with AI, at least at the level of telegram bots or a todo list, but only advanced ones, I'm from Uzbekistan, you can google about my country, if of course you are interested in who your viewers are

    • @Bedimcode
      @Bedimcode  Год назад

      If you develop the channel projects, you can be guided by them and build your own designs and earn money from it. About IA at the moment I am not interested, I thank you for the support, greetings.

  • @n.n.1279
    @n.n.1279 Месяц назад

    BUG found: On mobile (Android), click on the hamburger menu, then click on "Analytics". Its submenu opens, the arrow shows downwards. All good. BUT: clicking on "Analitics" or its arrow does not close the submenu again!

  • @PrasannaYendru
    @PrasannaYendru 11 месяцев назад

    I want a source code for travel website with attached of home aboutus to take a other place

  • @raitaskeen
    @raitaskeen Год назад

    🥰🥰🥰

  • @ga_con_di_hoc
    @ga_con_di_hoc Год назад +1

    pls, make a tutorial mega menu in the future

    • @Bedimcode
      @Bedimcode  11 месяцев назад +1

      I published a mega menu, look for it in my recent videos, greetings.

  • @CuervoXP
    @CuervoXP 4 месяца назад

    20:43

  • @rifal_channel9306
    @rifal_channel9306 7 месяцев назад

    what's name your theme visual studio code ?

    • @Bedimcode
      @Bedimcode  7 месяцев назад

      One dark darker

  • @user-my3bg5xr1l
    @user-my3bg5xr1l 11 месяцев назад

    hi sir, please create a responsive wedding website

  • @brbrr_m99
    @brbrr_m99 8 месяцев назад

    Im stuck in space-between 😢

  • @kantachourey
    @kantachourey 3 дня назад

    Sir kuch bhi smj nhi aa rha h