Element for Navigation Links | CSS Navigation In Hindi

by

Element for Navigation Links | CSS Navigation In Hindi 

Use <li> Element for Navigation Links (Set of Links)

What is Navigation in HTML?

नेविगेशन- यह लिंक का एक सेट है। सूची तत्व आमतौर पर नेविगेशन के लिए उपयोग किए जाते हैं।

Unstyled Navigation

Example पर बिना style का navigation दिया गया है |

<ul>
<li><a href="../html/" target="_blank">HTML</a></li>
<li><a href="../css/" target="_blank">CSS</a></li>
<li><a href="../javascript/" target="_blank">Javascript</a></li>
<li><a href="../php/" target="_blank">PHP</a></li>
<li><a href="../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

उपरोक्त क्षैतिज नेविगेशन को बार के रूप में डिजाइन करने के लिए क्या आवश्यक है।

सबसे पहले, उल और ली तत्व के डिफ़ॉल्ट गुणों के मूल्यों को हटा दिया जाना चाहिए। इससे नेविगेशन लिंक एक ही लाइन में आ जाएंगे।

For Example,

उदाहरण में, <ul> तत्व के डिफ़ॉल्ट सीएसएस को हटा दिया गया है और display:inline property को <li> तत्व में जोड़ा गया है। यह सभी सूची आइटम (<li>) को एक ही पंक्ति में लाएगा।

<style>
ul{
 list-style-type : none;
 padding : 0;
}
li{
 display : inline;
}
</style>
<ul>
<li><a href="../html/" target="_blank">HTML</a></li>
<li><a href="../css/" target="_blank">CSS</a></li>
<li><a href="../javascript/" target="_blank">Javascript</a></li>
<li><a href="../php/" target="_blank">PHP</a></li>
<li><a href="../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Make Attractive Horizontal Navigation Bar

<style>
ul{
 list-style-type : none;
 padding : 0;
 overflow : hidden;
 background-color : #00D1EA;
}
li{
 float : left;
}
li a{
 color : white;
 text-decoration : none;
 padding : 15px;
 background-color : #00D1EA;
 display : block;
}
li a:hover{
 background-color : white;
 color : black;
 box-shadow : 0px 2px #888;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

See also  सर्च इंजन क्या है और यह कैसे काम करता है? (What is Search Engine in Hindi)

Fixed Top Horizontal Navigation Bar

<style>
body{
 height : 1000px;
}
ul{
 list-style-type : none;
 background-color : #00D1EA;
 padding : 0px;
 overflow : hidden;
 width : 100%;
 position : fixed;
 top : -15px;
 /* Use bottom : -15px for Bottom Fixed Navigation Bar */
 left : 0;
}
li{
 float : left;
}
li a{
 display : block;
 color : white;
 text-decoration : none;
 padding : 15px;
 }
li a:hover{
 background-color : white;
 color : black;
 box-shadow : 0px 2px #888;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Fixed Bottom Horizontal Navigation Bar

<style>
body{
 height : 1000px;
}
ul{
 list-style-type : none;
 background-color : #00D1EA;
 padding : 0px;
 overflow : hidden;
 width : 100%;
 position : fixed;
 bottom : -15px;
 /* Use top : -15px for Top Fixed Navigation Bar */
 left : 0;
}
li{
 float : left;
}
li a{
 display : block;
 color : white;
 text-decoration : none;
 padding : 15px;
 }
li a:hover{
 background-color : white;
 color : black;
 box-shadow : 0px 2px #888;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Responsive Navigation Bar

<style>
body{
 height : 1000px;
}
ul{
 list-style-type : none;
 background-color : #00D1EA;
 padding : 0px;
 overflow : hidden;
}
li{
 float : left;
}
li a{
 display : block;
 color : white;
 text-decoration : none;
 padding : 15px;
 }
li a:hover{
 background-color : white;
 color : black;
}

@media screen and (max-width: 650px){
 li{
  float: none;
  text-align : center;
 }
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Display Active Link

<style>
ul{
 list-style-type : none;
 padding : 0;
 overflow : hidden;
 background-color : #00D1EA;
}
li{
 float : left;
}
li a{
 color : white;
 text-decoration : none;
 padding : 15px;
 background-color : #00D1EA;
 display : block;
}
li a:hover, .active{
 background-color : white;
 color : black;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a  class="active" href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

See also  डोमेन नाम क्या हैं? (What is Domain Name?)

Right Aligning Navigation Links

<style>
ul{
 list-style-type : none;
 padding : 0;
 overflow : hidden;
 background-color : #00D1EA;
 padding : 14px 15px;
 display : block;
 text-align: center;
}
li{
 display : inline;
}
li a{
 color : white;
 text-decoration : none;
 padding : 15px;
 background-color : #00D1EA;
}
li a:hover{
 background-color : white;
 color : black;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Center Aligning Navigation Links

<style>
ul{
 list-style-type : none;
 padding : 0;
 overflow : hidden;
 background-color : #00D1EA;
 padding : 14px 15px;
 display : block;
 text-align: center;
}
li{
 display : inline;
}
li a{
 color : white;
 text-decoration : none;
 padding : 15px;
 background-color : #00D1EA;
}
li a:hover{
 background-color : white;
 color : black;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Simple Vertical Navbar/Sidebar

<style>
ul{
 list-style-type : none;
 background-color : #00D1EA;
 padding : 0px;
 overflow : hidden;
 width : 15%;
 height : 100%;
}
li a{
 display : block;
 color : white;
 text-decoration : none;
 padding : 15px;
 text-align : center;
 }
li a:hover{
 background-color : white;
 color : black;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Fixed Vertical Navbar/Sidebar

<style>
body{
 height : 1000px;
}
ul{
 list-style-type : none;
 background-color : #00D1EA;
 padding : 0px;
 width : 15%;
 height : 100%;
 position : fixed;
 top : -15px;
}
li a{
 display : block;
 color : white;
 text-decoration : none;
 padding : 15px;
 text-align : center;
 }
li a:hover{
 background-color : white;
 color : black;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output :

Right Aligning Fixed Vertical Navbar/Sidebar

<style>
body{
 height : 1000px;
}
ul{
 list-style-type : none;
 background-color : #00D1EA;
 padding : 0px;
 width : 15%;
 height : 100%;
 position : fixed;
 top : -15px;
 right : 0;
}
li a{
 display : block;
 color : white;
 text-decoration : none;
 padding : 15px;
 text-align : center;
 }
li a:hover{
 background-color : white;
 color : black;
}
#mybutton{
 display : none;
}
</style>

<ul>
<li><a href="../../html/" target="_blank">HTML</a></li>
<li><a href="../../css/" target="_blank">CSS</a></li>
<li><a href="../../javascript/" target="_blank">Javascript</a></li>
<li><a href="../../php/" target="_blank">PHP</a></li>
<li><a href="../../python/" target="_blank">Python</a></li>
</ul>(code-box)

Output : 

See also  HTML Editor क्या है? एचटीएमएल एडिटर के फायदे

Final Words

तो दोस्तों आपको हमारी पोस्ट कैसी लगी! शेयरिंग बटन पोस्ट के नीचे इसे अपने दोस्तों के साथ शेयर करना न भूलें। इसके अलावा अगर बीच में कोई परेशानी हो तो कमेंट बॉक्स में पूछने में संकोच न करें। आपकी सहायता कर हमें खुशी होगी। हम इससे जुड़े और भी पोस्ट लिखते रहेंगे। तो अपने मोबाइल या कंप्यूटर पर हमारे ब्लॉग “various info: Education and Tech” को बुकमार्क (Ctrl + D) करना न भूलें और अपने ईमेल में सभी पोस्ट प्राप्त करने के लिए हमें अभी सब्सक्राइब करें। 

अगर आपको यह पोस्ट अच्छी लगी हो तो इसे अपने दोस्तों के साथ शेयर करना ना भूलें। आप इसे व्हाट्सएप, फेसबुक या ट्विटर जैसी सोशल नेटवर्किंग साइटों पर साझा करके अधिक लोगों तक पहुंचने में हमारी सहायता कर सकते हैं। शुक्रिया!

Sharing Is Caring:

Hello friends, I am Ashok Nayak, the Author & Founder of this website blog, I have completed my post-graduation (M.sc mathematics) in 2022 from Madhya Pradesh. I enjoy learning and teaching things related to new education and technology. I request you to keep supporting us like this and we will keep providing new information for you. #We Support DIGITAL INDIA.

Contact Us

Leave a Comment