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) करना न भूलें और अपने ईमेल में सभी पोस्ट प्राप्त करने के लिए हमें अभी सब्सक्राइब करें।
अगर आपको यह पोस्ट अच्छी लगी हो तो इसे अपने दोस्तों के साथ शेयर करना ना भूलें। आप इसे व्हाट्सएप, फेसबुक या ट्विटर जैसी सोशल नेटवर्किंग साइटों पर साझा करके अधिक लोगों तक पहुंचने में हमारी सहायता कर सकते हैं। शुक्रिया!
