Element for Navigation Links | CSS Navigation In Hindi

Ashok Nayak
Ashok Nayak
February 12, 2022
0

Element for Navigation Links | CSS Navigation In Hindi 

Table of content (TOC)

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 :


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 :


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 : 

Final Words

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

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

Tags
Ashok Nayak

Ashok Nayak

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. facebook twitter youtube instagram external-link

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

If you liked the information of this article, then please share your experience by commenting. This is very helpful for us and other readers. Thank you

If you liked the information of this article, then please share your experience by commenting. This is very helpful for us and other readers. Thank you

Post a Comment (0)
!
Our website uses cookies to enhance your experience. Learn More
Accept !

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

×