HomeХобби и стильRelated VideosMore From: Clever Techie

Responsive Navigation Menu Bar Tutorial with HTML5 and CSS3

725 ratings | 67397 views
Learn how to create responsive navbar using HTML5 and CSS3. In this tutorial we're going to use the latest web technologies to create responsive navigation menu bar which will be flexible enough to look good in all devices, including smallest cell phones. Not only is this menu responsive, but also adds additional functionality on screen width collapse by adding a "Show Menu" button which users can click to show and hide the menu. This extra functionality accounts for the small space availability on mobile devices and makes this responsive menu as responsive as it can get! ````````````````````````````````````````````````````````````````````````````````````````````` Hey guys, I'm now using Patreon to share improved and updated video lesson material. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie :) Download this video's files here: https://www.patreon.com/posts/responsive-menu-20819057 ( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! ) ````````````````````````````````````````````````````````````````````````````````````````````` ( Website ) https://clevertechie.com - PHP, JavaScript, Wordpress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams. ( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube ( Google Plus ) https://goo.gl/J71p6f - clever techie video tutorials. ( Facebook ) https://www.facebook.com/CleverTechie/ ( Twitter ) https://twitter.com/theclevertechie
Html code for embedding videos on your blog
Text Comments (91)
Paul Welding (2 months ago)
Will mobile devices recognise the 'hover' state for displaying the drop-downs?
Dipesh Rathwa (3 months ago)
your background color is dark so please make font color light Thanks i like ur video
Vik Singh (4 months ago)
What software are you using?
Valérie (5 months ago)
Bonjour - Mon côté responsive ne fonctionne pas. Je n'ai pas le bouton vert "show menu" en haut. Et le width: 100%; ne prend pas. J'ai pourtant bien saisi tout le code point par point. Je ne comprends pas :-( Quelqu'un peut-il m'aider ? C'est dommage de ne pas avoir le final. je viens de trouver une erreur (un ; en trop) et j'ai donc le bouton vert en haut mais le width: 100%; ne prend toujours pas toute la largeur de l'écran mobile.
Sam Sam (5 months ago)
Thank you.
max vdberge (6 months ago)
great tutorial!
Klemen Ruperčič (6 months ago)
Thank you for this amazing tutorial. But i still have a question. On mobile phone, click shows the dropdown links. But im missing closing them on click too. How would i do that?
wanda rios (6 months ago)
can you show me how to make this go to right side instead of left?
Ryan Cristian Sumugod (7 months ago)
how about if you click the bar it just works and how to place our links on the bar example download link etc.
Joeber Gonçalves Garcia (8 months ago)
Why, instead of using (ul li a:hover + .hidden, .hidden: hover) I could not just use (li: hover ul)? 15:02
Shahzad Portfolio (9 months ago)
Every Things are fine but my Label is not working Brother
Md. Ahasan Habib (9 months ago)
can you provide me the source code please?
Kruidvat [Plays] (9 months ago)
I need help, these photography illustration and web are not below the tabel, its in tabel before Home, About and Portfolio. Please help
Will Green (10 months ago)
Just copied content of the W3School example haha I'd recognise that colour scheme anywhere ;)
Sahar Shah (11 months ago)
how to insert vertical line in side the navbar tell plz?
Sayantan Saha (11 months ago)
Please show some effective "humberger menu style"
Technical Ustad (11 months ago)
Good One i am Teaching Same Things in Urdu
張羿訢 (11 months ago)
cool Man. Thanks a lot.
Clever Techie (10 months ago)
np
Sokhidir Ndruru (1 year ago)
Thanks
MH Rakib (1 year ago)
Chris Newman (1 year ago)
<!--- Index ---> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Title Goes Here</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <link href="css/styletest.css" rel="stylesheet" type="text/css" media="all" /> <!--Show Menu for Responsive Side Menu--> <label for='show-menu' class='show-menu'>Show Menu</label> <input type='checkbox' id='show-menu' role='button' > <!--Actual Menu Layout--> <ul id = 'menu'> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul class='hidden'> <li><a href="">Our Team</a></li> <li><a href="">Camp Sites</a></li> <li><a href="">Mission &amp; Vision</a></li> <li><a href="">Resources</a></li> </ul> </li> <li><a href="#">Things to do</a> <ul class='hidden'> <li><a href="">Activities</a></li> <li><a href="">Parks</a></li> <li><a href="">Shops</a></li> <li><a href="">Events</a></li> </ul> </li> <li><a href="#">Contact</a> <ul class='hidden'> <li><a href="">Map</a></li> <li><a href="">Directions</a></li> </ul> </li> <li><a href="#">News</a></li> </ul> </body> </html> <!---Styletest.css---> /*Author: W3layouts Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ --*/ body{ font-family: 'Montserrat', sans-serif; } /* Strip the ul of padding and list styling */ ul { list-style-type: none; margin:0; padding:0; position:absolute; } li { display: inline-block; float: left; margin-right: 1px; } li a { display:block; min-width:140px; height:50px; text-align: center; line-height: 50px; font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif; color: #fff; background: #2f3036; text-decoration: none; } /* Hover State for Top Level Links */ li:hover a{ background: #19c589; } /* Style for Dropdown Links */ li:hover ul li a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } /* Hover State for Dropdown Links */ li:hover ul li a:hover { background:#19c589; color: #fff; } /* Hide Dropdown Links Until Needed */ li ul { display: none; } /*Make Dropdown Links Vertical */ li ul li { display: block; float: none; } /* Prevent Text Wrapping on Dropdown Links */ li ul li a { width: auto; min-width: 100px; padding: 0 20px; } /* Display Dropdown on Hover */ ul li a:hover + .hidden, .hidden:hover { display: block; } /* Hide Checkbox */ input[type=checkbox] { display: none; } /* Show Menu When Invisible Checkbox is Checked */ input[type=checkbox]:checked ~ #menu { display: block; } .show-menu { font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif; text-decoration:none; color:#fff; background:#19c589; text-align:center; padding: 10px 0; display: none; } /* Responsive Styles */ @media screen and (max-width: 760px) { /* Make Dropdown Links Appear Links */ ul { position: static; display: none; } /* Create Vertical Spacing */ li { margin-bottom: 1px; } /* Make All Menu Links Full Width */ ul li, li a { width: 100%; } .show-menu { display: block; } body { background-image: none; } }
SID SID (1 year ago)
nice job thanks bro
Naraine McIntosh (1 year ago)
thank you your video but I have tried it twice and it did work like yours do
Gmoney Mozart (10 months ago)
Clever Techie lmfao
Clever Techie (10 months ago)
Try again, third time is a charm
Rafael Persano (1 year ago)
Great stereofonic voice!
Clever Techie (10 months ago)
Thank you :)
Ammar J. Omar (1 year ago)
great job, thanks a lot.
Kathy Stevenson (1 year ago)
Great tutorial! I was able to use postion: relative and adjust to 150 (or so ) px to make the menu look centered. It still responds correctly when I resize the browser window. Thank you!
J. C. (1 year ago)
Wouldn't the hover effect make the menu useless in mobile? You click on stuff on a phone, it's impossible to hover. Or does the browser automatically interprets that as :active? Thanks.
Niels Goossen (1 year ago)
Which plugin do you have to complete the code automatically, as when you typed "ul" and the rest of the code appeared immediately.
Foyah Freeman (1 year ago)
He's using Emmet
Nicolas (1 year ago)
how do you open "the inspector tools"? is it a plugin or can you open it via browser?  i'm on safari btw.
Foyah Freeman (1 year ago)
Press the F12 key.
Sourav Mishra (1 year ago)
it's on Firefox
Adarsh Benz Lal (1 year ago)
Which programing software are you using?
Clever Techie (10 months ago)
NetBeans
Ronald Aug (1 year ago)
I guess it's brackets. It's open source and free.
SAYED HASAN (1 year ago)
very bad video............. fucker boy.................
Honey boy (1 year ago)
yeah
Rik Schoonbeek (1 year ago)
Great tutorial! Is it also possible to have a div (clicking on it) turn the checkbox on and off. I already made a nice button div, and I'd like to use that instead.
AKS SADO (1 year ago)
Good day. I have question for you? i ried two times coding as you tought but i could't make as yours. what broser do you use? is it IE9 or IE8 in your computer. i think my broser isn't supporting display:block
Jakoob Plays (1 year ago)
How do you center the navigation bar
Jakoob Plays (1 year ago)
I tried myself, looked like my computer can define "center"
Bryan Perry Ruiz (1 year ago)
Sir how do we put the menu centered instead of the bad looking left sided?
Valérie (5 months ago)
peut-être en mettant tout le menu dans une div (div id="menu-center">LE MENU</div> et dans le css : #menu-center {display: flex; justify-content: center;} (c'est une supposition). Dans le css je le mets à la fin, juste avant le responsive. - je viens de tester et ça marche :-) le menu est centré.
Clever Techie (10 months ago)
Yeah that works
Ronald Aug (1 year ago)
#menu{ margin:0 auto; }
SquaredbyX (1 year ago)
What is the image at 5:49?
Josh (1 year ago)
what browser are you launching your HTML from to get the mobile stuff
Josh (1 year ago)
thank you
Cliff Drew (1 year ago)
It is a Firefox based web browser.
JM Schroen-Hendriks (1 year ago)
Looks nice, but the responsive part does not work with me. @media screen and (max-width: 760px) {      / * Dropdown link appear left * /      ul {          position: static;          / Display: none;      } If I "/display: none" is used, menu in display, with "display: none" comes, no menu. What can be the mistake?
Nicolas (1 year ago)
i have the same problem...
Andras Horvath (1 year ago)
nice example
Josh (1 year ago)
what text editor do you use?
Clever Techie (10 months ago)
NetBeans is right
Inshrah Taj (1 year ago)
Sublime text editor
Jakoob Plays (1 year ago)
Josh NetBeans
Toni Wall (1 year ago)
I want to place a vertical menu in a sidebar widget in my Genesis Child Theme. Would I be able to copy and paste the HTML and CSS Code into a sidebar widget and have a vertical menu that works?
N 77 (1 year ago)
how do i add links to the boxes inside so i can actually click on them
Lukas Christensen (1 year ago)
Try googling how you make a link. Not trying to be a smart-ass, I'm actually learning from scratch myself, but that will give you the answer: you just exchange the # value in the <a href='#'> tag with your URL. Remember to keep the quotation marks.
key_x (1 year ago)
well explained! thanks!!!
BRITCHI (1 year ago)
Hi Good morning sir Please I have a class project to develop a computer based test system where students will login with their registration number and write their exam  It should be like a website then I will upload the questions and give options of A, B, C, And D and let them chose one  Please I don't know where to start from I am hoping you create a video of it or give me the steps to take or source code Thank in advance
BRITCHI (1 year ago)
I have some knowledge about html and css. and yes I am running into it blind
Tom Gionfriddo (1 year ago)
Hi, Im nowhere near as good as Clever Techie, but i was wondering, do you know any html or css? or are you running into this project blind?
justin ho (1 year ago)
great vid !
How-to in 60 seconds (1 year ago)
How am I able to make the navigation menu centered on the page, instead of on the left side?
Neat Designs (1 year ago)
Can You share Your code on the CodePen? So I can see whats the problem.
Nicolas (1 year ago)
thanks for the answer, but if i do that, then the menu starts sticking to the right side of my website...
Neat Designs (1 year ago)
Do this: Wrap all the content in a separate div <div class="container"> </div> and for styles .container { text-align: center; } #menu { display: inline-block; }
Saskia Creations (1 year ago)
im having troubles. my links are not in order. it shows the dropdown links and then the last normal links like contact and prices, but it doesnt show the home button and the second and third etc. why? the ul li etc. is correct. And i would like to know how i can fix the dropdown menu for mobiles that way that when i hover over it it won't drop down immediately but only when clicked on it
Arcode code (1 year ago)
you sure you are closing your html tag properly, and using right classes or name for style, the way i understood your problem, there are only two reason for this and and one more thing, if you are typing comment make sure you are closing the comment tag.
Shohrat Jumanazarow (1 year ago)
nice video thank you
mixsetup (1 year ago)
Hi worked out how you can get the menu button to have show menu and once it shows change the text to close menu. Used javascript but also in CSS only if you are interested? Still oh and still  /* Prevent text wrapping on dropdown links */ li ul li a { width: 0 auto; min-width: 100px; padding: 0 20px; } is just not doing it for me a sI have one large name on the dropdown list but it will not expand
Jalaina Fontanez (1 year ago)
I have been trying to find something to explain how to make a navigation menu responsive for weeks. This was the first video I have seen that is very simple, and explains the why behind everything. Thank you for such a great tutorial!
Harun Tuncay (1 year ago)
Hey Clever Techie. Thanks for the great tutorials. I was wondering, Could you make a tutorial on php sockets ?
刘刘伟 (1 year ago)
很棒!very good!
Clever Techie (10 months ago)
Thanks
mixsetup (1 year ago)
Great video one thing that doesn't happen n mine is the dropdown menu on mine the last row the list does not expand out to show the full headings for the dropdownlist itemsl all the others do. Any idea why?. Oh is there a way after you click on show menu and it shows for it then to say close menu(it's okay I have worked it out with a little javascript to help,, tried a CSS version but could not get it to hide or be the correct width but the javascript worked)?
Lovely Boy Pravind (1 year ago)
nice vedio....Ur Vedio is much Usefull For Everyone....it;s Much usefull Vedio......Very Nice Vedio Sir
CosmicSpaces97 (1 year ago)
Thank you so much! Everything worked very well :)
respect-all fear-none (1 year ago)
gg man thx a lot
Vroomation Studios (1 year ago)
What program do you use? I use brackets, but i like the short cuts you were able to use.
Foyah Freeman (1 year ago)
You can add the plugin "Emmet" to you brackets editor. Conversely, you can use vs code which has "Emmet" built in.
Nick Sid (1 year ago)
Vroomation Studios NetBeans IDE i believe
Alpha Mackie (1 year ago)
This is a great video, thanks for sharing your knowledge.
Stephen Lai (1 year ago)
very cool tutorial
Craig Johnson (1 year ago)
Great video, but why did you put the <link> and <meta> tags in the <body> instead of <head>?
SourPatchKid (1 year ago)
Even though it's to show it fast, that's poor practice for those who don't know any better. Standard practice is always to put that in the head. If the site would go live Google's bots would put it down their search list for poor syntax.
Mehmed Çavaş (1 year ago)
I think it because to show it fast. but if u make your own web page put it in the head. because of the search engines and so on
Alexandru Cenusa (1 year ago)
Hi there! Your videos are great and really helpful cuz i'm trying to learn about html and css by myself. Can you please tell me what text editor do you use?
Jakoob Plays (1 year ago)
Clever Techie How do you align the navigation bar in the center
Alexandru Cenusa (1 year ago)
thank you very much
Clever Techie (1 year ago)
Thanks, I'm using NetBeans.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.