በጥሩ የኤችቲኤምኤል ኮድ እና በቀላል የ CSS ህጎች እገዛ በቀላሉ ሊሻሻል እና ሊሟላ የሚችል ጥሩ ብቅ-ባይ ምናሌ መፍጠር ይችላሉ። የማርክ መስጫ ቋንቋን እና የካስካዲንግ የቅጥ ሉሆችን በመጠቀም ምናሌዎች በሁሉም አሳሾች ውስጥ በትክክል መሥራታቸውን ማረጋገጥ ይችላሉ ፡፡
መመሪያዎች
ደረጃ 1
በመጀመሪያ የእርስዎን ምናሌ መሠረታዊ መዋቅር ይገንቡ። የጽሑፍ አርታዒን ይክፈቱ እና እንደ የወላጅ ዝርዝር ንጥል ሆኖ በሚያገለግል ንዑስ ምናሌ ውስጥ በቁጥር ዝርዝር ይፍጠሩ። ለምሳሌ:
-
የመጀመሪያ አካል
- የመውደቅ ንጥል
- መውደቅ 2
ደረጃ 2
የተፈጠረውን ዝርዝር በተለየ የ html ፋይል ውስጥ ያስቀምጡ። በመቀጠል በ. ሲሲ ቅጥያ ፋይል ይፍጠሩ እና ሁሉንም የቅጥ ሉህ መለኪያዎች ያስገቡ።
ደረጃ 3
በጥይት ዝርዝሩ ውስጥ የሚተገበሩ ማናቸውንም ማጠፊያዎችን እና ጥይቶችን አስወግድ እና የሲኤስኤስ መሣሪያዎችን በመጠቀም የምናሌውን ስፋት አኑር-ul {list-style: none;
ስፋት: 200px; }
ደረጃ 4
የአቀማመጥ ባህሪን በመጠቀም በዝርዝሩ ውስጥ የሁሉም ንጥሎች አንጻራዊ አቀማመጥ ያዘጋጁ-ul li {position: አንፃራዊ; }
ደረጃ 5
በመቀጠልም የመዳፊት ጠቋሚው በእቃው ላይ በሚገኝበት ቅጽበት እያንዳንዳቸው ንጥረ ነገሮች ከወላጅ ምናሌው በስተቀኝ የሚታዩትን ንዑስ ምናሌን መንደፍ ያስፈልግዎታል li li {አቀማመጥ: ፍጹም;
ግራ: 199px;
ከላይ 0;
ማሳያ: የለም; } የግራ ባህሪው ከራሱ ምናሌው ስፋት አንድ ፒክሰል ያነሰ ነው። ይህ ብቅ-ባይ ዕቃዎች ድርብ ድንበሮችን ሳይፈጥሩ በእውቀት እንዲቀመጡ ያስችላቸዋል። የማሳያ ባህሪው ገጹን ሲከፍት ንዑስ ምናሌውን ለመደበቅ ያገለግላል ፡፡
ደረጃ 6
ተገቢውን የሲኤስኤስ አማራጮችን በመጠቀም አገናኞችን እንደፈለጉ ያድርጉ ፡፡ ማሳያውን ያካትቱ-እያንዳንዱ አገናኝ ለእሱ ያስቀመጠውን ቦታ ሁሉ እንዲወስድ የማገጃ ግቤት መለኪያ ፡፡
ደረጃ 7
ጠቋሚው በላዩ (ማንዣበብ) ቅጽበት ምናሌው እንዲታይ ለማድረግ ኮዱን ማስገባት አለብዎት: li: hover ul {display: block; }
ደረጃ 8
እንደፈለጉ አገናኞችን እና የዝርዝሮችን ዝርዝር ለማሳየት ተጨማሪ አማራጮችን ያዘጋጁ ፡፡
ደረጃ 9
ብቅ-ባይ ምናሌ ዝግጁ ነው። አይነታውን በ.html ፋይል ውስጥ ማካተት ይቀራል-ብቅ-ባይ ምናሌ
