Navigation Bars in CSS web design ka ek important component hai. CSS Navigation Bars users ko easily website ke different sections ke beech navigate karne me help karta hai.
CSS Navigation Bar usually HTML list elements (<ul> aur <li>) se banaya jata hai, aur fir CSS se style kiya jata hai taaki achha look mile.
CSS Navigation Bar generally webpage ke top ya side me hota hai.
Vertical navbar:
Home
News
Contact
About
Horizontal navbar:
HomeNewsContactAbout
Navigation Bars in CSS = List of Links
CSS Navigation Bar basically links ki list hoti hai, isliye HTML <ul> aur <li> use karna perfect hota hai:
Example
Ab CSS Navigation Bars me bullets aur margins/padding remove karte hain:
Example
Example explained
Set list-style-type: none; – list ke bullet points remove karta hai
Set margin: 0; – default browser margin reset karta hai
Set padding: 0; – default browser padding reset karta hai
CSS Vertical Navigation Bar in CSS
Navigation Bars in CSS me vertical navigation bar me links vertically stacked hote hain (ek ke niche ek), aur usually left ya right side me aligned hote hain.
Vertical Navigation Bars in CSS ka basic structure: <ul> ke andar <li> aur uske andar <a>.
Example
Example explained
ul block me width (200px) aur background color set kiya gaya hai
li a block me <a> elements ko style kiya gaya hai
display: block; se pura link area clickable ho jata hai
padding aur color apply kiya gaya hai
text-decoration: none; se underline remove hota hai
li a:hover me mouse over karne par background aur text color change hota hai
Active State in CSS Navigation Bar
Navigation Bars in CSS me active class use hoti hai current page ko highlight karne ke liye:
Example
Center Navbar Links & Add Borders in CSS
Navigation Bars in CSS me links center karne ke liye text-align: center; use karte hain
Agar navbar ke around border chahiye to <ul> me border add karte hain
Agar andar bhi borders chahiye to har <li> me border-bottom add karte hain (last child ko chhod ke)
Example
Full-height Vertical Navbar in CSS
Navigation Bars in CSS me full height sticky sidebar banane ke liye:
Example
Note: Ye mobile devices par properly work nahi kar sakta
Responsive Navbar in CSS Navigation Bar
Navigation Bars in CSS me responsive navbar banane ke liye CSS media queries use hoti hain
Horizontal Navigation Bar in CSS Navigation Bar
Navigation Bars in CSS me horizontal navigation bar me links side by side (left se right) hote hain aur usually top me aligned hote hain.
Structure same hota hai: <ul> ke andar <li> aur uske andar <a>.
Horizontal Navbar Using Float in CSS Navigation Bar
Example
Example explained
overflow: hidden; list items ko bahar jane se rokta hai
background-color: #333333; navbar ka background set karta hai
float: left; se <li> elements side by side aa jate hain
display: block; se width, padding, height control kar sakte hain
padding se links ke beech spacing milti hai
text-decoration: none; se underline remove hota hai
Horizontal Navbar Using Flex in Navigation Bars in CSS
Example
display: flex; ek flex container banata hai jisme items default left se right show hote hain
Horizontal Centered Navbar in Navigation Bars in CSS
Example
justify-content: center; se Navigation Bars in CSS me links center me align ho jate hain
