ደረጃ-በደረጃ መመሪያ
የአሰሳ ምናሌዎ የላይኛው አግድም ረድፍ ወይም በጎን በኩል ቀጥ ያለ ረድፍ ይሁን, አሁንም ቢሆን ዝርዝር ነው. የድር አሰሳን ንድፍ በሚይዙበት ጊዜ, የዳሰሳ ምናሌ የተከበረ የሽያጭ አገናኞች መሆናቸው ብዙውን ጊዜ በቀላሉ ይታወሳል. ነገር ግን XHTML + CSS በመጠቀም አሰሳዎን ፕሮግራም ካደረጉት, ለማውረድ ትንሽ (XHTML) እና ምናሌ (CSS) ቀላል የሆነ ምናሌ መፍጠር ይችላሉ.
መጀመር
ለዝግጅት ዝርዝር ንድፍ ለመጀመር, ዝርዝር መጠቀም ያስፈልግዎታል.
እንደ አሰሳ የሚታወቅ መደበኛ ደረጃ ያልተሰጠው ዝርዝር ሊሆን ይችላል
ኤችቲኤምኤልን በቅርበት ከተመለከቱ የ "ቤት" አገናኝ እርስዎም የርስዎን የማንነት መታወቂያ እንዳለ ያስተውላሉ. ይሄ አሁን ለአንባቢዎችዎ የአሁኑን ቦታ የሚለይ ምናሌ እንዲፈጥሩ ያስችልዎታል. በጣቢያዎ ላይ እንዲህ አይነት የምስል ምልክት እንዳይኖራቸው ካላሰቡ, ያንን መረጃ ማካተት ይችላሉ. ምስሎቹን ቆይተው ለመጨመር ከወሰኑ, ጣቢያዎን ለማዘጋጀት ትንሽ የኮድ ኮድ ይኖራቸዋል.
ያለ CSS ቅርጸት ያለ XHTML ምናሌ መደበኛ ደረጃ አልባ ዝርዝር ይመስላል. ነጥበ ግጥሞች አሉ እና የዝርዝሮቹ ንጥሎች ጥቂቶቹ ናቸው. የቦታ ያዥ አገናኞችን ስጠቀም , አብዛኛዎቹ አሳሾች አገናኞችን እንደ ጠቅ-ሊታዩ (በቀለም እና በሰማያዊ) አያሳዩም. ከላይ ባለው ኤችቲኤምኤል ውስጥ ወደ ድረ ገጽ ካስገባህ የአንተን ዳሰሳ እንዲህ ይመስላል:
- ቤት
- ምርቶች
- አገልግሎቶች
- አግኙን
ይሄ አሰልቺ ነው እና እንደ ምናሌ ብዙ አይመስልም. ነገር ግን ጥቂት የሲሲኤስ ቅጦች በዝርዝሩ ላይ ሲታከሉ እርስዎ እንዲኮሩ የሚያደርግ ምናሌ መፍጠር ይችላሉ.
አቀባዊ ማውጫ ምናሌ
ቀጥተኛ አቀማመጥን ለመምረጥ በጣም ቀላል ነው, ምክንያቱም እንደ መደበኛው ዝርዝር በተመሳሳይ መልኩ ስለሚታይ - ወደላይ እና ወደ ታች.
የዝርዝር ንጥሎች ገጹን በቅጥረቱ ያሳያሉ.
ምናሌዎችን እያቀረብኩ እያለ ከውጭው ውስጥ ስራውን መሥራት እና መስራት እፈልጋለሁ. ይህንንም ማለቴ ኡው ኡል # ዳሰሳን ለመምራት እና ወደነሱ አካላት እና ከዚያም አገናኞችን ወዘተ ማለት ነው. ወዘተ ለእዚህ ምናሌ, በመጀመሪያ የሰንሰለቱን ስፋትን ይወስኑታል. ይህ የምናሌ ንጥረ ነገሮች ረዘም ያሉ ቢሆኑም እንኳ የተስተካከለውን አቀማመጥ በሶስት ጎንዮሽ ስላይድ ማሸብለልን ወይም ማንጠልጠል አይችሉም.
ul # ዳሰሳ {ወርድ: 12 ኤም; }
አንዴ ስፋት ካዘጋጀሁ ከዝርዝሩ እትሞች ጋር መጫወት እችላለሁ. ይህ እንደ (ጥይቶችን ለማስወገድ), የጀርባ ቀለሞች, ጠርዞች, የጽሑፍ አሰላለፍ, እና ህዳጎች ያሉ ነገሮችን እንዲያስተካክል ይፈቅድልኛል.
ul # አሰሳ {
list-style: ምንም;
በስተጀርባ-ቀለም-# 039;
ዳርቻ-ላይ: ጠንካራ 1px # 039;
ጽሑፍ-አሰላለፍ: ግራ;
ኅዳግ: 0;
}
አንዴ ለዝርዝር ንጥል ነገሮች መሰረታዊ ነገሮችን ካዘጋጁ በኋላ አገናኞች አካባቢ በሚታየው ምናሌ ውስጥ መጫወት መጀመር ይችላሉ. የመጀመሪያ ቅጥን UL # ዳሰሳ ኤ ኤል እና ከዚያም A: አገናኝ, A: የተጎበኘው, A: አንዣብብ, እና A: ንቁ (ከፈለግክ). ለአንዴራጎቹ አገናኞችን አንድ የአንግላጅ አባሎችን (በ <<ነባሪ መስመር ውስጥ ሳይሆን)> ማድረግ እፈልጋለሁ. ይህ ማለት ሁሉም የሉል ቦታን እንዲይዙ ያስችላቸዋል - እናም እንደ ምናሌ አዝራሮች እንዲቀርጹ ቀላል ያደርገዋል. ሌላው ነገር እኔ ሁልጊዜ የማደርገው የምስጢር ጽሁፉን (የጽሁፍ ንጽሕና: የለም;), ይህም አዝራሮቹ (አዝራሮች) ለእኔ እንደ አዝራሮች እንዲመስል ያደርገዋል.
ግን በእርግጥ የእርስዎ ዲዛይን የተለየ ሊሆን ይችላል.
ul # አሰሳ ሊ ለ {
ማሳያ: አግድ;
ጽሑፍ-ማስገር: ምንም;
ፓድዲንግ: .25 ሜ;
ከፍ ያለ ጠርዝ: ጠንካራ 1px # 39f;
ጠርዝ-ቀኝ: ጠንካራ 1px # 39f;
}
ከመገለጫው ጋር እንደታየው ማገድ አገናኞቹ ላይ ያስቀምጣሉ, የምናሌ ንጥሉ ሙሉው ሳጥን ውስጥ ጠቅ ማድረግ ይቻላል, ፊደሎችን ብቻ አይደለም. ይህ ለጠቃሚነት ጥሩ ነው. ከነጩ አረንጓዴ, ቀይ እና ሐምራዊ የተለዩ እንዲሆኑ ከፈለጉ የአገናኞቹን ቀለሞች (አገናኝ, የተጎበኙ, ያነሳሉ እና ንቁ) ማቀናበሩን ያረጋግጡ.
a: link, a: visited {color: #fff; }
a: አንሳ, ቀዳ: ንቁ {ቀለም: # 000; }
የጀርባ ቀለሙን በመቀየር የትኩረት ሁኔታን የበለጠ ትኩረት ሰጥቼያለሁ.
a: አቀማመጥ {በስተጀርባ-ቀለም: #fff; }
ተጨማሪ የጽሑፍ እቃዎችን ምሳሌዎች ከፈለጉ ከታች ያሉትን ዝርዝር ይመልከቱ.
- የተደባለቀ አቀባዊ ምናሌ
- መሰረታዊ Vertical Menu Template
- እርስዎ ነበሯቸው ቀጥ ያለ አቀብታ ምናሌ እዚህ አሉ
- ከእርስዎ ጋር አንድ መሰረታዊ የአቀባዊ አምሳያ ቅንጅት
አግድም አሰሳ ምናሌ
የአግድም አሰሳ ምናሌዎችን መፍጠር በመመዘን ከዲካዊ አሰሳ ምናሌዎች ትንሽ አስቸጋሪ ይሆናል ምክንያቱም የኤችቲኤምኤል ዝርዝር በአቀባዊ ለማሳየት ይመርጣሉ. ልክ እንደ አግድም ምናሌ ሁሉ በመጀመሪያ የአሰሳ ዝርዝርዎን ይፍጠሩ:
አግድም ምናሌ ሇመፍጠር ከግራሬዴው ሜኑ ጋር ያዯርገዋሌ. ከውጭው ጀምሩ እና ስራ ላይ ይግቡ. የእኔን ፍለጋ ወደ ግራ ጥግ እንዲጀመር ስለምፈልግ, በ 0 የግራ ኅዳግ እና ፓድዲዬ አስቀምጣለሁ, እና ወደ ግራ አሳምሬው. እንዲሁም ምናሌዎ ከሚያስፈልገው በላይ ወይም ያነሰ ቦታ እንዳይጠቀምበት ስፋቱን ማስተካከል የተለመደ ነው. ለኤውሮድስ አውራሚዎች ይህ የዲዛይን ስፋት ሙሉ ነው. በተጨማሪም ለማንበብ ቀላል እንዲሆን የጠቅላላው የጀርባ ቀለም እጨምራለሁ.
ul # ዳሰሳ {
ተንሳፈው: ግራ;
ኅዳግ: 0;
ማጣበቂያ: 0;
ወርድ: 100%;
በስተጀርባ-ቀለም-# 039;
}
ግን ለአዕራፍ አግዳሚ ምናሌ ሚስጥር በዝርዝሩ ውስጥ ይገኛል. የዝርዝር ንጥሎች በመደበኛነት አባላትን ያግዱ, ይህም ማለት ከእያንዳንዱ በፊት እና በኋላ የተለጠፈ አዲስ መስመር ይኖራቸዋል ማለት ነው. ማሳያን ከቅጥበት እስከ መስመር ውስጥ በማዘዋወር የዝርዝር አባላትን በአንዴ ወደ ጎን አዛዡ እንዲገጥሙ ያስገድዳሉ.
ul # መርሐግብር {{ማሳያ: መስመር ውስጥ; }
በተመሳሰሉ ቀለሞች እና የጽሑፍ ቅደም ተከተል በድርብ አቀማመጥ ምናሌ ውስጥ እንዳየኋቸው አገናኞችን በትክክል እመለከታቸው ነበር. አዝርጉዛ ሲደረስባቸው አዝራሮቹን ለመለየት አብይ ጠርዝ አከልኩ. ብወገድኩት ብቸኛው ማሳያ ነበር; አግድ; ልክ እንደ አዲሱ መስመሮችን እንደገና በማስገባት የአትክልትን ምናሌ ያጠፋዋል.
ul # አሰሳ ሊ ለ {
ጽሑፍ-ማስገር: ምንም;
ድብድብ: .25em 1em;
ከፍ ያለ ጠርዝ: ጠንካራ 1px # 39f;
ዳርቻ-ላይ: ጠንካራ 1px # 39f;
ጠርዝ-ቀኝ: ጠንካራ 1px # 39f;
}
a: link, a: visited {color: #fff; }
ul # አሰሳ ኖት: ማንዣበብ {
የበስተጀርባ-ቀለም: #fff;
ቀለም # 000;
}
እርስዎ በቅርብ የሚገኙበት ቦታ ነዎት
ሌላ የኤችቲኤምኤል ገጽታ የሎታ ቦታ መለያ ነው. የተጠቃሚዎችዎን የአሁኑ አካባቢ ለማሳየት የእርስዎን ምናሌ መቀየር ከፈለጉ, የተለየ ቀዳሚውን ቀለም ወይም ሌላ ቅጥ ለመለየት ይህን መታወቂያ ይጠቀሙ. የአሁኑ ገጽ ሁልጊዜ ጎልቶ እንዲታይ ያንን መታወቂያ ባህሪ በሌሎች ገጾች ላይ ወዳለው ትክክለኛው ንጥል ነገር ያዛውሩት.
ul # ዳሰሳ ያለበት # # እርስዎ የ {በስተጀርባ-ቀለም: # 09f; }
እነዚህን ገጽታዎች በአንድ ገጽዎ ላይ ካካተቷቸው ከጣቢያዎ ጋር አብሮ የሚሰራ አግድም ወይም አቀባዊ የዝርዝር አሞሌ ሊፈጥሩ ይችላሉ ነገር ግን በፍጥነት ለማውረድ እና ለወደፊቱ ለማዘመን በጣም ቀላል ነው. XHTML + CSS በመጠቀም ዝርዝሮችዎን ለዴንጋይ በጣም ኃይለኛ መሳሪያ ይለውጣል.
ተጨማሪ አግድ ወንበሮችን የበለጠ ምሳሌዎች ከፈለጉ, የሚከተለውን ይመልከቱ.
- የተደባለቀ አግድም ምናሌ
- መሰረታዊ አግድም የመግቢያ አብነት
- ከእርስዎ ጋር የተደባለቀ ማዕቀፍ ምናሌዎ እርስዎ ነዎት
- ከአንቺ ጋር መሰረታዊ አግድም ማንነት አብነት ነዎት