Web Style Sheets
CSS съвети и трикове

Български превод на "Fixed menus"

Настоящият документ е превод на статията "Fixed menus".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/menus.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 23.08.2008. Последна актуализация на 17.12.2008.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на Today's Moon и Фази на луната.

Окачено меню

Менюто, което виждате в горния десен ъгъл на тази страница е просто DIV, който съдържа няколко A елемента. Цялата работа по фиксирането му на това място се извършва от правила в style sheet. Ето го и кода, копиран направо от тази страница:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

В браузър без CSS или с изклучен CSS, това ще бъде просто параграф с връзки. Благодарение на правилата по-долу, ще изглежда като меню окачено в горния десен ъгъл на прозореца на браузъра:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Интересните правила тук са 'position: fixed', което задава DIV да стои фиксиран на екрана, и 'display: block', което превръща A елементите вътре в DIV-а в блок елементи, и по този начин те се изобразяват един под друг, вместо всичките на една линия.

Бъдете внимателни с подредбата на последните три правила. Те имат еднаква специфика, така че последното, което се прилага, определя цвета. Ако мишката премине над връзката, ние искаме да се приложи :hover, затова трябва да е последно.

Останалото - отстоянията, рамките, цветовете и т.н. може да бъде съкратено или променено според персоналните предпочитания. Забележете, как са дефинирани правилата между връзките: има рамки над всички връзки с изключение на първата, благодарение на правилото ':first-child'. Двойката правила (border-top за всички елементи плюс border 'none' за first child) е доста подходяща при създаване на рамка между елементи.

(Ако прегледате действителните style sheets, прикачени към тази страница, banner-k.css и banner.css, ще забележите някои допълнителни правила, които взаимно си противоречат. Те се използват за да предпазват от бъгове в някои по-стари браузъри. В частност, в banner-o.css банерът е скрит и в banner.css е показан като блок. Това създава ефект на скриване на банера в Netscape 4, защото той пропуска @import на banner.css.)

ЧЗВ: IE 5 и 6 за Windows?

Ако отворите тази страница в Microsoft Internet Explorer 5 и 6 за Windows ("WinIE5" и "WinIE6"), че не работи. Най-малкото под версиите до септември 2002. Много хора са питали за това, ето и обяснението. На кратко: бъгът е в браузъра, не в тази страница.

WinIE5 и WinIE6 все още не имплементират 'fixed'. Това е жалко, но по-голям проблем е, че не парсват свойството 'position' правилно. Браузър, който не познава 'fixed' трябва да пропусне 'position: fixed' и да се върне назад към предишната стойност на 'position' в style sheet-а. Така бихме могли да добавим 'position: absolute' точно преди 'fixed' и броузърът да използва него. Но в WinIE 5 и 6 не това се случва. Очевидно думата 'fixed' се някакси се интерпретира като 'static'.

Не е възможно да принудите WinIE5 и 6 да използват 'fixed', но има решение на проблема с парсването. Johannes Koch съобщава за този трик (в неговата колекция от хакове). Първо заместваме 'position: fixed' в правилата за стил с 'position: absolute' и после добавяме следното правило малко по-долу в style sheet-a:

body>div.banner {position: fixed}

(Ako DIV.banner се намира в друг елемент, а не в BODY, заместете BODY със съответния елемент.) Ефектът от това е, че браузъри, които познават селектора '>' (child) на CSS ще използват това правило, но браузъри, които не го познават, в частност WinIE5 и WinIE6, ще го игнорират. Правилото 'position: absolute' ще се използва вместо това и менюто ще се позиционира на правилното място, с изключение на това, че няма да е фиксирано при скролиране.

Важно е да няма интервали около '>'.