HTML மற்றும் CSS பயன்படுத்தி ஒரு பதிலளிக்கக்கூடிய மேல் வழிச் சரக (Top Navigation Bar) உருவாக்குவது
ஒரு வலைத்தளத்தின் முக்கியமான பகுதிகளில் ஒன்று, வழிச் சரக (Navigation Bar) ஆகும். இது பயனர்களுக்கு தளத்தின் முக்கிய பக்கங்களுக்கான குறுக்கு வழிகளை அளிக்கிறது. ஒரு பதிலளிக்கக்கூடிய (Responsive) மேல் வழிச் சரகத்தை HTML மற்றும் CSS பயன்படுத்தி எளிதாக உருவாக்கலாம்.
1. HTML: அடிப்படை வடிவமைப்பு
முதலில், வழிச் சரகத்தின் அடிப்படை HTML அமைப்பை உருவாக்குவோம்.
<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>பதிலளிக்கக்கூடிய வழிச் சரக</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<a href="#home" class="active">முகப்பு</a>
<a href="#services">சேவைகள்</a>
<a href="#about">பற்றி</a>
<a href="#contact">தொடர்பு</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<script>
function myFunction() {
var x = document.getElementsByClassName("navbar")[0];
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>இங்கே, div உட்பகுதியில் a குறியீட்டை பயன்படுத்தி வழிச் சரகத்தின் உருப்படிகளை அமைக்கிறோம். ஒரு “இகான்” (icon) ஆனது மொபைல் பார்வையில் மேலே மெனுவைத் திறக்க உதவும்.
2. CSS: வடிவமைப்பு மற்றும் பதிலளிக்கக்கூடிய தன்மை
இப்போது, வழிச் சரகத்தின் CSS உடன் அழகாக வடிவமைக்கவும், பதிலளிக்கக்கூடியதாக உருவாக்கவும் செய்கிறோம்.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}இந்த CSS கோப்பு வழிச் சரகத்தின் மொபைல் பதிலளிக்கக்கூடிய தன்மையை நன்கு செயல்படுத்துகிறது. மொபைல் பார்வையில், மேலே மெனு பட்டனில் (☰) கிளிக் செய்வதன் மூலம் மற்ற இணைப்புகள் காட்சியளிக்கின்றன.
3. JavaScript: வழிச் சரகத்தின் செயல்பாடு
HTML இல் உள்ள JavaScript myFunction() என்பதைப் பயன்படுத்தி, மொபைல் பார்வையில் மெனுவின் பதிலளிக்கக்கூடிய செயல்பாட்டை நிர்வகிக்கிறோம்.
முடிவுரை:
HTML மற்றும் CSS பயன்படுத்தி பதிலளிக்கக்கூடிய (Responsive) மேல் வழிச் சரகத்தை உருவாக்குவது மிக எளிமையானது. இது மொபைல் மற்றும் டெஸ்க்டாப் பார்வைகளில் அழகாகவும், சீராகவும் செயல்படும். இந்த வழிகாட்டியைப் பின்பற்றி, உங்கள் வலைத்தளத்திற்கு சிறந்த வழிச் சரகத்தை உருவாக்குங்கள்.
இணைப்பு:
மேலும் தெரிந்துகொள்ள, W3Schools மற்றும் MDN Web Docs போன்ற அமைப்புகளைப் பார்வையிடவும். உங்கள் கருத்துக்களைப் பகிர்ந்து, உங்கள் அனுபவத்தைப் பகிரவும்!
