CSS Vertical Navigation Bar
ஒரு செங்குத்து வழிசெலுத்தல் பட்டையில், வழிசெலுத்தல் இணைப்புகள் செங்குத்தாக (ஒன்றன் மேல் ஒன்றாக) அடுக்கப்பட்டுள்ளன, மேலும் பொதுவாக ஒரு வலைப்பக்கத்தின் இடது அல்லது வலது பக்கத்தில் சீரமைக்கப்படுகின்றன.
ஒரு செங்குத்து வழிசெலுத்தல் பட்டையின் அடிப்படைகள் வரிசைப்படுத்தப்படாத பட்டியல் (<ul>), பட்டியல் உருப்படிகளுடன் (<li>), ஒவ்வொன்றும் ஒரு இணைப்பைக் (<a>) கொண்டிருக்கும், இது Navbar Intro பக்கத்தில் காட்டப்பட்டுள்ளது.
CSS Vertical Navbar Example
இங்கே, நாம் ஒரு சாம்பல் பின்னணி வண்ணத்துடன் ஒரு அடிப்படை செங்குத்து வழிசெலுத்தல் பட்டையை உருவாக்குகிறோம், மேலும் பயனர் சுட்டியை நகர்த்தும் போது இணைப்புகளின் பின்னணி வண்ணம் மற்றும் உரை வண்ணத்தையும் மாற்றுகிறோம்:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link and background color on hover */
li a:hover {
background-color: #555555;
color: white;
}Example explained:
- முதல் தொகுதி (ul) முந்தைய பக்கத்தைப் போன்றது. கூடுதலாக நாம் ஒரு நிலையான அகலம் (200px) மற்றும் ஒரு வெளிர் சாம்பல் பின்னணி வண்ணத்தைக் குறிப்பிட்டுள்ளோம்
- அடுத்த தொகுதி (li a)
<li>உறுப்புகளுக்குள்<a>உறுப்புகளைப் பாணியிடுகிறது - இணைப்புகளைத் தொகுதி உறுப்புகளாகக் காண்பிப்பது முழு இணைப்புப் பகுதியையும் கிளிக் செய்யக்கூடியதாக ஆக்குகிறது (உரை மட்டுமல்ல), மேலும் அகலம், இடைவெளி, விளிம்பு, உயரம் போன்றவற்றைக் குறிப்பிட அனுமதிக்கிறது. நாம் ஒரு இணைப்பு வண்ணம் மற்றும் சில இடைவெளியைச் சேர்க்கிறோம். இந்த
<a>உறுப்புகளிலிருந்து அடிக்கோடிட்டும் அகற்றுகிறோம் - கடைசி தொகுதி (li a:hover) ஒரு பயனர் சுட்டியை நகர்த்தும் போது இணைப்பு வண்ணம் மற்றும் பின்னணி வண்ணத்தை மாற்றுகிறது
Active State
இப்போது பயனர் எந்தப் பக்கம்/பிரிவில் உள்ளார் என்பதைப் பயனருக்குத் தெரிவிக்க தற்போதைய பக்கத்திற்கு ஒத்த இணைப்பை முன்னிலைப்படுத்த "active" வகுப்பைச் சேர்க்கிறோம்:
Example
.active {
background-color: #04AA6D;
color: white;
}Center Navbar Links & Add Borders
நேவ்பார் இணைப்புகளை மையத்தில் வைக்க, <li> அல்லது <a> க்கு text-align: center; சேர்க்கவும்.
நேவ்பாரைச் சுற்றி எல்லையை வைக்க விரும்பினால், <ul> க்கு border பண்பைச் சேர்க்கவும்.
நேவ்பாருக்குள் எல்லைகளையும் வைக்க விரும்பினால், கடைசி ஒன்றைத் தவிர அனைத்து <li> உறுப்புகளுக்கும் border-bottom பண்பைச் சேர்க்கவும்:
Example
ul {
border: 1px solid #555555;
}
li {
text-align: center;
border-bottom: 1px solid #555555;
}
li:last-child {
border-bottom: none;
}Full-height Vertical Navbar
முழு-உயர, "ஒட்டும்" பக்க வழிசெலுத்தலை உருவாக்கவும்:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}குறிப்பு:
இந்த எடுத்துக்காட்டு மொபைல் சாதனங்களில் சரியாக வேலை செய்யாமல் இருக்கலாம்.
Responsive Navbar
Example
பதிலளிக்கும் நேவ்பாரை உருவாக்க CSS media queries ஐ எவ்வாறு பயன்படுத்துவது:
மேலே உள்ள படம் ஒரு பதிலளிக்கும் வழிசெலுத்தல் பட்டையைக் காட்டுகிறது