How to Create the Side Navigation Bar Using HTML and CSS | Vertical Navigation Bar
Vložit
- čas přidán 26. 08. 2024
- Vertical Navigation Bar -- Check out how to create the Side Navigation Bar Using HTML and CSS
#VerticalNavigationBar #SideNavigationBar #NavigationBar
-------------------------- Demo Files --------------------------
Download the Exercise Files here,
github.com/cod...
Codepen Link,
codepen.io/coo...
-------------------------- FOLLOW ME --------------------------
Facebook: / codingmarket
Twitter: / coding_market
Codepen: codepen.io/Raj...
-------------------------- CDN LINKS --------------------------
Font-awesome Site,
fontawesome.com/
Google Fonts Link,
fonts.google.com/
-------------------------- Donate --------------------------
Support my channel by Donating
www.paypal.me/...
---------------------------
If you like this video, please subscribe to my channel.
Thank you
Music made me sleep, but was relaxing. Absolutely great presentation of a how -to. I mean there was no talking and the cursor guided me so well I didnt need any voice-over. Thank you so much!
lmao me too
I like the way you code, very simple and modular. Anyway, the background music was so relaxing
This was amazing. I usually hate tutorials with no voice-over, but this was exactly what I needed. Very well done.
I love this tutorial! Clean and simple. Gave me good idea for the side bar for my personal website. Thank you :D
i´ll have a personal website ,I am a I.T
Nice choice of music.... my heart felt so relaxed.
I loved this! I started making an electron app and this is what I needed to help me get started as an amaeture.
instead of can you also put to create the navigation bar?
Han you can use the html5 new tags
Thanks buddy .. it was the best and the background music wasn't noisy .. really grateful for that ..
May God bless you 💫
This video was really helpful! Music was chill and you didn't even have to explain a lick for me to understand:)
thanks a lot, you explain a lot with no words. just what i needed.
Im probably late to the party, but it was really useful, thank you for the clarity!
✨The intro tho... ✨
Why did you use display: flex on the .wrapper class in CSS ? What does it add to the overall design ?
Thank you so much for the source code.
great video- really helped me develop this element of my first website. Thank you!
This guy deserves more likes and subs Nive tutorial simple and easy
Thanks for the tutorial, btw The music made it better
You have saved my carrier, thank you 😉
Thank you so much, this video helped me a lot and clarified me many doubts, very helpful!
Thank you so much for this video. It cleared all my doubts. Thanks alot
Relaxing music and awesome tutorial! Thank you very much
very helpfull video best i came across. my question can you please show how to make sub menus as well. real beginner here
I'm a student and a beginner on this coding stuff, so I have a question: why does he use and adds the class instead of using , , , etc.?
I would say that it is just a preference of only using divs
From where can i get the code for making this whole thing?
this was so clear thank u so much
hey sir , i had problem when i put color it doesn't work ? in body and wrapper
Its really helpful
Make more videos like this please
About this tutorial your work was awesome. But You should give ur voice when u are making the tutorial. It will be helpful for us
Can i ask why is there position relative on wrapper ? thanks.
Please help. I followed your tutorial, and then i add bootsrap link and then it messed up the design. What should i do to fix this without removing the bootstrap, because i need its features in the content.
Sorry im just a beginner
how do i make the text in the center i copied correctly but the text is at the bottom
what plugins do you have on to allow for the li*7>a and that to work
Awesome job, Thanks so much!
thank you so much for this amazing tutorial ..
Just one key point left out. If one want the link to open in the section to the right retaining the sidenav.
hello am collins all the way from zimbabwe ... bro this is great but am having a challenge ...i included bootstrap as this dashboard nw using it as my navigation bar dashbord bt cz i included bootstrap the toggle item now not workin when i click it my screen now turning white blank white rather than togglin
Thanks for great tutorial buddy!!
I loved this at first but when I went to code pen to download it it was bad cos you can't copy the cas codes
Thanks a lot for this tutorial !
why inside the menu doesnt have stuff? thats what i need to know
I want to display all the menu list item of side menu bar from data base. How will do it.
all these videos on youtube without making the sidebar(map, bloc,contact us) clickable???
please make a video about it
Wow! Thank you so much. This video was really helpful 👏👊👍👌
Watch this video as well it may help you
czcams.com/video/Ihwqun_HmXs/video.html
14:53 I woke up here
I need to create to do list app using HTML and CSS only.So, how can I make this app as gmail inside page type.
that intro was so extra
Amazing. Thankyou for this! U got New sub here! ❤️ I'll make admin dashboard. Thanks for this!
Amazing video and very clean code.
How can I add a dark mode and make it responsive?
how can i add background images besides the navigation bar?
Icon is not working what to do
Check whether u have imported the font awesome library into your files
the soundtrack came from the move 'The Social Network'(Story of How Mark Zuckerberg build facebook')
Thanks,very explanatory
Is it responsive page ?? Bootstrap
Mute the sound. and play music natively. Require the sound for if the instructor is speaking on the tutorial however the instructor doesn't speak yet plays irrelevant music which sometimes don't always like the style.
you probably notice me but i hopy you can help me in that how can i add if anyone sees this pls help how can i add a footer, as well as pictures in violet are where the links are and also is the link on the side be immovable?
5:27 I saw your code is
.wrapper {
display: flex;
}
I came up with a different way.
.sidebar {
position: fixed;
width: 300px;
}
.main-content {
margin-left: 300px;
}
What's the difference? Does these 2 codes work the same?
Hi, flex is to float the sidebar and main content side by side. Then I am fixing the sidebar using position fixed. When we use the position absolute or fixed these elements move out from the context. So the main content goes behind the sidebar. Then we have to use margin left to make the main content visible
i have a 18' 1366x768 display and the sidebar goes under the windows bar :(
bro, i want to ask u. why yeah, my simbol not detect in my laptop?
I'm looking for a vertical mega menu bootstrap. Please help!
how to know that what to write in script tag
I need to know the ambient music, PLEASE!!
heyy man! thanks for this! ... but i need help, i need to change the main_content background, how i do it¿
.main_content {
background: | | ;
}
Amazing! Trully. + Subbed
Thanks man!!
Thanks bro
i slept in a minute , the song in the background
😂 haha
Amei👏🏼👏🏼👏🏼
Gracias por tu video y explicacion es justo lo que necesitaba.-
czcams.com/video/Ihwqun_HmXs/video.html
Why .sidebar class is used under .wrapper class, we could have used .sidebar class directly, I mean what is the benefit we are getting of using .sidebar inside .wrapper
Ya we can use.. It's according to developers convenient. That's it
Awesome
Hi, i can't click the menu
How do you change the rightside content by clicking on a menu?
Create different html pages and link those pages in the anchor tags..
you just save me 🤯🙏
Thank you so much
thank you
it didn't work for me. The problem was(which I solve) you have yo add height:auto, width:auto to h2 and ul li items. otherwise h2 will take full page then you can't see ul li items.
Is it responsive?
ty so much
Nice
Fantastic
Thank u so much!
thanks alot
Nice content. it would be great if you add subtitles
Thanks
Thanks for this
thanks brother !
THANKS DUDE !
very useful thanks
Great
love this
Does it work for responsive sidebar menu?
Check out my latest 2 videos on responsive sidebar menu.. It may help you
Its awesome
where is the responsive part of this tutorial?
Is it responsive like for mobile screens?
czcams.com/video/jN0TJ5k_Sps/video.html
Check out this video..
Hi, in order for me to put content on home, do i need to make another html file for the home? or can i make within one same html file. Thank you
It's depending on website u wants to build. If u want a site with multiple pages then u have to create separate html files then link them in each.
Create submenu also like click on home submenu should appear..pls
many thank
I needed a mobile friendly collapsible one
czcams.com/play/PLV4YoUAVxWRcSI3wgJeqzuzuws2HRYt-t.html
Link of playlist check out.. There are variety of side navigation bar..
Can u provide the html and css code
Check the description section for code link
What is name of the code editor? And I saw li*7>a doesn't work on sublime text. I am new to web development.
You have to install Emmet plugin in sublime Text editor.
@@CodingMarket thank you
thank you so much