Responsive Menu Navigation Using Only HTML & CSS

No video

Responsive Menu Navigation Using Only HTML & CSS

Рет қаралды 280,912

Күн бұрын

◘ Like our page : / darkcode0
◘ Paypal donation link : paypal.me/YBen...
◘ Become my patron : / darkcode
◘ Download Files From Here : goo.gl/9R7bFR
◘ Code Editor : Atom
◘ Music Name : Jordan Schor & Harley Bird - Home [NCS Release]
◘ Music Link : • Jordan Schor & Harley ...

Пікірлер: 207

@kratikagupta3395 5 жыл бұрын

and the reason of late night comment is- i am still practising with the help of your videos

@kratikagupta3395 5 жыл бұрын

bro, i have seen your first video of search button,and before the end of that video i subscribed your channel.. then i saw your other videos and i am really very impressed, u upload very cool content. thanks yar.

@DarkCodeOnline 5 жыл бұрын

Welcome ♥♥

@mohamedkhalith4629 3 жыл бұрын

Dude you're awesome, I currently developing a web but responsive menu is biggest problem to me. I had watched many videos, but your tutorial is happened correctly. Thank you Dude. Keep Coding 😊

@jonathanpauluze 5 жыл бұрын

It's easier to make responsive designs with frameworks (like bootstrap), but I liked your style using only HTML and CSS, amazing job. Congrats!

@DarkCodeOnline 5 жыл бұрын

welcome ♥

@sulthan_tripooly 5 жыл бұрын

Jonathan... framework like bootstrap causes to increase the load of the server.. Try to responsive always by using @media query.

@102728 3 жыл бұрын

Ugh it's like I know all those separate things, but putting them together from scratch and my brain just bluescreens.. :/ Especially if it's just one element of many in a page. Oh well, that's why I watch these vids I guess, they've been a great help/template to get things going. Thanks and keep 'em coming!

@georgefox2767 4 жыл бұрын

AMAZING. So simple, and the first time I really understood how to create a responsive navbar without bootstrap. This was EXACTLY what I was looking for. Thanks!

@Boatengn1prince 5 жыл бұрын

Thank you a lot. You gave me an inspiration for coming back into programming world

@alfreddickkobinah2532 5 жыл бұрын

why did u leave? i sometimes wana stop it too

@programmingmindset 5 жыл бұрын

any reason of your leaving of programming? can you share.............

@rafikhan4950 5 жыл бұрын

@@programmingmindset Most cases we are lost our patients, that's why most of people can't wanna do this....

@prateekjain7785 4 жыл бұрын

@Torres.etechprog ,🤣🤣🤣🤣 he was talking about patience...

@Madalinmitosis 4 жыл бұрын

hmmmm who want food 🥓🥓🥓🥓🥓

@MithileshMusic92 5 жыл бұрын

awesome , mastering HTML and CSS is what is left for me lately , i do in Node, PHP , React ,Angular but highly rely on some Framework for html and css , making your own is what i needed to actually write good react apps. as React doesnt use Jquery , integrating a theme is very painful. thank you for this :)

@bosssoumare8944 4 жыл бұрын

Continue ! your one of the best web designer on youtube

@DavidNitzscheBell 4 жыл бұрын

You have a with no s but lots of s. Why use a ?

@neerajmahapatra5239 5 жыл бұрын

You are awesome having great skills dude ...how you have learnt this ??.. Really nice job.. You got a subscriber ...Make plenty of videos..😘😘

@samuelavril6548 5 жыл бұрын

I love this channel so muchhhhh. That i like the most its the simplicity. You made discover a real ove for coding. Thank you so much.

@rafnaf.zeljko 5 жыл бұрын

Čovječe ti si legenda. BRAVO!!!

@kennistark4385 4 жыл бұрын

Thank you for all!

@shoyaishida2569 5 жыл бұрын

I'm new to html/css. I really enjoyed your videos. :)

@sharmaji3183 5 жыл бұрын

Thanks for this video lecture..from india..

@Samireview97 3 жыл бұрын

it works bro, thanks for your contribution

@peaktheorycreative3587 4 жыл бұрын

Thanks for the video, it was very easy to follow and I got to learn a good amount of details for CSS.

@developpeurmedi_h6501 3 жыл бұрын

merci vos travaux sont magnifiques

@user-fq5fm8hp1x 3 жыл бұрын

hello, the The tag is not Supported in HTML5.

@rakibulislamragib9002 4 жыл бұрын

100% working. It's cool...love it❤❤

@meltixpa4480 5 жыл бұрын

This is amazing. I was searching for a responsive bar video and this is the best result. Thank you so much! Just asking, what packages do you use in atom?

@zentranian 3 жыл бұрын

i recommend you visual studio code is best than atom

@geoffreywafula8413 5 жыл бұрын

Loving this Chanel for real!❤

@peterpheck6122 4 жыл бұрын

I Like it very much, Thank you for all!

@aragorn7015 5 жыл бұрын

Learn how to use rem units, it helps a lot in doing responsive things ;d Or if you only aim for people who only use basic html and css, do so further ;D

@santacroce2489 4 жыл бұрын

Nice music I can really concentrate in learning how to code listening to that thanks.

@ifindstuffformoney4685 5 жыл бұрын

Can you do like a background with some animations? Like letters falling or rising etc

@patricknally1177 5 жыл бұрын

Just use a gif

@user-bu5xw6yf8q 3 жыл бұрын

Good job, Sir. Thanks for such videos!

@pranavpatil9878 5 жыл бұрын

Thank you so much dark code you are amazing!!!😍

@theoglossa 3 жыл бұрын

Finally got it!

@vladandesign9524 4 жыл бұрын

THANKS BRO FOR THIS LIKEE AND SUBBBBBBBBBBBB THANKS MAN

@melwinsera974 3 жыл бұрын

I like it thank you

@snipe5730 5 жыл бұрын

I wish I was good like you. 😔

@user-fb4rz5wu8r 4 жыл бұрын

i'm glad to see this channel ...i'll be back ????.... i'm not a Terminator...ha ha ha

@cs_patterson 5 жыл бұрын

Great video. Thanks a lot

@RobertMalitek 4 жыл бұрын

Hello DarkCode. It is a very elegant solution. Thank you. Did you find any browser limitations?

@samikshachoudhary3798 4 жыл бұрын

thank u sir 🙏🙏 very useful video

@stefanmrvic4652 5 жыл бұрын

Why are you not using CSS Flexbox or CSS Grid?

@algd162 4 жыл бұрын

That's incredible thank you and God bless you

@arvinlorenz 5 жыл бұрын

I really like this channel, I'm happy that i found this. Do you know any youtube channel that has similar style like this and also uses bootstrap 4?

@cristiansosa4848 4 жыл бұрын

Excelente vídeo amigo que energía (Y) ☺

@user-ve7tx3ud6n 2 жыл бұрын

Thank you very much.

@dhruvikpatel8811 4 жыл бұрын

Hey can you please help me to get a responsive website using html and css

@leonardocamargo5412 4 жыл бұрын

Great Tutorial. But, I'am prefer create this with javascript. For projects is not cool create elements in the dom like this input hidden xD

@21thTek 4 жыл бұрын

Excelent !!

@hiwayshoes 5 жыл бұрын

Beautiful!

@victorgarcia-kk6zl 4 жыл бұрын

Bro eres el mejor

@Trou_noir1 4 жыл бұрын

awesome job

@nissrinenfifi8419 4 жыл бұрын

Thank you, the video is great👍

@nguyenhuuanhtuan5360 4 жыл бұрын

Really helpful, danke schön!!

@catweb666 5 жыл бұрын

In my case checked does not work. Why? Who can help? My Dream Code Home About Services Works Contacts Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

@catweb666 5 жыл бұрын

and CSS .content-16 { font-family: "Comic Sans MS", cursive, sans-serif; max-width: 100%; height: 100%; position: relative; } .header-menu { height: 100px; background: #34495e; display: flex; justify-content: space-between; } .logo-2 { line-height: 100px; text-transform: uppercase; color: #fff; font-size: 24px; font-weight: 700; margin-left: 50px; } .menu-2 { line-height: 100px; margin-right: 80px; } .menu-2 a { color: #fff; text-transform: uppercase; text-decoration: none; padding: 0 10px; font-size: 18px; font-weight: 500; } .show-menu-button, .hide-menu-button { transition: 0.4s; font-size: 30px; cursor: pointer; display: none; color: #fff; } .show-menu-button i { height: 30px; width: 30px; } .menu-2 a:hover, .show-menu-button:hover, .hide-menu-button:hover, { color: #3498db; } #check-2 { position: absolute; visibility: hidden; } .text-content-box { } .text-content-box img { width: 100%; object-fit: cover; } .text-content-box p { text-align: justify; } @media screen and (max-width: 870px) { .show-menu-button, .hide-menu-button { display: block; } .header-menu { display: flex; justify-content: flex-end; } .logo-div { display: none; } .menu-2 { position: absolute; width: 100%; height: 100%; background: #333; right: 0; top: 0; text-align: center; padding: 80px 20px;line-height: normal; transition: 0.7s; display: flex; flex-flow: column; justify-content: center; align-items: center; margin-right: 0; } .menu-2 a { display: block; padding: 30px; color: #fff; } .show-menu-button i { margin-top: 35px; width: 30px; height: 30px; } .hide-menu-button { position: absolute; top: 40px; right: 40px; } .text-content-box { display: none; } #check-2:checked .menu-2 { right: 0; } }

@nureddinfa 4 жыл бұрын

So good!

@jesusdelrazo2898 5 жыл бұрын

Tengo un error... cuando doy clic en un enlace del me direcciona al que quiero ir, pero no se cierra la pantalla responsiva... me puedes ayudar?

@kevinr6209 4 жыл бұрын

Es lo mismo para mí.

@arzhaqprabowo3380 5 жыл бұрын

Awesome... Great menu

@forces4free 4 жыл бұрын

could you show how the menu would disappear if one of the links was clicked if this was a one page landing page site? if this is possible. New developer asking.

@najimali32 4 жыл бұрын

Design is good & responsive but instead of playing the background song, you should explain the code why you are using it. It would be much better then.

@abdeljalilaitetaleb594 5 жыл бұрын

Very nice thanks

@arunyati 4 жыл бұрын

TooooooooOooooooo much good

@aiziyaa1372 5 жыл бұрын

Hi everyone I'm a beginner in a web programming sphere and only learning the features of it. I wanted to ask what Mr.Darkcode did in 0:35 s and how to do this. Please dont be indefferent and help me please. Thank you very much

@ertugrulzone7861 5 жыл бұрын

Man Beauty !! Sir u have any course about Css ??

@Lydias_1999 4 жыл бұрын

Thanks

@DarkCodeOnline 4 жыл бұрын

Welcome

@SandeepMaheshwariTvCom 4 жыл бұрын

Thanks a lot for this valuabale video

@e_r_i_c_o284 4 жыл бұрын

Fiz tudo como no vídeo mas assim que eu domínio a tela ela ainda fica com o menu aberto e não tem como fechar

@abdulazizdablo4491 4 жыл бұрын

You can use flex it really helps

@dadan.dahman.w 4 жыл бұрын

Baguuuus

@codingwithlaraveller 5 жыл бұрын

Hey! this was an awesome video. Can please tell me how are you previewing index.html file inside atom editor (the side pane). I had tried and installed the package atom-html-preview but it only shows HTML file and does not link the CSS file. There's no issue in css or html or their linking, I've tested in browser. Can you please help me.

@whitecode6344 5 жыл бұрын

Thanks!

@marufkhanmaruf3838 4 жыл бұрын

I wish I was good like you

@2ia07_muhamadzidan8 5 жыл бұрын

Tahnks

@2ia07_muhamadzidan8 5 жыл бұрын

I mean Thanks

@Min-fq7ew 5 жыл бұрын

love ya!!

@ItsMe-fj1co 4 жыл бұрын

What is this link? Can I use it also for my projects? Do I need a license?

@mahmudhasan1803 4 жыл бұрын

Thank You

@TirtaAfandi 4 жыл бұрын

Thanks you so much

@anilanandachakrabortty1416 5 жыл бұрын

wao perfect design

@maulanahidayat9498 5 жыл бұрын

Cool

@9gager87 4 жыл бұрын

Can anyone please explain how he made the menu items disappear when the screen size is smaller? I would've used a media query, but this is some weird dark magic. HELP!

@webcoder2583 5 жыл бұрын

Thanks alot bro you are great

@titosolo1606 4 жыл бұрын

when i trying on mobile view its not responsive, its responsive only while zoom on desktop view

@prachigupta2368 4 жыл бұрын

Is it true?

@george12312142 5 жыл бұрын

thanks a lot~ u really my hero ~~~~~

@arengutierrez7536 5 жыл бұрын

Hello one question: because when I add more phrases to the menu and i make responsive the letters come down of its position? how do I solve it?

@bijaysimkhada8477 5 жыл бұрын

Youre awesome 👌

@brakeduster 3 жыл бұрын

Question - how can I get the menu to drop down from the top, instead of from the right please?

@mikadini88 5 жыл бұрын

Hi, your patreon is active?

@DarkCodeOnline 5 жыл бұрын

yes

@mikadini88 5 жыл бұрын

@@DarkCodeOnline ok, thanks i think I support you for you awesome work

@DarkCodeOnline 5 жыл бұрын

@@mikadini88 thank you brother ♥♥

@DarkCodeOnline 5 жыл бұрын

@@whoisain1370 thank you ♥♥

@rozarioism 5 жыл бұрын

Man u r too good

@mgamefun2479 5 жыл бұрын

Very nice🤩

@babyshark6466 5 жыл бұрын

Thanks very much :3

@seelamsirisha296 4 жыл бұрын

Thank you a lot. Can you make video on hamburger menu using bootstrap4

@prakash655 5 жыл бұрын

*Awesome 😊*

@s.y.h.4121 5 жыл бұрын

Only the check box was shown but not my menu bars. Couldn't figure out why...I copied everything except Google fontawesome stylesheet.

@s.y.h.4121 5 жыл бұрын

@@athallahfathur ok, we actually have to copy the first link of stylesheet href from Font Awesome first. It's the one DarkCode pasted under the meta name script. Here's the text:

@flory3377 5 жыл бұрын

Hey, i got a background and a text on my front site and when i am using the menu on my phone the text on front site is on the menu...How can i do so that text is away when i use the menu?

@andrejpetnuch8194 5 жыл бұрын

verz nice and right tutorial

@errorfix274 5 жыл бұрын

wow nice

@adam-fj4zt 5 жыл бұрын

Why does your menu hide at 6:05 when you make your screen device smaller ? You haven’t wrote anything in this way... I’m confused cause the rest are clear

@sub_o 5 жыл бұрын

The menu is still there, it just gets pushed down and out of the header area due to restricted screen size. You can't see it when it moves down as the color of the menu text is white, so it blends in with the white background of the content area. Hope that helps :D