செங்குத்து ஊடுருவல் மெனுக்களை உருவாக்க இணைப்புகள் பயன்படுத்தி

நீங்கள் HTML இல் நெருக்கமாக இருப்பின், "முகப்பு" இணைப்பை நீங்கள் ஒரு அடையாளமாகக் கொண்டிருப்பதைக் கவனிக்க வேண்டும். இது உங்கள் வாசகர்களுக்கான தற்போதைய இருப்பிடத்தை விளக்கும் ஒரு மெனுவை உருவாக்க அனுமதிக்கும். இப்போதே உங்கள் தளத்தின் காட்சி வகை என்று திட்டமிடவில்லை என்றால், அந்த தகவலை நீங்கள் சேர்க்கலாம். நீங்கள் பின்னர் கோல் சேர்க்க முடிவு செய்தால், உங்கள் தளத்தை தயார் செய்வதற்கு குறைவான கோடிங் வேண்டும்.

எந்த CSS ஸ்டைலிங் இல்லாமல், இந்த XHTML மெனு ஒரு நிலையான வரிசையிலமையாத பட்டியல் போல் தெரிகிறது. தோட்டாக்கள் உள்ளன மற்றும் பட்டியல் உருளைகள் சிறிது உள்தள்ளப்பட்டுள்ளன. நான் ஒதுக்கிட இணைப்புகளை பயன்படுத்துவதால், பெரும்பாலான உலாவிகளில் கிளிக் செய்யக்கூடிய இணைப்புகள் (அடிக்கோடின் மற்றும் நீல நிறத்தில்) காட்டாது. மேலே உள்ள HTML இல் வலைப்பக்கத்தில் ஒட்டினால், உங்கள் வழிசெலுத்தல் இதைப் போல இருக்கும்:

• முகப்பு
• தயாரிப்புகள்
• சேவைகள்
• எங்களை தொடர்பு கொள்ள

இது மிகவும் சோர்வாக இருக்கிறது, மேலும் ஒரு மெனுவைப் போல் இல்லை. ஆனால் ஒரு சில CSS பாணியை பட்டியலில் சேர்க்க, நீங்கள் பெருமை என்று ஒரு மெனு உருவாக்க முடியும்.

செங்குத்து ஊடுருவல் பட்டி

ஒரு செங்குத்து வழிசெலுத்தல் பட்டி எழுத மிகவும் எளிதானது, ஏனெனில் இது ஒரு சாதாரண பட்டியலில் அதே வழியில் காட்டப்படுகிறது: மேலே மற்றும் கீழே.

பட்டியல் உருப்படிகளை பக்கம் கீழே செங்குத்தாக காட்ட.

நான் மெனுவில் ஸ்டைலிங் இருக்கும் போது, ​​நான் வெளியில் துவங்குவதற்கு விரும்புகிறேன். இதில், நான் முதல் ஸ்டைல் ​​ul # வழிசெலுத்தல், பின்னர் li உறுப்புகளுக்கும் பின்னர் இணைப்புகள், முதலில் நீங்கள் மெனுவின் அகலத்தை வரையறுக்கலாம். இது பட்டி உருப்படிகள் நீண்டதாக இருந்தாலும் கூட, அமைப்பை மீதமுள்ளதாகவோ அல்லது கிடைமட்ட ஸ்க்ரோலிங் செய்வதையோ இது உறுதிப்படுத்தாது.

உல் # வழிசெலுத்தல் {width: 12em; }

ஒரு அகலமான தொகுப்பு கிடைத்தவுடன், நான் பட்டியல் உருப்படிகளுடன் விளையாடலாம். இது போன்றவற்றை (தோட்டாக்களை அகற்ற), பின்னணி வண்ணங்கள், எல்லைகள், உரை சீரமைப்பு மற்றும் ஓரங்கள் போன்றவற்றை அமைக்க இது அனுமதிக்கிறது.

உல் # வழிசெலுத்தல் li {
பட்டியல் பாணி: எதுவும் இல்லை;
பின்னணி-நிறம்: # 039;
எல்லை-மேல்: திட 1px # 039;
உரை-சீரமைப்பு: இடது;
விளிம்பு: 0;
}

பட்டியல் உருப்படிகளுக்கான அடிப்படைகளை அமைத்துவிட்டால், நீங்கள் மெனுவில் உள்ள பகுதிகளில் எப்படி மெனு தோன்றும் என்பதைத் தொடங்கலாம். முதல் பாணி UL # வழிசெலுத்தல் LI A, பின்னர் A: இணைப்பு, A: விஜயம், A: மிதவை மற்றும் A: செயலில் (நீங்கள் விரும்பினால்). இணைப்புகள், நான் இணைப்புகள் ஒரு தொகுதி உறுப்பு செய்ய விரும்புகிறேன் (மாறாக இயல்பான வரி விட). இது LI இன் முழுப் பகுதியையும் எடுத்துக்கொள்வதற்கு அவை உதவுகின்றன. அவை ஒரு பத்தியைப்போல் செயல்படுகின்றன, இது மெனு பொத்தான்களைப் போல எளிதில் பாணியை எளிதாக்குகிறது. நான் எப்போதும் செய்ய வேண்டிய மற்றொரு விஷயம் அடிக்கோடினை (உரை-அலங்காரம்: எதுவும் இல்லை) இந்த பொத்தான்கள் என்னை இன்னும் பொத்தான்கள் போல செய்கிறது என.

ஆனால் நிச்சயமாக, உங்கள் வடிவமைப்பு வித்தியாசமாக இருக்கலாம்.

உல் # வழிசெலுத்தல் ஒரு {
காட்சி: தடுப்பு;
உரை அலங்காரம்: எதுவும் இல்லை;
திணிப்பு: .25;
எல்லை-கீழே: திட 1px # 39f;
எல்லை வலது: திட 1px # 39f;
}

காட்சி: தொகுதி; இணைப்புகள் அமைக்க, மெனு உருப்படி முழு பெட்டியில் கிளிக், மட்டும் கடிதங்கள். இது பயன்பாட்டினை நல்லது. நீங்கள் சிவப்பு மற்றும் ஊதா இயல்பான நீலத்திலிருந்து வேறுபட்டதாக விரும்பினால் இணைப்பு வண்ணங்கள் (இணைப்பு, விஜயம், மிதவை மற்றும் செயலில்) அமைக்க வேண்டும் என்பதை உறுதிப்படுத்தவும்.

a: link, a: விஜயம் {color: # ff; }
a: hover, a: செயலில் {color: # 000; }

நான் பின்னணி நிறத்தை மாற்றுவதன் மூலம் மிதவை நிலைக்கு ஒரு பிட் அதிக கவனத்தை கொடுக்க விரும்புகிறேன்.

a: பின்னணி-நிறம்: # ff; }

நீங்கள் செங்குத்து மெனுக்களுக்கான கூடுதல் எடுத்துக்காட்டுகள் விரும்பினால், கீழே பட்டியலைப் பார்க்கவும்.

• ஒரு பாணியில் செங்குத்து பட்டி
• ஒரு அடிப்படை செங்குத்து பட்டி வார்ப்புரு
• நீங்கள் ஒரு பாணியில் செங்குத்து பட்டி இங்கே
• நீங்கள் ஒரு அடிப்படை செங்குத்து பட்டி வார்ப்புரு இங்கே

கிடைமட்ட ஊடுருவல் பட்டி

கிடைமட்ட வழிசெலுத்தல் மெனுக்களை உருவாக்குவது செங்குத்து வழிசெலுத்தல் மெனுக்களை விட சற்று கடினமாக உள்ளது, ஏனென்றால் HTML பட்டியல்கள் செங்குத்தாக காட்ட விரும்புகின்றன என்பதை நீங்கள் உண்மையாக நிராகரிக்க வேண்டும். கிடைமட்ட மெனுவைப் போல, முதலில் உங்கள் வழிசெலுத்தல் பட்டி பட்டியலை உருவாக்கவும்:

<சொத்து>
<உல்>

ஒரு கிடைமட்ட மெனுவை உருவாக்க, நீங்கள் செங்குத்து மெனுடன் செய்ததைப் போலவே அதே வேலை செய்யவும். வெளியே தொடங்கி வேலை செய்யுங்கள். என் வழிசெலுத்தல் இடது மூலையில் துவங்க வேண்டும் என்பதால், நான் அதை 0 இடது விளிம்பு மற்றும் திணிப்புடன் அமைக்கிறேன், அதை இடது பக்கம் மிதக்கிறேன். அகலத்தை அமைப்பதற்கான பழக்கத்திலும் நீங்கள் பெற வேண்டும், இதனால் உங்கள் மெனு நீங்கள் விரும்பியதை விட அதிகமாகவோ குறைவாகவோ எடுத்துக்கொள்ளாது. கிடைமட்ட மெனுக்களுக்கு, பொதுவாக வடிவமைப்பு முழு அகலம். நான் படிக்க எளிதாக முழு பட்டியலை ஒரு பின்னணி நிறத்தை சேர்க்க.

உல் # வழிசெலுத்தல் {
மிதவை: இடது;
விளிம்பு: 0;
திணிப்பு: 0;
அகலம்: 100%;
பின்னணி-நிறம்: # 039;
}

ஆனால் கிடைமட்ட வழிசெலுத்தல் பட்டிக்கு இரகசிய பட்டியல் பட்டியலில் உள்ளது. பட்டியல் உருப்படிகள் வழக்கமாக தொகுதி கூறுகள், அவை ஒவ்வொன்றிற்கும் முன்னும் பின்னும் வைக்கப்படும் ஒரு புதிய வரிசை வேண்டும். தொகுதி தொகுப்பிலிருந்து இன்லைன் வரை மாறுவதன் மூலம், நீங்கள் வரிசை கூறுகளை ஒன்றுக்கொன்று அடுத்தபடி வரிசைக்கு வையுங்கள்.

ul # navigation li {display: inline; }

நான் செங்குத்து வழிசெலுத்தல் பட்டி, அதே வண்ணங்கள் மற்றும் உரை அலங்காரம் ஆகியவற்றோடு சிகிச்சை செய்ததைப் போலவே நானும் இணைப்புகளைக் கையாண்டேன். நான் அவர்கள் மீது hovered போது பொத்தான்கள் சித்தரிக்க ஒரு மேல் எல்லை சேர்க்க. நான் அகற்ற மட்டுமே காட்சி இருந்தது: தொகுதி; புதிய வலைப்பின்னல்களை மீண்டும் உள்ளிட்டு, கிடைமட்ட மெனுவை அழித்துவிடும்.

உல் # வழிசெலுத்தல் ஒரு {
உரை அலங்காரம்: எதுவும் இல்லை;
padding: .25em 1em;
எல்லை-கீழே: திட 1px # 39f;
எல்லை-மேல்: திட 1px # 39f;
எல்லை வலது: திட 1px # 39f;
}
a: link, a: விஜயம் {color: # ff; }
உல் # வழிசெலுத்தல் li a: hover {
பின்னணி-நிறம்: # ff;
நிறம்: # 000;
}

நீங்கள் இருப்பிட தகவல் இங்கே இருக்கிறீர்கள்

HTML இன் மற்றொரு அம்சம் நீங்கள் அடையாளங்காட்டி அடையாளங்காட்டி உள்ளது. உங்கள் பயனர்களின் தற்போதைய இருப்பிடத்தை குறிப்பிடுவதற்கு உங்கள் மெனுவை மாற்ற விரும்பினால், வேறுபட்ட பின்னணி நிறத்தை அல்லது வேறு பாணியை வரையறுக்க இந்த ஐடியைப் பயன்படுத்தவும். மற்ற பக்கங்களில் சரியான மெனு உருப்படியை அந்த ஐடி பண்புக்கூறாக மாற்றுங்கள், இதனால் தற்போதைய பக்கம் எப்போதும் சிறப்பம்சமாக இருக்கும்.

ul # navigation li # youarehere ஒரு {பின்னணி-நிறம்: # 09f; }

இந்த பாணியை உங்கள் பக்கத்தில் ஒன்றாக வைத்து இருந்தால், உங்கள் தளத்தில் வேலை செய்யும் ஒரு கிடைமட்ட அல்லது செங்குத்து மெனு பட்டியை உருவாக்கலாம், ஆனால் விரைவாக பதிவிறக்க மற்றும் எதிர்காலத்தில் மேம்படுத்த மிகவும் எளிதானது. XHTML + CSS ஐ பயன்படுத்தி உங்கள் பட்டியலை வடிவமைப்பிற்கு மிகவும் சக்திவாய்ந்த கருவியாக மாற்றியுள்ளது.

கிடைமட்ட மெனுவிற்கான கூடுதல் எடுத்துக்காட்டுகள் விரும்பினால், பின்வருவனவற்றைக் கவனிக்கலாம்.

• ஒரு பாணியில் கிடைமட்ட பட்டி
• ஒரு அடிப்படை கிடைமட்ட பட்டி டெம்ப்ளேட்
• நீங்கள் ஒரு பாணியில் கிடைமட்ட பட்டி இங்கே
• நீங்கள் ஒரு அடிப்படை கிடைமட்ட பட்டி டெம்ப்ளேட் இங்கே