Yahoo! User Interface Blog (YUIBlog)

Direksyon-friendly Navigation Bar

Abril 25, 2011 sa 09:12 ng umaga sa pamamagitan ng Thierry Koblentz | Sa CSS 101 , Development | 3 mga Komento

Ako kamakailan lamang ay dumating sa isang pahalang navigate menu sa right-nakahanay na mga link. Bilang maaari mong asahan, ito ay isang listahan ng elemento float:right karapatan at ang mga listahan float:left sa lumutang: kaliwa. Kahit na doon ay walang mali sa diskarte na ito, inspirasyon ito sa akin upang kunin ang pagkakataong ito upang talakayin ang directionality para sa layout.

Ang halaga ng mga lumulutang na mga elemento

Sa kamay ay walang konsepto ng directionality, hindi nila trabaho tulad ng mga inline na mga elemento o mga hanay ng dir (na kung saan ang dir na katangian ay isang magic bullet). Sa mga kamay, ang mga may-akda ay dapat na ipatupad ang mekanismo sa "swap" halaga ltr ang mga rtl ng interface (ltr kumpara sa rtl).

Kaya sa halip ng float lumutang, ang mga may- inline-block pabor ang inline-block. Narito ang isang simpleng halimbawa:

 ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; } 

Tandaan na ang paggamit ng \ 0 0 "(na walang espasyo) sa halip ng \9 9 "ay mag-ingat ng Opera, ngunit maaaring hindi bilang hinaharap patunay ng \9 9 "(IE lamang) .

Bilang ang demo na pahina ay nagpapakita, sa Chrome, Safari at Firefox, inline-block block na pamamaraan ay gumagawa layout ang pagsusulat-mode na umaasa (sa direksyon ng daloy tumutugma dir ang halaga ng ang dir na katangian, o ang unang halaga kung ang walang direksyon ay tinukoy). Para sa iba pang UA ng, at dahil ng IE ang kakulangan ng suporta para sa ang katangian ng selector html[dir="rtl"] "]), ang mga may-akda kailangan upang magdagdag ng isang hook sa markup sa mangontrata ng pagpapakain sa pagbabago ng direksyon. Halimbawa, para sa buong A-grade pagkakatugma:

Para sa lumutang pamamaraan:

 .rtl ul { float: left; } .rtl ul li { float: right; } 

Para sa mga inline na-block na pamamaraan:

 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ } 

text-align: start | end

Hindi tulad ng left at right , start simula end pagtatapos ay pagsulat-mode umaasa keyword . Sa Ingles, start ang mga left sa end at end right mga mapa sa kanan. Umasa sa start at end kaysa sa left at right ay nagbibigay-daan sa ilang mga browser na ltr ang rtl (ltr / rtl) awtomatikong.

Pagkakaiba sa pagitan ng mga browser at mga pamamaraan

Sa mga browser na hindi sumusuporta sa " start / end "(IE, Opera)

pamamaraan ng lumutang: swapping direksyon ay hindi baguhin ang anumang

inline-block na pamamaraan: swapping direksyon ay hindi baguhin ang pagkakahanay ng menu, ngunit ang mga link ay ipinapakita sa ang tamang sequence

Sa mga browser na support start simulang end dulo "(Chrome, Safari, Firefox )

pamamaraan ng lumutang: swapping direksyon ay hindi baguhin ang anumang

inline-block na pamamaraan: swapping direksyon ay sapat na upang magpalitan ng direksyon ng parehong menu at ang mga link

Iyan na ito! Susunod na oras na mayroon kang mga elemento estilo pahalang, tandaan na display:inline-block - display:table : table ng isang subukan.

Hanapin ang mga pag- uusap : Bloglines | Technorati

Ibahagi at i- extend: Bookmark sa del.icio.us | Digg ito ! | reddit!