Pure HTML and CSS drop down navigation bar

Подписаться 31 тыс.

Просмотров 282 тыс.

50% 1

Pure HTML and CSS drop down navigation menus bar
Download Source code from here: techmidpoint.com/
Please Watch More Videos.
=========================
HTML and CSS Navigation Bar with Search Box : • HTML and CSS Navigatio...
Responsive and transparent navigation menus with social media icons : • Responsive and transpa...
Awesome Overlay Signup Form | HTML, CSS and JavaScript: • Awesome Overlay Signup...
Responsive navbar with search box | HTML and CSS: • Responsive navbar wit...
Navigation Bar with Login Form || HTML and CSS: • Navigation Bar with Lo...
CSS Coffee Cup with Stream || HTML and CSS: • CSS Coffee Cup with St...
CSS Background Animation | HTML and CSS : • CSS Background Animati...
CSS Grid Layout | HTML and CSS : • CSS Grid Layout | HTML...
Full Screen Login Form with HTML and CSS : • Full Screen Login Form...
CSS Smoke Text Animation : • CSS Smoke Text Animation
Awesome Animated Search Box using HTML and CSS : • Awesome Animated Searc...
Cool CSS Border Animation On Hover | HTML and CSS: • Cool CSS Border Anima...
3D social media icons with HTML and CSS : • 3D social media icons ...

Опубликовано:

29 июн 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 119

@MasaiDartz 2 года назад

This was such a nice and easy guide on navigation bars. I had to pause the video a lot or go back while i was doing the work, but that's all a process of learning.

@haarisnaeem4751 6 лет назад

These are good videos but just a suggestion: can you put the code in the description so we don't have to keep pausing. Thank you. Like if you agree

@adnantv3162 5 лет назад

#adnan { background-color: red; height: 500px; } #nav { background: tomato; max-height: 800px; } ul { list-style: none; padding: 0; margin: 0; position: absolute; } ul li { float: left; margin-top: 20px; } ul li a { width: 150px; color: white; display: block; text-decoration: none; font-size: 20px; text-align: center; padding: 10px; border-radius: 10px; font-family: Century Gothic; font-weight: bold; } a:hover { background: #669900; } ul li ul { background: tomato; margin-top: 10px; } ul li ul:hover { transition: 2s ease; background: gray; color: white; } ul li ul li { float: none; } ul li ul { display:none; } ul li:hover ul { display: block; } HOME NEWS BLOG FEEDBACK MORE MORE1 MORE2 MORE3 MORE4 MORE5 ABOUT CONTACT

@adnantv3162 5 лет назад

bro this code

@chogi9860 4 года назад

thanks so much

@aaranragu 4 года назад

@@adnantv3162 God Bless your soul man hahaha. Thankiuuu

@adnantv3162 4 года назад

@@aaranragu thanks

@actuall55 5 лет назад

this is a great video thank you for your time an putting it together

@shannonstumpf1861 Год назад

you nailed it! very nice! now i have to practice this. it's harder than i thought it would be for sure

@user-ok9es5ys2p 2 года назад

It was a very useful video. Thank you. I almost couldn't find a way to make my own code, When I watched this video, I finally found a way. It was easy, simple and effective

@assassinali1578 3 года назад

I have watched several of your videos they are great.I dont know how but i just search ,scroll down and just click your video without knowing😅😩

@samadsiddiqui9435 4 года назад

U r to good you make my work to easy .thank u sir u r great .

@ManishKumar-de5up 5 лет назад

very nice video sir it helps me a lot in my project

@RABWA333 7 лет назад

thanks , simple and clear

@rishipatel6646 3 года назад

thank you for this video it's very use full for me

@rthosarrohini 3 года назад

I have done same coding but after ul li ul : hover display: block not working. That is sub menus are not displayed after mouse over to list.

@johabib8354 3 года назад

it is ul li:hover ul

@libinantonygardener Год назад

Great and simple video for beginners.,Good Work for mate.

@johabib8354 3 года назад

Thank you for sharing your experience with us. Would you kindly please show us how to add a title to the left and then the navbar next to it because I have tried to float the bar to the center but it didn't work. Thank you

@karsonronnie8333 2 года назад

instablaster

@poojansenghani1420 4 года назад

Thank you for learning

@mdriyad2486 5 лет назад

Thank You 👍👍

@edeoghonaigbe7257 6 месяцев назад

What a superb vudeo for a beginner like me, i appreciate

@kurnool_loke 3 года назад

congrats bro best videos i seen

@rohitkumawat5419 4 года назад

Thank you so much sir

@MovieMenno 6 лет назад

thank you so much

@fathimaminhafarook1243 5 лет назад

Thank you.

@o1techacademy 3 года назад

This is great. Thanks. Will the menu bar be responsive on a mobile device?

@Moodboard39 Год назад

Need code in HTML to do that

@chundurusriharsha2402 5 лет назад

How can we understand this program without explanation,so type the program with explanation,so that we can understand it.

@daviddomaguina9578 3 года назад

Hey mate i want my dropdown menu if i click on a list it will load and open the content of my work

@cheesealone6443 5 лет назад

i can't get the drop down to come down

@alimonsur6545 4 года назад

Thank for share the video

@jatindahiya4398 4 года назад

Excellent video

@be-kreidly1515 Год назад

Hello sir, the website you put in the description box is not taking me to the source code as you stated above. I did my account in Appian and still not finding any code there.

@buladice_04 2 года назад

your codes were helpful but only problem i faced was that the dropdown hides into the navigation bar....waiting for your help ..thankyou

@itmoindrive 6 лет назад

Just create it. Possible for me. Thank you. Doing great and carry on.

@webmaster1498 6 лет назад

Thank you sir

@pritamprajapat3831 6 лет назад

Plz send video

@nareshkumar804 2 года назад

Nc bro easy method . Thx 😊

@abeshrajbanshi4966 3 года назад

Thanks a lot sir

@mohitzen Год назад

Thankyou webmaster.

@sauer.voussoir 6 лет назад

thank you :D

@rizachahid2162 2 года назад

thank you very much

@neelamsomavanshi3547 4 года назад

Thanku

@pratikraj7475 3 года назад

Thanks man

@hermannyao7464 6 лет назад

thank

@samimhossain7913 4 года назад

Your boss bro

@AngelRudhira 3 года назад

Tq so much😇

@alexjoma190 6 лет назад

why did not use tag before the element so that whole area be capable of being selected...

@Moodboard39 Год назад

It chose one to be selected . Obviously.

@Vasudevj1 3 года назад

thanks a lot

@smitadeshmukh8161 4 года назад

Nice vedio sir #webgurututorials

@bestmoments4908 4 года назад

In navigation bar if move our mouse it's disappear right how can be fix as till select the option

@jifunzeteknolojia9304 7 лет назад

Good

@cabdullaahicabdicasiisxuse9797 2 года назад

Thanks

@PP-gx7cs 2 года назад

Very Good

@TOPMUSIC-pw1ii 4 года назад

thanks aloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooootttttttttttttttttttttttttttttttttttttttttttttt my brother

@gonzalosantiago3839 3 года назад

thnak you

@rahmahammami9577 2 года назад

THX sir

@syediqbalahmed3176 4 года назад

good

@bayuyudhasaputra3169 4 года назад

Greet css trick... But there is typo in html code.. You write without (in 4.20) Thank...

@shankarganeshacharya4272 2 года назад

How to write paragraph contents for l tabs and more 1, more 2 and other major tabs. Plz help

@nyasha._ 6 лет назад

9:39

@manideep_talampally 4 года назад

If you keep on hover then how will it work on mobile version....we cannot have cursor in mobile right....make a video without hover effect....like on clicking that li we have to get inside of list

@compilations756 3 года назад

Javascript

@user-uy5to1xh8y Год назад

The navigation bar is on the left. How can I change it to the center?

@kazuki32_z75 4 года назад

still using notepadd++ now.. XD

@kasirojkt9245 2 года назад

My problem when creating dropdown menu is, drop down menu not sit right under its parent menu. Its goes left on page

@shekhnazim9049 3 года назад

I have done same coding but after ul li more options not working...... plz explain properly

@Nemanja_Milosavljevic Год назад

how to make hover full, in full width?

@informatiquedz9800 6 лет назад

you should use flexbox ;)

@webmaster1498 6 лет назад

Thank u for suggestion ...........

@techtipsuk 6 лет назад

Why would you do that? just limit browser support for no reason

@eula1194 6 лет назад

flexbox makes html code dirty.. css gird > flexbox

@techtipsuk 6 лет назад

I think you mean Grid. You're talking shit though. CSS has no bearing on HTML code. Thats the whole point of CSS, the separation of concerns.

@eula1194 6 лет назад

CSS GRID framework not Grid.. in response to user : Informatique DZ since he's talking about css frameworks... might as well use the cleaner one

@ak_digiservices 6 лет назад

anyone can create this ,but u have to use different tools for that which is flexible

@surajtiwari1796 4 года назад

Not working

@revanth9272 4 года назад

Yes, for me too..

@rubataslam7541 2 года назад

Kindly give this source file it is not availabile in given source file link

@aditisingh2577 3 года назад

Sir I want source code for this file..

@integrateeverythingpower 3 года назад

Please send me the source code

@Toro-Tor 2 года назад

These days more than 50% of users browse with a smartphone - and there is NO HOVER-EFFECT ON SMARTPHONE, therefore you should not use this code - you should add the "toggle" effect.