Iōng CSS siattēng ul kap li lâi chò menu

lpc 2021-05-06

※ Chit phiⁿ sī tùi kū ji̍t ec bûnchiuⁿ [1] káisiáer.

CSS jú lâi jú piānlī, tùi siá bāngia̍h ū chin tōa ec lō͘iōng. Tī chò menu ec sîchun, ū CSS tàu saⁿ kāng, kannā iōng <ul> kap <li> tiō thang ū chiok chōe piànhōa.

Ēkha tùi HTML kap CSS nn̄g hongbīn lâi chò cgit ev kantan ec chénglí.

HTML ec Kipún Siáhoat

Tī html file lāité, tiō chiàu itpoaⁿ tùithāi ul kap li ec hongsek lâi chhúli to ē sái.

<ul>
<li><a href="">hāngbo̍k 1</a></li>
<li><a href="">hāngbo̍k 2</a></li>
......
</ul>

CSS ec Kipún Chòhoat

<ul>

ul {list-style-type: none; padding: 0; margin: 0;}

Gôanthâu ec <ul> ē tī ta̍k ev hāngbo̍k thâuchêng ka cgit ev tiám he̍ksī sò͘jī, nāsī lán'e menu bô ài chit kóa mi̍hkiāⁿ, chū annē style kā siatchò none.

Koh lâi, kok chióng ec liûlámkhì ū ūtēng tùi phiⁿar ec kūlî, iā tiō kā in khìtû, padding kap margin lóng kō siatchò 0.

ti̍t sek ec `<li>` (chhúlí `ul` kap `a`)

ul {width: 60px;}
li a {display: block;}

Nā sī bô siūⁿ beh hō͘ cgit chōa siuⁿ kòe tn̂g, tiō kā ul siat khoahtō͘.

Nā beh hō͘ niáuchhíar luh kòe li chit tè só͘chài to kannā chítio̍h jī kâng khóan, tiō kā jī <a> púnsin siatchò block.

hoâi sek ec `<li>` (chhúlí `li` kap `a`)

Hoâi sek ū nn̄g chióng chòhoat, chiū sī kā <li> siatchò inline he̍kchiá sī float.

inline

li {display: inline;}

<li> púnsin sī cgit ev block, púnlâi sī tēng ex pâiliater. Kā li siat chò inline, sī beh khìtiāu chit ev ūtēng ec ta̍t, hō͘ chōe chōe ec li thang pâichò cgit pâi. Chit khóan chòhoat bô hoattō͘ hō͘ ta̍k ev li pêng tn̂g, iā m̄ bián khì chhē a ec mâhôan, bián khì kā i siat block.

M̄koh ē sái kā a siattēng padding kap margin. Che ài chham ul ec padding kap margin kângchôe khólū.

floating

li {float: left;}
a {display: block; width: 60px;}

Beh hō͘ ta̍k ev li pêng tn̂g, tiō ài kā i siatchò float, jîchhiáⁿ iā ài kā a ec display siatchò block, koh ài siattēng i'e khoahto̍͘. Nā iōngliáu float, tiō ē kìk tit teh menu chò sóa liáuāu kā i clear.

Ísiōng só͘ kónger chiū iōng ēkha chit tōaⁿ html bé lâi chò chóngkiat.

<html>
<head>
<meta charset="UTF-8">
<title>menu test</title>
<style>
h2.piaute {margin-bottom: 0.5em; margin-top: 1.5em;}

ul.tit, ul.hoainnA, ul.hoainnB {list-style-type: none; padding: 0; margin: 0; overflow: hidden;}
ul a {text-decoration: none; color: #fff; padding: 6px;}
ul a:hover {color: green; background-color: yellowgreen;}

li {background-color: forestgreen; margin: 1px;}

ul.tit {width: 100px;}
ul.tit li a {display: block;}

ul.hoainnA li {display: inline;}

ul.hoainnB li {float: left; text-align: center;}
ul.hoainnB li a {display: block; width: 100px;}
</style>
</head>
<body>
<h2 class="piaute">ti̍t sek ec sóantoaⁿ</h2>
<ul class="tit">
<li><a href="">HOME</a></li>
<li><a href="">CONTACT</a></li>
<li><a href="">ABOUT</a></li>
</ul>

<h2 class="piaute">hoâiⁿ sek ec sóantoaⁿ: inline (bô pêng khoah)</h2>
<ul class="hoainnA">
<li><a href="">HOME</a></li>
<li><a href="">CONTACT</a></li>
<li><a href="">ABOUT</a></li>
</ul>

<h2 class="piaute">hoâiⁿ sek ec sóantoaⁿ: floating (pêng khoah) </h2>
<ul class="hoainnB">
<li><a href="">HOME</a></li>
<li><a href="">CONTACT</a></li>
<li><a href="">ABOUT</a></li>
</ul>
<div style="clear: both"></div>
<body>
</html>

Bih Kíelâi ec To Chân ec Menu

Che kónger sī niáuchíar luh kòe bó͘ ev hāngbo̍k ce sîchun, ē koh cháu chhut cgit iân sóantoaⁿ. Tùi html tiō sī tī ēkha kohchài cháu cgit kái ul/li. Tùi css tiōngtiám sī chit kóa:

ul {list-style: none; position: relative;}
ul li {float: left; position: relative;}
ul li a {display: block;}
ul ul {display: none; position: absolute;}
ul li:hover ul {display: block;}
ul ul li {clear: left;}

Chit lāité ū chin chē lí lí khok khok ec tāichì thang chùì, nā ū hèngchhù, chhiáⁿ khòaⁿ ēbīn ec chhamkhó chuliāu.

Nā sī hoâi sek cháu chhut ti̍t sek sóantoaⁿ, thang chhamkhó [3]. Javascript ec chòhoat thang chhamkhó [4].

Chòe āu, siōng hó kā ul hō cgit ev miâ, chò cgit ev class, khah bián tit kap pa̍t khóan ec chênghêng lam chò hóe.

Chhamkhó Chuliāu

[1] CSS 用 ul 和 li 做 menu, 2013-04-09
http://randomcue.blogspot.com/2013/04/css-menu.html

[2] CSS Navigation Bar
chho͘ kip, káisoeh kap hōanlē siá kah chin chengchhó.
http://www.w3schools.com/css/css_navbar.asp

[3] Horizontally Centered Drop-Down Menus
chìn kip, ū hù káisoeh.
http://matthewjamestaylor.com/blog/centered-dropdown-menus

[4] All Levels Navigational Menu (v3.03)
chhinchhiūⁿ sī hó ēng ec javascript, ū thang sóan ti̍t iā hoâi sek.
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/