कैसे करें - प्रतीक के साथ नेवबार
CSS का उपयोग करके आइकॉन के साथ एक प्रतिक्रियाशील नेविगेशन मेनू बनाने का तरीका जानें।
प्रतीक के साथ नेविगेशन बार
आइकॉन के साथ एक रिस्पॉन्सिव नेवबार बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<a class="active" href="#"><i class="fa
fa-fw fa-home"></i>
Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#"><i
class="fa fa-fw fa-user"></i> Login</a>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on
mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
.active {
background-color: #04AA6D;
}
/* Add responsiveness - will automatically display the
navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
युक्ति: नेविगेशन बार के बारे में अधिक जानने के लिए हमारे CSS नेवबार ट्यूटोरियल पर जाएँ।
युक्ति: यदि आप एक नेविगेशन बार बनाना चाहते हैं जिसमें केवल आइकन हों, तो हमारा How To - Icon Bar Tutorial पढ़ें ।