Responsive Sidebar Navigation Menu Using HTML, CSS and JavaScript
Responsive Sidebar Navigation Menu Using HTML, CSS and JavaScript
In this tutorial, we are creating a Responsive sidebar with HTML, CSS, and JavaScript. In this video, i will demonstrate how to create slide in sidebar using CSS and JavaScript. Along with this we also create sliding animation for the toggle menu button.
We will add first name of the website and then as a navigation item we will add home, blog, features, Pricing and contact us section. We create hover effect on the Navigation item. Using font awesome website we use icons in the project.
Learn More From Our Website:-
www.dailywebtuition.com
Attribution
Icon made by monkik from www.flaticon.com
Music: https://www.bensound.com
Photos: https://www.pexels.com
Hey Everyone welcome back to daily tuition. in this tutorial I will show you how to create sidebar with animated hamburger menu. in this sidebar we will add website name navigation item and social links. along with that we will animate hamburger menu. so when you click on the hamburger menu you will see this sidebar.
You can see this site is responsive for mobile devices also. we are using CSS for styling HTML and also use JavaScript to add click event to the hamburger menu.
so before we start this video make sure you press the subscribe button and also press the bell icon to get notified of my every new video and also like this video if you find anything useful.
so before we getting late let's get started.
so first you need to open empty folder in the editor and create two file in that folder index.htm and style.css.
in index.html file create simple HTML5 snippet and specify title text.
I will spit this window so you will know what is going on.
after that we link two files. first one is font awesome CSS file to use icon in the project and second is style.css
In the body tag create a container class and in that class put the navigation with navbar class and specify ID nav ID.
In the navigation create type button and specify a class toggle collapse and ID toggle button in this button create a span tag and specify class toggle icon using this class we create hamburger menu.
Now we will create navigation. so we will add in order list tag with site nav class and here we put a li tag with nav item class. in the li tag we insert and anchor tag and specify site name class. so here we specify website name.
after that we create second navigation item with item class and insert anchor tag with nav link class.
So here we First specify first navigation item Home.
after that we insert another li tag with nav item class and create anchor tag with nav link class specify blog text.
I will fast forward this video and create features pricing and contact us navigation item. I will use same classes to create this navigation items.
On the last navigation item we will insert social icon font awesome website. So I will add some social icon here Like Facebook Twitter Instagram and YouTube.
how the time in style this HTML. in style.css select body tag and specify margin 0% and padding 0% then I will apply Font family and specify background colour two body of the document.
then I will create navbar class and specify position absolute right 0% width 260 pixel you are free to choose your own navigation width.
specify height 100% background colour black text align centre and transition property 0.8s
then I will select side nav class which is child of navbar class specify list style type none padding 0 and margin 0.
Create an nav item class specify display flex.
then select the child element of navigation item navigation link and specific text decoration none colour font size 1.1em padding 1em and flex 1 property to fill the Remaining space of navigation item.
after that create hover effect on a navigation link specify background and colour property.
Now now we will align toggle button at the right place. to create toggle collapse class specified float property left margin left -3.3em margin top. 5em content blank outline inherit border 0px background transfer.
now we will create toggle button. so using toggle icon class I will create toggle button. In the previous video I showed you how to create toggle icon with animation.
we are creating the same code here also so you can skip this section review if you already watch the previous video if not then you can watch this video from the top right corner of the screen.
in the toggle icon code I just made some changes And specify different width for horizontal bars of toggle icon.
After creating the toggle icon we select site name class and specify text decoration none padding 1.3em font size 2em and color whitesmoke.
Select the social icon using nav item last child i tag and specify padding .5em.
Then create remove hover effect from the social icons.
And specify Background colour black and colour white.
if you have any question then comment us.
Sur cette page du site, vous pouvez voir la vidéo en ligne Responsive Sidebar Navigation Menu Using HTML, CSS and JavaScript durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Daily Tuition 13 juillet 2018, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 44,981 fois et il a aimé 601 téléspectateurs. Bon visionnage!
