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

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

தொடங்குதல்

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

நீங்கள் HTML இல் நெருக்கமாக இருப்பின், "முகப்பு" இணைப்பு ஒரு ஐடி உள்ளது என்பதை நீங்கள் கவனிக்க வேண்டும்

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

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

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

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

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

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

நான் மெனுவில் ஸ்டைலிங் செய்யும் போது, ​​வெளியில் ஆரம்பிக்கவும் வேலை செய்யவும் விரும்புகிறேன். இதன் மூலம் நான் முதல் பாணியைப் பயன்படுத்துகிறேன்

உல் # ஊடுருவல் பின்னர் நகர்த்தவும்

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

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

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

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

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

UL # வழிசெலுத்தல் LI Aபின்னர்

ஒரு: இணைப்பு,

ப: விஜயம்,

ப: மிதவை, மற்றும்

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

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

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

உல் # வழிசெலுத்தல் ஒரு {காட்சி: தடுப்பு;உரை அலங்காரம்: எதுவும் இல்லை;திணிப்பு: .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 ஐ பயன்படுத்தி உங்கள் பட்டியலை வடிவமைப்பிற்கு மிகவும் சக்திவாய்ந்த கருவியாக மாற்றியுள்ளது.

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

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