How To Make Side Navigation Menu Using HTML And CSS | Sidebar Menu Design
HTML-код
- Опубликовано: 31 май 2024
- Learn How To Make Side Navigation Menu Using HTML And CSS | Sidebar Menu Design With Animation Step by step
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will create a web page with Sidebar navigation menu using HTML and CSS. In this sidebar menu we will add animated Hover Effect. When we will move cursor from one menu item to another, then the background color will also move with smooth transition.
Download Images:
drive.google.com/file/d/17Pg8...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
I have seen you at 3 year ago when your subscriber 60k you doing a great work with full effiency i appericiate you to reach 1m subscriber in the year of end....
before I was watching this video I never understand @media how this works, Thanks for the clear explanation you are amazing!
Thanks brother really appreciate your efforts, LOVE FROM NAGPUR INDIA!
Best video for understanding menu bar tutorial...👍
Appreciate 👏
Sir you are a best web teacher 😊
Very good video! And many thanks for the images download link.
Thank you! Your tutorial is very helpful
Thank you very much sir, your tutorial is very beautiful
Very nice Tutorial. Thank you very much!!!
thank you very much bro, I really didn't know that you cant do that much with CSS only
this guy is our hero!
Respected Sir,
Your tutorial is very nice and helpful for us. ❤ Thank you so much 🙏
Very good Machi....better articulation than all the ghoras...
Thank you so much,you are better programmer
Good and excellent teacher, kudos
Great Work. Thanks. Looking forward to responsive admin panel tutorial in the future.
my all time coding teacher
Simple and good explanation
i love your Tutorials
Sir you are the legend
Thanks its really useful
thank you so much sir....
Awesome 👍
thanks ser, for your tutorial
cool! Thanks a lot!
you are fantastic bro
Very helpful 🤟
Very helpful
Hey big brother I just want to say Thanks .. I completed my College assignment by watching your videos .. thanks man for the help . 😉
Ohh that's great bro
Your tutorial is very helpful.. kindly make full website using only html and css for biggers..and try to make videos for beginners also.. thanks
Hi Abhishek,
He has made 5 complete website already you can visit his channel and find it on the first
appreciated with you sir
Superb.
i think position: sticky; is better because fixed will make the navbar hide the content in the website
Agree with u I do use same
Amazing
Great
Thank You
Fantastic
Hi! Your videos are so helpful! In future, can you make a page where there is a gallery with multiple folders? That is a folder only with pictures with children, one only with pictures with cats etc. ?
try using cards :)
Nice👍
Sweet
Genius
very usefull for me as a beginner, thankyou so much friend
Glad you like this sidebar menu design tutorial
thanks video
Thank
Thank you for this tutorial!!! I was looking for something just like this. Wondering if there is a way to keep the white box on any menu link that is active. For example, if I click from the dashboard tab to the messages tab, can the box stay behind the messages tab to show that is the page I'm currently on? Any suggestions would be much appreciated.
What would be the style for when one of these menu items is active? Would it just stay highlighted?
Can I use this side panel in the main section ?It should display parallel to hero image and all other content on main.
Can someone explain why when he added and after some css codes, that coverd the Dashboard tag. But mine it just covers that height that i set for
Wow I love it 💘
parle support koiren
Osm
This is awseom, but once its build how do i then fill the the huge blank space beside it ?
Awesome navbar. But how to auto set navbar to top position for small screen like smartphone with "three bar menu icon" to expand & navbar to side position for big screen like PC as it is shown in this tutorial? I personally feel like side navbar is not a good position for smartphone screen as it will block 20% of the screen content area in portrait mode 🤳. If you could make video in this it would be great!!
Please make a complete tutorial on how to make a ptc website using html and css
This was really helpful but I have one question. after creating this, the other website contents can't be aligned and are hidden because of the side navigation bar. Can you please tell me how to correct that?
1st view and like 😍😍
Hiya! Thank you for making this video. I followed your work step-by-step, and everything worked well until I added the smaller logo, which I was able to hide. The problem is that the smaller logo image is showing with the page icons only. There is no text now. Another problem is that the page icons and text moved down after I added the smaller logo, so the hover (white highlight) is not at the correct % now, e.g. 2.6%, 19.2% et cetera.
I am new at this, so I am having trouble finding the error. It would be great if you could help me resolve this issue.
Again, thank you for making this video. Yours was the only one that was clear enough for me to follow. I appreciate the time you spent creating it.
where can I find the full "anymate" logo because on the google drive its just the "a" logo and my code isn't working properly
You should consider using semantic HTML elements and avoid using divs every time. For example, instead of using div tag for creating header, consider using a header tag. Similarly for links you can use nav tag.
Can you please continue it by adding sub items to li tag and adding similar functionality to expand and collapse.
Yes sir please I will appreciate this slot🙏
Bro if i have a page design
Can u make for me and family 🙂
nice explanation with code
Glad you liked it!
Osm brother
Thanks 🤗
What is the use of that *~* in-between some line of codes. Tell me
Hi sir,
I need one help-
My hover box is not created with white box when I m putting over any it disappear, I checked multiple times but didn't get the exact reason.
Could you or someone pin point the issue. Wherever u have given colour similarly I have also given. Need your guidance here.
hi how to make a hyperlink to another html file to the navigation menu?
After adding padding to nav bars still spacing better them is not increasing. What is the solution for that? I have copied the same code as urs also.
Can you create a code about grading system please🥺.
When i put the div inside the UL it says me an error and i cant make the div transitioning.
sir i have problem in last step in justify content= center it not center perfect like yours why....
Could have sworn my icons disappeared after adding the hover effect. I'm creating a massive web site so I'm little confused where the problem is
in icons,
when you hover on theme why you use positioning instead of this simple way,
and thanks for your offer
.nav-links li:hover a{
background-color: #fff;
box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
border-radius: 6px;
}
.nav-links li:hover a {
color: #0d74f5;
Sir, what is work of (~) Tilde here.
✅
i have problem here. when i write display none in .active and also write .nav-links li:hover .active{ display block;} then it does not work. please help me
Bro it's Better.... But still u want to explain.... Some hard code why u wrote this... At the time of writing... 👍
hover not working for other item, showing white block on the item list without 1st item
ul in div 😳😳😳
My active box does NOT move to different child - it stuck with the last nth-child in code
Hello, my hover blinking why?
how to do the smaller screen in 22:44?
Source code, please
Plz send this Source code
Pls how do you create your logos
I can suggest u Figma it completely free software and an open source with a desktop app also. You can just make awesome or even higher Designs with it and u can find toturials on RUclips about it
Please I need source codes sir
This is nice, where do I get the source code?
Please read the video description
@@GreatStackDev I read the description and subscribed to the community but still I can't find the link
312 viewer
Source code?
Please send the source code
Where is source code
where is the source code?
hello
hello
hello
hello
hello
I got lost at adding icons from from fontawsome 😭😭😭😭, instead of showing icons my browser is displaying squares. what could be the issue?
You have used pro icons that need payment to use. So use free ones
hello
hello
hello
hello
hello
hello