Друзья, админы сайта visavi.net поправьте пожалуйста немного дизайн тёмной темы, а то в некоторых моментах как на скринах нужен светлый text-color
Стили и дизайн (Статей: 11)
Drop-Down Menus, Horizontal Style
Каждый, кому доводилось создавать выпадающие меню, знаком с тем, какое количество скриптов требуется для этого. Между тем, используя грамотно структурированный HTML-код и несложные CSS-правила, можно создать симпатичное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во множестве браузеров, в том числе и в Internet Explorer. И самое главное для вас, любители "чистого" кода - никакого JavaScript! (На самом деле, небольшой скрипт все же необходим, но вовсе не для того, о чём вы подумали.)
Вот пример меню:
http://www.alistapart.com/d/horizdropdowns/horizontal.htm
Создаем меню
Первым и самым важным этапом создания нашего меню является построение его структуры. Лучше всего делать это, используя ненумерованный список, в котором размещены подменю, выступающие как списки в рамках пунктов родительского списка. Звучит заумно? Фактически это очень просто:
Вот так: простой HTML код, доступный и легко редактируемый.
Наводим красоту
Взгляните на приведённый выше пример. Вы увидите довольно скучный список элементов. А я обещал вам, что он будет симпатичным! Давайте-ка добавим немного стилей.
Первым делом удалим отступы и маркеры в ненумерованном списке, а затем зададим ширину пунктов меню.
Что ж, у нас теперь есть каркас, но он всё ещё выглядит невзрачно. Давайте зададим стили для ссылок.
Также обратите внимание, что мы забыли "закрыть" блок меню. Добавим дополнительно нижнюю границу к каждому элементу списка. Итак, вот полный список стилей для ul:
Заставим его работать
А теперь - самое веселое. Нам надо сделать так, чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка.
Прыжки меню в IE5.01 для Win
Пользователи IE5.01 для Windows заметят, как меню прыгает вокруг при наведении мыши на любой из элементов списка. Проблема легко решается внесением изменений в наш прошлый трюк:
Каждый, кому доводилось создавать выпадающие меню, знаком с тем, какое количество скриптов требуется для этого. Между тем, используя грамотно структурированный HTML-код и несложные CSS-правила, можно создать симпатичное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во множестве браузеров, в том числе и в Internet Explorer. И самое главное для вас, любители "чистого" кода - никакого JavaScript! (На самом деле, небольшой скрипт все же необходим, но вовсе не для того, о чём вы подумали.)
Вот пример меню:
http://www.alistapart.com/d/horizdropdowns/horizontal.htm
Создаем меню
Первым и самым важным этапом создания нашего меню является построение его структуры. Лучше всего делать это, используя ненумерованный список, в котором размещены подменю, выступающие как списки в рамках пунктов родительского списка. Звучит заумно? Фактически это очень просто:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
Вот так: простой HTML код, доступный и легко редактируемый.
Наводим красоту
Взгляните на приведённый выше пример. Вы увидите довольно скучный список элементов. А я обещал вам, что он будет симпатичным! Давайте-ка добавим немного стилей.
Первым делом удалим отступы и маркеры в ненумерованном списке, а затем зададим ширину пунктов меню.
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
Теперь нам надо задать положение элементов списка. К счастью, они по умолчанию будут расположены вертикально, что нам и нужно. Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменюul li {
position: relative;
}
Берёмся за подменю. Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор.li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
Используя атрибуты "left" и "top", мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту "left" значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы. (Поймёте, о чём я, чуть позже.)Нам надо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.Что ж, у нас теперь есть каркас, но он всё ещё выглядит невзрачно. Давайте зададим стили для ссылок.
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
Я применил к ссылкам стили по своему вкусу, но их можно легко поменять на те, что вам нравятся. Важно присвоить атрибуту "display" значение "block", ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка.Итак, выглядит уже получше, хотя пользователи Internet Explorer для Windows могут с вами и не согласиться. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти./* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Отлично. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута "height", чтобы ссылки отображались как блочные элементы.Также обратите внимание, что мы забыли "закрыть" блок меню. Добавим дополнительно нижнюю границу к каждому элементу списка. Итак, вот полный список стилей для ul:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
Все сложилось удачно, и теперь все могут увидеть красивое, но нефункционирующее меню.Заставим его работать
А теперь - самое веселое. Нам надо сделать так, чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка.
li:hover ul { display: block; }
Вуаля! И вот оно - наше меню - в действии.
"Ё-моё! Работает!" - крикнет кто-то из вас. - "Здорово!"
Хорошо, хорошо, но чёртов IE/Win опять поломал всю красоту - не желает делать то, что ему сказано. Он понимает псевдокласс :hover лишь для тега <a> - так что li:hover, на который у нас завязано появление подменю, ему ни о чём не говорит.
Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом "»" - Ред.):
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace »
(" over", "");
}
}
}
}
}
window.onload=startList;
Итак, правила для hover таковы:li:hover ul, li.over ul {
display: block;
}
Мы также должны дополнительно связать JavaScript с нашим главным списком, добавив это:<ul id="nav">Надеюсь, учитывая всё вышерассмотренное, любой из вас сможет увидеть упрощённую версию действующего меню.
Прыжки меню в IE5.01 для Win
Пользователи IE5.01 для Windows заметят, как меню прыгает вокруг при наведении мыши на любой из элементов списка. Проблема легко решается внесением изменений в наш прошлый трюк:
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
Таинственный баг шестой версии IE:Работая над статьёй, я обнаружил странный баг, который, как мне кажется, наблюдается лишь в IE6. Для "li a" необходимо задать фон, иначе если выпадающее подменю будет больше (по высоте), чем само родительское меню, то часть ссылок просто исчезнет с экрана ещё до того, как вы сможете кликнуть по ним. Странно! Попробуйте увидеть это сами.
Все в гиперпространстве связанно между собой гиперссылками. Почти каждый переход с одной страницы на другую страницу подразумевает предварительный щелчок мышью по определенной ссылке. Как дать посетителю сайта знать о том, что он уже посещал страницу, на которую ведет определенная ссылка?
Известно достаточно много методов для того, чтобы дать пользователю знать о том, что он уже посещал конкретную страницу в интернете. Какой из этих методов самый подходящий? Цветовое определение ссылок? Подчеркивание? Картинка? При ответе на этот вопрос не стоит забывать о дальтониках, о карманных компьютерах, и, конечно же, не стоит забывать о браузерах, вернее браузере - всеми любимый ослик - Internet Explorer. Появившуюся седьмую версию этого браузера можно называть уже посолидней – осел. Но эта тема для отдельной статьи.
Итак, начнем с Якоба Нильсена – эксперта по удобству и простоте использования. Краткое изложение его статьи по визуализации ссылок (Guidelines for Visualizing Links):
Текстовые ссылки должны быть цветными и подчеркнутыми для того, чтобы достигнуть необходимой воспринимаемости этих ссылок, хотя существуют несколько исключений.
По его словам можно избегать подчеркиваний в навигационном меню сайта и в списках ссылок. При этом пользователю должно быть предельно ясно, какую роль выполняют эти объекты страницы. Если для определения ссылок используются красный и зеленый цвета, то подчеркивание обязательно из-за наиболее распространенных форм дальтонизма.
Подчеркивание также обязательно, если одним из ваших приоритетов является доступность сайта, т.к. много людей имеют плохое зрение.
Примерно 74% всех сайтов используют цветовое определение для распознавания уже посещенных ссылок от еще не посещенных ссылок. Это хорошая дизайнерская традиция, к которой привыкли пользователи.
Цвет не посещенных ссылок должен быть ясным, ярким и насыщенным чем цвет посещенных ссылок, которые должны выглядеть размытыми и тусклыми. Два цвета, отличающие один тип ссылок (которые не открывались) от другого типа ссылок (которые открывались ранее) должны быть оттенком одного и того же цвета. Оттенки голубого цвета больше всего сигнализируют о том, что это ссылка.
Метод Симона Коллисона был признан как один из самых практичных и оригинальных методов. Идея достаточно проста и хорошо подходит для списков со ссылками. На сайтах можно увидеть галочку, которая появляется напротив той ссылки, по которой посетитель уже щелкал мышью или раньше был на странице, куда ведет адрес ссылки. Весь эффект полностью создается в CSS, т.е. XHTML код страницы остается нетронутым. Если внести некоторые изменения в CSS код Симона, то этот метод можно применять к обычным ссылкам, которые не находятся в списках. CSS код этого метода:
fore и :after, которые могут идеально выполнять необходимую функцию определения уже посещенных ссылок. Почти все современные браузеры поддерживают эти элементы.
Для псевдо-элементов fore и :after Майк Дэйвидсон (и несколько людей до него) предложил вместо текста использовать знак корня (радикал) – своеобразная галочка. Но эта галочка является не картинкой, а unicode символом ( \221A ), который появляется после ссылки, по адресу которой уже был определенный посетитель. Весь код также находиться в CSS и выглядит следующим образом:
Я думаю, что различные галочки иногда могут вводить пользователя в заблуждение. В его понимании этот знак может нести в себе другой смысл. Поэтому необходимо дать знать посетителю сайта о том, какую роль выполняет определенный символ после ссылок.
Известно достаточно много методов для того, чтобы дать пользователю знать о том, что он уже посещал конкретную страницу в интернете. Какой из этих методов самый подходящий? Цветовое определение ссылок? Подчеркивание? Картинка? При ответе на этот вопрос не стоит забывать о дальтониках, о карманных компьютерах, и, конечно же, не стоит забывать о браузерах, вернее браузере - всеми любимый ослик - Internet Explorer. Появившуюся седьмую версию этого браузера можно называть уже посолидней – осел. Но эта тема для отдельной статьи.
Итак, начнем с Якоба Нильсена – эксперта по удобству и простоте использования. Краткое изложение его статьи по визуализации ссылок (Guidelines for Visualizing Links):
Текстовые ссылки должны быть цветными и подчеркнутыми для того, чтобы достигнуть необходимой воспринимаемости этих ссылок, хотя существуют несколько исключений.
По его словам можно избегать подчеркиваний в навигационном меню сайта и в списках ссылок. При этом пользователю должно быть предельно ясно, какую роль выполняют эти объекты страницы. Если для определения ссылок используются красный и зеленый цвета, то подчеркивание обязательно из-за наиболее распространенных форм дальтонизма.
Подчеркивание также обязательно, если одним из ваших приоритетов является доступность сайта, т.к. много людей имеют плохое зрение.
Примерно 74% всех сайтов используют цветовое определение для распознавания уже посещенных ссылок от еще не посещенных ссылок. Это хорошая дизайнерская традиция, к которой привыкли пользователи.
Цвет не посещенных ссылок должен быть ясным, ярким и насыщенным чем цвет посещенных ссылок, которые должны выглядеть размытыми и тусклыми. Два цвета, отличающие один тип ссылок (которые не открывались) от другого типа ссылок (которые открывались ранее) должны быть оттенком одного и того же цвета. Оттенки голубого цвета больше всего сигнализируют о том, что это ссылка.
Метод Симона Коллисона был признан как один из самых практичных и оригинальных методов. Идея достаточно проста и хорошо подходит для списков со ссылками. На сайтах можно увидеть галочку, которая появляется напротив той ссылки, по которой посетитель уже щелкал мышью или раньше был на странице, куда ведет адрес ссылки. Весь эффект полностью создается в CSS, т.е. XHTML код страницы остается нетронутым. Если внести некоторые изменения в CSS код Симона, то этот метод можно применять к обычным ссылкам, которые не находятся в списках. CSS код этого метода:
ul {
list-style-type:no ne;
padding:3px;
}
li a {
display:block;
line-height:150%;
width:239px;
background:URL(ticks_grey.gif);
text-decoration:no ne;
}
li a:link, a:active {
color:#666;
}
li a:hover {
color:#F33;
background-position: 0 -20px;
}
li a:visited {
background-position: 0 -40px;
}
При этом XHTML код страницы выглядит очень просто:
<ul>
<li>адрес ссылки</li>
<li>еще один адрес ссылки и т.д.</li>
</ul>
Internet Explorer тормозит широкое использование уже давно появившихся псевдо-элементов fore и :after, которые могут идеально выполнять необходимую функцию определения уже посещенных ссылок. Почти все современные браузеры поддерживают эти элементы.Для псевдо-элементов
fore и :after Майк Дэйвидсон (и несколько людей до него) предложил вместо текста использовать знак корня (радикал) – своеобразная галочка. Но эта галочка является не картинкой, а unicode символом ( \221A ), который появляется после ссылки, по адресу которой уже был определенный посетитель. Весь код также находиться в CSS и выглядит следующим образом:a:visited:after {
content: "\00A0\221A";
font-size: 75%;
}
\00A0 означает непрерывающиеся пустое место (вместо пробела).Я думаю, что различные галочки иногда могут вводить пользователя в заблуждение. В его понимании этот знак может нести в себе другой смысл. Поэтому необходимо дать знать посетителю сайта о том, какую роль выполняет определенный символ после ссылок.