Responsive Navigation Bar with HTML CSS and Javascript | Responsive Menu
Вставка
- Опубліковано 18 лис 2024
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
------------------
Responsive Dropdown Navigation Bar with HTML and CSS
• Responsive Dropdown Na...
please like and share this video...
and also SUBSCRIBE my channel for daily new video...and don't forget to press the bell icon for daily notification
typed in code for code and toggle does not work
4index.html:26 Uncaught TypeError: $(...).toggleclass is not a function
at HTMLElement. (index.html:26)
at HTMLElement.dispatch (jquery-3.2.1.js:5206)
at HTMLElement.elemData.handle (jquery-3.2.1.js:5014)
this comes up haha HELPPPP!!!!!
don't matter figured it out haha x
!!!! you still didn't fix the problem with the active class bc it doesn't work for many people including me
i found it
@@notmeiko how Dude?
For those of you who could not get the click to dropdown to work:
Make sure you included before the .
doesn't work :(
He mean, to surround the ..... with a ,
like -->
You're a saint
WolfMountain and Incurvator
Thank you so much guys, was really struggling to get the menu to drop down. I have wrapped the tag with menu as you guys explained and manage to get it working. Thank You both
Use this instead of Jquery
let menu = document.querySelector('.menu')
menu.addEventListener('click', (e) => {
document.querySelector('ul').classList.toggle('active');
})
Thank you so much
thanks
thanks a lot myan you are too good ..........hands off
thanks a lot sir
To not disturb whole body with sliding down of UL content.
Add,
nav{
position: relative;
}
ul{
position: absolute;
background: inherit;
}
in media query.
Have fun amigos!!
Superb thank you
I couldn't believe it, as pretty as amazing work, All praise is due to God, I just give thanks to God, "you do the first tasks of my work" Be grateful for your thoughtfulness! God willed it! I have a lot of homework this one is the number one to do it! before thinking about how could I do it, I have happily played with mom and I made her happy and I told her, now I'm gonna work on many projects, she told me, with a smile, son "God knows " when I checked my phone this first video shown of my screen! I just give thanks to God!
May God Grant it to this team!
😊 😊 😊😊
Thank you - this is the best way to learn responsive bar menu I have seen! Thanks a million!
Great thx man! I tried all day to do it without result, but with you tutorial i did it in 30 min! lov u
with that music... everything stays relaxing for work
For thos who's OWN INTERPERTATION on this navbar didnt work. I went through the pain.
Here's what to do:
1. Delete that jquery thing, and delete the css class ".active"
2. on the div surrounding your navicon or svg add this: onclick="hideAndShow()" (mine looks like this: )
3. add an id to the ul-tag (, mines called: id="ul")
4. and in javascript you should copy this if-statement. and replace the ('ul') with your id name
heres what your code should look like:
function hideAndShow() {
var x = document.getElementById('ul');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
srsly, shouldnt have got to know this without God's (Jesus' fathers) help :'""D!
thanks man !
This was a great tutorial! Straight-forward, easy to follow steps. Thank you. P.S. The music was soothing too, thanks for that.
thanks a lot sir. I can't believe you help me this way. really thank you so much. No youtuber help me like this. this video totally solve my problem.
like totally totally?
I am uncomfortable ?
Responsive Menu Toggle Without JavaScript
ua-cam.com/video/Nc-aSM12BIA/v-deo.html
hello where r u from? puk?
You are the best css maker bro...
Please make a tutorial "how to make responsive one page for company profile"
thanks a lot sir. it really helped me a lot to learn this new concept of media query and css. thanks a lot. it was so much helpful
How would you fit a logo in on the right side of the nav bar? I have added it but it won't go inside the blue box next to the words but instead just below. I tried placing inside the tag but this didn't work either
thx for the tutorial, btw why if i change the into , it doesnt work? thankss
I loved this. Been searching for a video like and was really easy to understand 👍🏾
This is what i've been searching for, thank you, it was helpful❤
what tool are you using to test the responsiveness? its great.
just right click in browser, inspect and on the left top corner of inspect you see a screen with a cursor an next to it a mobile and pc click on that. yr welcome
Do you use bootstrap ,etc when you build websites and such?
Great video
straight to the point
Very much helpful tutorial.
i write the same code but it dosen't work with me?
Sir plz tell me that how can I make multiple sub menu along with this code?
Wow yaar Supperb sir its Really amazing video
I'm doing exactly what you are doing, but the last step isn't working for me. I can't click the actual hamburger icon and I have no idea why. You are Call "Menu" But now is call to "Active function" don't give wrong idea
same here, found a fix?
subscribe
ua-cam.com/channels/cPVUpU3kSI6TfUt6BoGtFg.html
I have the same problem too, how can I fix it? please
@@mrakstudio13
I put the script in head tag and this worked for me
$(document).ready(function() {
$(".menu").click(function() {
$("ul").toggle();
});
});
Thanks for the tutorial
Thanks this is very helpful
Not working for me, tried following step by step struggling when it comes to java bit. Cant get the menu to drop down
Good tutorial
Thank you everythings ! :)
Great tutorial!
Thank you!
Music was excellent too!
It's relaxing music
I have never been so depressed before
I KNOW RIGHT
Wtf your depression got to do with the video ?? Go seek help
I really appreciate the effort in putting this wonderful resourceful video together and I will appreciation if you give a link to the source codes used in the video
Ahh this was amazing and did exactly what I needed. Thank you!
Great tutorial. Clean, simple and to the point. What is this music?
cryptic sorrow by kevin macleod :)
Thanks for the tutorial! Works perfectly.
best video of your channel........keep coming....upload "footer with social networking icons".
I have a side navigation bar which is on the same horizontal level as my text with animations. When i go to click over the navigation bar links, the hit box for each of the links is jagged and disjointed. I have been playing around with widths and floats but the only way to stop the hit box interference is to have it on a different horizontal level than my text with animation. This *is* a problem with the JS as when i do not use the JS, the hit boxes return back to normal. Please help!
Very Thaks! I love u man!
welldone
Doing great work brruh...helping hand for beginners like me..!!!
Bhai media query mai jo ap neah active name ki class likhi hai woh class toh ap neah html mai kahin bhi declare hi nahi ki toh is k barey mai bata dain
Aha, it didn't occur to me the class could be toggled to give the list a different display; I was setting style.display with JS which was causing issues. Helpful video!
In a single page website when click is on link the corresponding section is coming under the fixed header what should I do to fix it help me out.
Excellent, short and upto the point. Thank you so much
ua-cam.com/channels/cPVUpU3kSI6TfUt6BoGtFg.html
Conteúdo muito bom. Parabéns.
Hey that's was nice but the problem is in mobile version there is no hover effect.
me too
did u ever hover on your mobile?
you don't hover when viewing on mobile anyway
your video was very helpful
Hello man! how to make it smooth smooth appearance??
Thx. Very good and quick tutorial!
Great tutorial, thanks...☺️☺️☺️
you are awesome, tanks for this tutorial.
Thanks!!! Perfect introduction!
Please please please, what is the name of the music you used for this video. its familiar but i cant remember it I love the sound. help.
you are a genius!
Thank you so much ❤️
You written javaScript on video name but you are using jQuery in the video. Why?
The toggle button is not working in my case....can anybody help
Wait why cant u just make a variable like onOff and make it toggle depending on the value of it...? Im new so pls tell me
You new? You talk like u a expert
how can i get your source code??
how to add transition while open of toggle menu ?
Very Helpful man. Thanks!
Sir active class to h he nhi coding m kha se aaya wo 🤔🤔🤔
Awesome
Hello, I did everything the same as you did and on the last step the menu does not appear when clicking on the icon. Could you help me please? Thank you in advance
same problum bro.
last me chutiya banaya hai isne
sir kiya ham boostrap 3 or boostrap 4 ko ak sath marge kar ke bana sakty hn
got everything same in my code, but toggle doesn't activate ul drop-down
Same here
Excelent
Very good video it's works
HI! For some reason when I try to add the bars to my nav bar it kicks all of my CSS code out and just the bars show up above the unformatted list. Anyone have any thoughts?
what's the song's name you used on your tutorial? sounds great!
i want to create register button right side top can you help me?
Hello, I did everything the same as you did and on the last step the menu does not appear when clicking on the icon. Could you help me please? reply me shortly if you have solution of this problum i think you make fool of all your viewrs becouse the last step doesnt work
hi everything works fine but when i click on the icon the menu doesn't show up can i get some help please?
mine wasn't working too until i moved the jQuery links and script just above the body closing tag and i also figured out i had omitted a dot before my class name selector. check that
thank you every much i will give it a try
Replace menu in the script with toggle or change all toggle to menu
$(document).ready(function(){
$('.toggle').click(function(){
$('ul').toggleClass('active');
})
})
Thanks a lot sir ! this fixed it
check a div =
It was so usefull
Very helpful. Thanks!
What Google Chrome extension are you using to test the responsive design? Does anyone know what he/she is using?
It's not an extension. Just right-click any website and then go to "Inspect". Or just click Ctrl+Shift+I and it will open up the Inspect view. Then select "Responsive" in the top bar where you can set the zoom value aswell.
Sorry 4 bad english ^^
Good luck!
I don't think its even an extension per se. Just open your code in Chrome, right click is select inspect. Then you can click the dev tool in the top corner, the icon looks like a tablet/phone.
And yet you never answer but you ask a question ?!
@@_qry I don't understand people ask but never answer back
How would you add a transition to the menu when you toggle it?
why in th ul tag, margin 0 auto, not center the ul, but at the left
Thank you so much!!!!!
Can you please share CSS code with us.
Multi level please with flexbox
Hello,
give me a link to background music.
Should have lowered width of toggle button and floated it to the right
how can i position my navbar to the right?
its awesome
That was beautiful, Thank You!
Im not been able to make the javascript part to work,
I have it like this:
Home
About
Services
Contact
and the script like this:
$(document).ready(function() {
$( '.menu').click(function() {
$('ul').toggleClass('active');
})
})
Do you know why is not working? When I click the menu icon nothing happens
add the jquery cdn you can get it here code.jquery.com/ ..
I added ,
This is how i have it:
$(document).ready(function() {
$( '.menu').click(function() {
$('ul').toggleClass('active');
})
})
the problem is bcos of ur nav class .. do u code ur css like this:
ex:
.navsup ul {
display:block;
}
dont do that instead do "nav ul"
or add a class on tag
-- im bad in explaining so gonna post my code below:
JS MENU NAV
* {
padding:0;
margin:0;
}
.navsup {
background: #333;
display: flex;
justify-content: center;
}
.navsup a {
text-decoration: none;
color:#fff;
display: block;
}
.navsup a:hover {
background: #222;
}
.listMenu{
list-style: none;
display: flex;
}
.listMenu li {
padding:.8rem 3rem;
}
.listMenu li:hover {
background: #222
}
.toggle {
display: none;
background: #222;
color:#fff;
font-size: 24px;
padding: 0 10px;
}
.active {
display:block;
}
@media screen and (max-width: 768px) {
.toggle {
display: block;
}
.menu {
cursor: pointer;
}
.listMenu{
width: 100%;
display: none;
}
.listMenu li {
display: block;
text-align: center;
}
.active {
display:block;
}
}
Home
Services
About
Contact
$(document).ready(function(){
$('.menu').click(function(){
$('ul').toggleClass('active');
})
})
@@mijoongie7570 Thank you so much mijoongie!!! You fixed it for me! I was targeting a class I had created in my CSS and the toggle didn't work (MyMenu ul li, etc), but once I read your comment, I changed all my CSS to target nav instead... "nav ul {display: block}" and "nav ul li", etc., then the toggle worked!
how to make a current-menu-link...color active link...??? menu tab
Can you please provide the source code??
If you want to learn something then try to write code
is this from ovh website or what
i think there is a bug, after i drag and reach 768px or lower and then click the toggle to on/off nav menu, then drag back bigger screen menu gets disappear. its come back after refresh page, hope you got it.
+web.or. die yes bro....i'll fix it and reupload...thanks
sure
sir how to use bootstrap 3 screen size 991 navigation bar please explain
this was so freaking helpful, thanks!
Do I need th .js outside link? I have no internet... or can I just work with my external .js page?
no internet hah? then why could you post this
same coding lagane k bad bhi work ku nhi kr rha toggle
it is not working in my navbar...
what to do if an error occur saying
newFunction is not defined
at HTMLElement.onclick
awesome.
Thanks for the tutorial but sadly the font awesome icon didn't work it showing blank square.How to fix it?
i think ur font not installed properly
use this and it should work
just remove the 's' to read and reload your page. that's if you have it on your copied link from fontawesome.com as i did.
Bro thats an older version the newer one has new classes