कैसे करें - सीएसएस ब्रेडक्रंब
CSS के साथ ब्रेडक्रंब नेविगेशन बनाने का तरीका जानें।
ब्रेडक्रंब नेविगेशन कैसे बनाएं
एक ब्रेडक्रंब नेविगेशन उपयोगकर्ता द्वारा नेविगेट किए गए प्रत्येक पिछले पृष्ठ पर वापस लिंक प्रदान करता है, और वेबसाइट में उपयोगकर्ता का वर्तमान स्थान दिखाता है।
चरण 1) HTML जोड़ें:
उदाहरण
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Style the list */
ul.breadcrumb {
padding: 10px
16px;
list-style: none;
background-color: #eee;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Add a
slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before
{
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
पेजिनेशन के बारे में अधिक जानने के लिए हमारे CSS पेजिनेशन ट्यूटोरियल पर जाएँ।