Navigation Bar In CSS In Hindi

Navigation Bar In CSS In Hindi

CSS

Navigation Bar In CSS In Hindi – Is tutorial Me Navigation Bar Ko With Examples Explain Kiya Gya Hai, Navigation Bar Har Ek Website Me Use Kiya Jata Hai, Isliye Yah Tutorial Bahut Important Hone Wala Hai, Practice Kar Kar Ke Aap Bahut Attractive Navigation Bar Bna Skte Hai |

Yadi Aapne  HTML Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai | Kyoki Usme Milenge Aapko HTML Full Course A to Z |

Navigation Bar In CSS In Hindi

What Is Navigation Bar In Hindi

Aapne Dekha Hoga Ki Har Ek Website Me Top Par Ya Side Me Links Ka Ek Set Hota Hai , Use Hi Navigation Bar Kahte Hai , Jaisa Ki Apni Website masterprograming.com Me Bhi Top Par Navigation Bar Hai, Jo Ki Lagabhg Har Website Me Hota Hai |

Example :

Navigation Bar Do Type Ke Ho Skte Hai –

  • Vertical Navigation Bar
  • Horizontal Navigation Bar

Ab Bat Karte Hai Ki Navigation Bar Banate Kyo Hai ? To Iska Simple Sa Answer Hai Ki Website Categorize Karne Ke Liye Navigation Bar Banaya Jata Hai , Navigation Bar Ki Help Se User Asani Se Wesite Ko Use Kar Skta Hai |

Navigation Bar = List of Links In CSS In Hindi

Navigation Bar HTML Links Ki List Hoti Hai Jisse CSS Ki Help Se Goog-Looking Navigation Bar Me Bdla Jata Hai |

Ab Ham Dekhte Hai Ki Kese Html Links Ki List Ko Good-Looking Navigation Bar Me Bdla Ja Skta Hai , Iske Liye Apko Kuchh Steps Follow Krne Honge –

Step – 1 : Navigation Bar Banane Ka Sabse Pahla Step Hai – Ham Vo Links Lenge Jo Ki Hme Navigation Bar Me Dikhane Hai Aur <ul> And <li> Tags Ki Help Se Ham Un Links Ki List Bnayenge |

Example :

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Hmne Simple <ul> And <li> Tags Ki Help Se Ek Unordered List Bna Li |

Step-2 : Ab Is Step Me CSS Properties Ki Help Se Bullets Marker Ko Remove Krenge Aur List Ki Margin And Padding Bhi Remove Krenge |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Hamne CSS Properties list-style-type : none; Set Kar Ke Bullets Remove And margin :0; and padding : 0; Set Karke Margin And Padding Remove Kar Diya Hai |

Note : Vertical Navigation Bar Ya Horizontal Navigation Bar Dono Type Ke Navigation Bar Banane Ke Liye Apko Upar Diye Gye Dono Steps Follow Krne Hai , Aur Aage Ke Steps Dono Ke Individual Hai Jo Ki Ham Ab Dekhenge |

Vertical Navigation Bar In CSS In Hindi

Vertical Navigation Bar Banane Ke Liye Upr Diye Gye Dono Steps Follow Karne Ke Bad Ab Ham <li> Ke Andar Wale <a> Tag Ko Style Denge ,

Ham Jante Hai Ki <a> Ek Inline Element Hai Isliye <a> Ko Pahle Block Element Bnayenge Jiske Liye Ham Uski Display Ko Block Set Krenge Aur <a> Ke Liye Kuchh Width Set Krenge |

Example : Upar Diye Gye Example Me Hi <a> Ke Liye Style Add Krte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

To Is Tarah Aap Vertical Navigation Bar Bana Skte Hai , Aap Isme Thodi Aur Style Add Kar Ke Ise Attractive Bna Skte Hai

Vertical Navigation Bar Examples In CSS In Hindi

Ab Kuchh Examples Dekhte Hai Jisme Ham Bahut Attractive Vertical Navigation Bar Bnayenge | Jisse Apko Idea Ho Jayega Ki Kis Tarah CSS Properties Use Kar Ke Aap Apne Navigation Bar Ko Good-Looking Bana Skte Ho |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: grey;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  font-family : sans-serif;
}

li a:hover {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Active/Current Navigation Link In Hindi

Jab Ham Navigation Bar Ke Menu Par Click Karke Kisi Category Me Jate Hai To Navigation Bar Par Us Category Ke Link Ko Alg Tarike Se Style De Skte Hai Taki User Ko Yah Pata Rhe Ki Vo Konsi Category Ki Post Dekh Rha Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: lightblue;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: hotpink;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Center Links & Add Borders In Vertical Navigation Bar In Hindi

Agar Aap Links Ko Center And Navigation Bar Par Border Show Karana Chahte Hai To <li> Ke Liye text-align : center ; Property Set Karni Hogi Jisse <li> Ka Content Center Me Align Ho Jayega And <ul> Ke Liye Border Property Ki Value Set Karni Hogi , Links Ko Center And Border Add Karne Se Navigation Bar Aur Bhi Jyada Attractive Dikhta Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

li a.active {
  background-color: hotpink;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>
</body>
</html>

Output :

Dekha Ki Kese Navigation Bar Par Border Add Ho Gya Sath Hi Links Bhi Center Me Show Ho Rhe Hai Jisse Navigation Bar Bahut Hi Attractive Dikh Rha Hai |

Full-height Fixed Vertical Navbar In CSS In Hindi

Aapne Bahut Si Website Me Dekha Hoga Ki Vertical Navigation Bar Screen Ki Full Height Ko Cover Kar Leta Hai , Page Ko Scroll Karne Par Bhi Vo Navigation Bar Usi Jagah Fixed Rahata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color:pink;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: black;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div{
	margin-left:25%;
    padding:1px 16px;
    height:1000px;
    }
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div>
  <h2>Master Programing</h2>
 <p> Master programming is a website that enables people that aren't well versed in English to learn programming languages like Python, C, C++, JAVA, CSS, HTML, JavaScript, PHP in HINDI. Masterprograming.com provides all the Programming Language education for ABSOLUTELY FREE OF COST.</p>
   <p>Learn Python</p>
   <p>Learn c</p>
   <p>Learn c++</p>
   <p>Learn Html</p>
   <p>Learn CSS</p>
   <p>Learn PHP</p>
</div>   
   
</body>
</html>

Output :

Horizontal Navigation Bar In CSS In Hindi

Ab Ham Durse Type Horizontal Navigation Bar Banana Sikhenge , Horizontal Navigation Bar , Vertical Navigation Bar Se Jyada Use Kiya Jata Hai |

Hamne Do Steps Dekhe The Pahla Tha Links Ki List Banana Aur Dusra Tha Bullets Marker Ko Remove Karna , Ab Ham Inke Age Wale Steps Dekhenge |

Horizontal Navigation Bar Banane Ke Do Tarike Hai , Pahla Hai – List Items Ko Inline Kar Ke Aur Dusra Hai Floating Kar Ke , Ab Ham Ek -Ek Kar Ke Dono Tariko Se Horizontal Navigation Bar Bnayenge |

Inline List Items In Hindi

Do Steps Follow Karne Ke Bad Third Step Hai , <li> Ke Elements Ko Inline Banana Kyoki By Default <li> Block Level Element Hai , Jisse Ki Links Horizontal Line Me A jaye |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Output Me Hamne Dekha Ki <li> Elements Ko Inline Karne Se Links Horizontal Line Me A Gyi , Aur Hamara Simple Sa Horizontal Navigation Bar Ready Ho Gya, Ise Style De Kar Bahut Achchha Banaya Ja Skta Hai |

Ab Horizontal Navigation Bar Banane Ka Dusra Tarika Dekhate Hai |

Floating List Items In Hindi

<li> Elements Ko Float Property Dekar Bhi Unhe Horizonal Line Me Laya Ja Skta Hai , Jisse Ki Horizontal Navigation Bar Ban Ske |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About US</a></li>
</ul>

</body>
</html>

Output :

To Float Property Ki Help Se Hamne <li> Ke Element Ko Left Float Kar Diya , Aur Kuchh Style Add Kar Ke Horizontal Navigation Bar Ready Kar Diya |

Ab Ham Horizontal Navigation Bar Ke Kuchh Examples Dekhte Hai, Jinme Ki CSS Property Use Karke Attractive Banya Gya Ho , Taki Apko Idea Ho Sake Ki Kis Tarah Navigation Bar ko Attractive Bna Skte Hai |

Horizontal Navigation Bar Examples In Hindi

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:blue;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family : sans-serif;
}

li a:hover {
  background-color: black;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Active/Current Navigation Link In Hindi

Jab User Website Ki Kisi Particular Category Me Jata Hai To Uske Link Ko Active Link Kahate Hai Kyoki Vo Link Abhi Active Hai , Jab Koi Link Active Ho To Use Alg Se Style De Kar Ham User Experience Ko Bada Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family : sans-serif;
}

li a:hover:not(.active) {
  background-color: black;
}

.active {
  background-color: hotpink;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Right-Align Links In Hindi

Yadi Ham Chahate Hai Ki Koi Particular Link Navigation Bar Ke Right Side Me Dikhe To Ham Us Particular Link Ki Style Me Float Right Set Kar Denge , Jisse Vo Link Right Side Me Show Hogi |

Example : About Us Link Ke Liye float : right Property Set Karke Dekhate Hai |

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family : sans-serif;
}

li a:hover:not(.active) {
  background-color: black;
}

.active {
  background-color: hotpink;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li style="float:right"><a class="active" href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Hamne Dekha Ki About Us Navbar Me Right Side Me Show Ho Rha Hai , Esa Ap Kisi Bhi Link Ke Sath Kar Skte Hai |

Border Dividers In Hindi

Ab Ham <li> Elements Ko Border Property Denge Jisse Ki <li> Elements Separate Dikhe , Aur Navigation Bar Aur Bhi Jyada Attractive Aur Professional Lage |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

li {
  float: left;
  border-right:1px solid #bbb;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family : sans-serif;
}

li a:hover:not(.active) {
  background-color: black;
}


</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

</body>
</html>

Output :

Dekha <li> Elements Ko Border Dene Se Navbar Kitna Attractice Lag Rha Hai |

Fixed Navigation Bar In Hindi

Aapne Dekha Hoga Ki Bahut Si Website Me Navigation Bar Fixed Rahta Hai , Matalab Ki Jab User Page Scroll Karta Hai Tab Bhi Navigation Bar Apni Jagah Par Fixed Rahata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

div{
	padding:20px;
    margin-top:30px;
    background-color:grey;
    height:1300px;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

<div>
  <h1>Master Programing</h1>
  <h2>Scroll this page to see the effect</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>
</html>

Output :

Output Me Hamne Dekha Ki Jab Ham Page Ko Scroll Bhi Karte Hai Tab Bhi Navigation Bar Apni Jagah Par Fixed Rhta Hai |

Ab Ham Navigation Bar Ko Bottom Par Add Karna Sikhate Hai ,Jo Ki Bahut Kam Use Kiya Jata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

div{
	padding:20px;
    background-color:grey;
    height:1500px;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About Us</a></li>
</ul>

<div>
  <h1>Master Programing</h1>
  <h2>Scroll this page to see the effect</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>
</html>

Output :

To Dekha Ki Kis Tarah Ham Navigation Bar Ko Bottom Par Set Kar Skte Hai , Aur Jab User Page Ko Scroll Karta Hai Tab Bhi Navigation Bar Apni Jagah Par Fixed Rahata Hai |

Sticky Navbar In Hindi

Hamne CSS Position Property Me Dekha Tha Ki Jab Kisi Element Ki Position Sticky Set Ki Jati Hai To Vah Element Page Scroll Karne Par Ek Perticular Situation Ke Bad Page Par Stick Ho Jata Hai , Theek Usi Tarah Hi Ham Navigation Bar Ko Bhi Sticky Bana Skte Hai |

Navigation Bar Ko Sticky Banane Ke Liye Hame <ul> Ki Position Ko Sticky Set Karana Hota Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}


</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<h3>Master Programing</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</body>
</html>

Output :

Output Me Hamne Dekha Ki Jab Ham Page Ko Scroll Karte Hai To Navigation Bar Top Par Stick Ho Jata Hai |

Dropdown Navigation Bar In Hindi

Aapne Dekha Hoga Ki Bahut Se Website Me Unke Navigation Bar Par Jab Kisi Link Par Click Kiya Jata Hai Ya Hover Kiya Jata Hai To Uske Niche Kuchh Aur Link Show Hone Lagati Hai Jise Dropdown Link Kahate Hai , Dropdown Navigation Bar Bahut Jyada Kam Me Liya Jata Hai |

To Ham Sikhate Hai Ki Kese CSS Properties Ko Use Kar Ke Ham Dropdown Navigation Bar Bana Sakte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: green;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li class="dropdown">
    <a href="" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Master Programing</h3>

</body>
</html>

Output :

To Is Tarah Ham Dropdown Navigation Bar Bana Skte Hai |

Agar Apko CSS Navigation Bar Se Related Koi Problem Ho to Aap Comment Section Me Puchh Skte Hai |

Leave a Reply

Your email address will not be published. Required fields are marked *