በጣቢያ ገጾች ላይ የተቆልቋይ ምናሌዎች ቦታን ለመቆጠብ እና የድር ሀብትን አወቃቀር አመክንዮአዊ አቀራረብ ለማቅረብ ያገለግላሉ ፡፡ ይህንን ንጥረ ነገር ለመተግበር ብዙ መንገዶች አሉ ፣ ከቀላሉ ውስጥ አንዱ ከዚህ በታች ቀርቧል ፡፡
አስፈላጊ ነው
ስለ HTML እና ለ CSS ቋንቋዎች መሠረታዊ እውቀት
መመሪያዎች
ደረጃ 1
የምናሌው የኤችቲኤምኤል ኮድ ወደ ገጾች የሚወስዱ አገናኞች የተቀመጡባቸውን የጎጆ ዝርዝር ንጥረ ነገሮችን (UL እና LI) ይጠቀማል ፡፡ ምንም ውስብስብ አወቃቀሮችን አልያዘም ፡፡ ተለዋዋጭዎቹ በሲ.ኤስ.ኤስ. አማካይነት ይተገበራሉ ፣ የማብራሪያው ማገጃ በቀጥታ በገጹ ምንጭ ኮድ ውስጥ ይቀመጣል ፡፡ በውስጡም ምንም ልዩ ነገር የለም ፣ በተጨማሪ ፣ ጽሑፉ የአንዳንድ የቅጥ ብሎኮችን ዓላማ አንዳንድ ማብራሪያዎችን ይ containsል።
ደረጃ 2
<! DOCTYPE html ህዝባዊ "- // W3C // DTD XHTML 1.0 ሽግግር // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ተቆልቋይ ምናሌ * {
ቅርጸ-ቁምፊ-ቤተሰብ: ቬርዳና;
ቅርጸ-ቁምፊ-14px;
} ul, li, a {
መቅዘፊያ: 0;
ማሳያ: ብሎክ;
ድንበር: 0;
ህዳግ: 0;
} አል {
ድንበር: 1px solid #AAA;
ስፋት: 150px;
ዝርዝር-ዘይቤ;
ዳራ # ኤፍኤፍኤፍ;
} ሊ {
የጀርባ-ቀለም #AAA;
አቀማመጥ: ዘመድ;
z-index: 9;
መቅዘፊያ: 1 ፒክስል;
}
li.folder {background-color: #AAA;}
li.folder ul {
አቀማመጥ: ፍጹም;
ከላይ: 5 ፒክስል;
ግራ 111 ፒክስል; / * ለ IE አሳሾች * /
}
li.folder> ul {left: 140px;} / * ለሌሎች አሳሾች * / a
መቅዘፊያ: 2px;
ድንበር: 1px solid #FFF;
ጽሑፍ-ማጌጫ-የለም;
ስፋት 100%; / * ለ IE አሳሾች * /
ቀለም # 000;
ቅርጸ-ቁምፊ-ክብደት-ደፋር;
}
li> a {width: auto;} / * ለሌሎች አሳሾች * / li a {
ስፋት 140px;
ማሳያ: ብሎክ;
} li a.submenu {
የጀርባ-ቀለም-ቢጫ;
} / * አገናኞች * /
አንድ: ማንዣበብ {
የድንበር-ቀለም-ግራጫ;
የጀርባ-ቀለም # FF0000;
ቀለም: ጥቁር;
}
li.fol a: ማንዣበብ {
የጀርባ-ቀለም # FF0000;
} / * አቃፊዎች * /
ul ul, li: ማንዣበብ ul ul ul {ማሳያ: የለም;}
li.folder: ማንዣበብ {z-index: 10;}
li: hover ul, li: hover li: ማንዣበብ ul {display: block;}
- 1. ገጽ
-
2. አቃፊ
- 2.1 ገጽ
-
2.2 አቃፊ
- 2.2.1 ገጽ
- 2.2.2 ገጽ
- 2.2.3 ገጽ
- 2.3 ገጽ
-
3. አቃፊ
- 3.1 ገጽ
- 3.2 ገጽ
- 3.3 ገጽ
- 4. ገጽ
ደረጃ 3
የድሮውን የበይነመረብ አሳሽ አሳሾች ስሪቶች በዚህ ኮድ ላይ ድጋፍ ማከል ይችላሉ - ጃቫስክሪፕትን በመጠቀም ይተገበራል (በፒተር ኔደርሎፍ) ፡፡ ፋይሉን በሚፈለገው ኮድ ማውረድ ያስፈልግዎታል ፣ ለምሳሌ ፣ ከዚህ አገናኝ - https://peterned.home.xs4all.nl/htc/csshover3.htc. ከዋናው ገጽ ጋር በተመሳሳይ አቃፊ ውስጥ መቀመጥ አለበት። እና በዋናው ገጽ ቅጦች መግለጫ ላይ አንድ አገናኝ ያክሉ - በቀጥታ ከመክፈቻ ቅጥ መለያ በኋላ በቀጥታ ሊቀመጥ ይችላል / / ለድሮ አይ ኢ አሳሾች *
አካል {ባህሪይ url ("csshover3.htc");}
