Learn how to create a fixed side navigation menu with Html and CSS | Bloody Techie
HTML Code Explanation:
1. The HTML structure consists of a basic document setup with a 'div' for the sidebar navigation and a 'main' section for the main content.
2. Inside the 'div class="sidenav"', there are 'a' tags representing navigation links such as Home, Services, Clients, Contact, and About.
CSS Code Explanation:
1. The CSS code styles the sidebar navigation and main content.
2. * selector sets padding and margin to 0 and uses border-box for box-sizing to ensure proper layout.
3. .sidenav styles the sidebar:
1. It sets its width to 160px, position to fixed, and background color to '#111' (dark grey).
2. It ensures the sidebar stays fixed on the left side of the viewport with position: fixed.
4. '.sidenav a' styles the links inside the sidebar:
1. It provides padding, font size, color, and block display for each link.
5. .sidenav a:hover changes the color of the links when hovered over.
6. .main styles the main content area:
1. It adds a left margin to accommodate the width of the sidebar and sets padding for content.
-----------------------------------------------------------------------------------
Tags
bloody techie,how to,fixed side navigation,CSS navigation menu,web development tutorial,web design tutorial,responsive web design,HTML,CSS,beginner web development,user interface design,sidebar menu using html and css,how to create sidebar in html and css,subscribe,bloody techie youtube channel,css beginner tutorial,design navigation bar using css,figma tutorial for beginners,how to create a navigation menu in wordpress,how to make menu card using html and css
-----------------------------------------------------------------------------------
Hastags
#fixedsidenav #cssnavigation #webdev #webdesign #responsivedesign #html #css #tutorial #beginners
-----------------------------------------------------------------------------------
Inspirations
@MrBeast
@madangowri
@a2dchannel
@TechBossIndia
@TamilTechOfficial
-------------------------------------------------------------------------------------
Song: Jarico - Island
supported by @FreeBackgroundMusicForCreators
#BackgroundMusicWithoutLimitations
https://bit.ly/2XoXFnb
-------------------------------------------------------------------------------------