Слышали ли вы когда либо такое утверждение, что "нельзя сделать динамическое выпадающее меню исключительно на CSS для IE"? Уверен, что да. И что, вы-таки верите этому? Правильно, лучше не верьте.
Цель данной статьи - сделать выпадающее меню для IE, сделанное исключительно на CSS. Начав с этой постановки, я расширил задачу до того, чтобы заставить работать такое меню в других наиболее известных браузерах (прим. пер.: из комментариев выясняется, что этими браузерами являются Opera 7.x и последние версии Firefox).
Цель, которой мы хотим достичь в этой статье, в принципе более или менее общеобразовательная, т.е. дать общее представление о некоторых "скрытых" и редко используемых особенностях браузеров.
Также особенно любопытные могут в этой статье найти некоторые ухищрения, с помощью которых можно достичь определенных нестандартных результатов. Ну и для разработчиков эта статья может стать поводом для размышления или источником новых идей.
Вообще-то я думал о том, чтобы пометить эту статью как для "углубленного изучения (advanced)". Но я уверен, что даже не самые опытные разработчики хорошо поймут то, что написано в статье. Короче, читатель просто обязан знать основы CSS и
HTML.
Я долго искал в сети меню, которые были бы сделаны на CSS, но не нашел ни одного решения, которое бы работало без глюков в IE. Однако же я нашел много интересных идей, которые и привели меня к тому результату, который будет здесь описан. Да, мой код тоже не совершенен, но у меня попросту нет времени, чтобы выправить все ошибки. Самое интересное альтернативное решение из всех, что я видел (которые используют CSS), основано на использовании псевдокласса hover для элементов LI. А я-то никогда и не думал, что такое возможно, впрочем, как и не думал о том, что вообще возможно сделать выпадающее меню для IE без скриптов...
Основным отличием между моим и другими меню является то, что мое работает в IE. Все решения, которые я видел, используют элемент LI как основной элемент для псевдокласса:hover, однако Microsoft решила, что этот псевдокласс может быть использован только для
элемента A. Большинство сайтов делают оговорку, что их меню работают только в браузерах Opera 7.x или Mozilla. Но ведь эти браузеры используются только пятью процентами пользователей! Да, такие меню хороши в этих браузерах, но к сожалению не могут быть видны в большинстве самых распространенных браузеров. Сейчас мы исправим это недоразумение.
Это динамическое меню, для создания которого используется только CSS, и не используются скрипты (например, написанные на JavaScript).
Сразу оговорюсь, что в этой статье я не буду вас учить использованию CSS. Поэтому сразу переходим к рассмотрению принципа работы меню - к псевдоклассу ":hover". Да, это именно класс. Т.е. селектор может наследовать другой селектор, который включает ":hover". В нашем случае "A:hover TABLE" выбирает "
в
элементе , на который наводится указатель мыши. Далее следует трюк с таблицей, свойство "display" которой равняется "none" (т.е. она невидима). Таблица находится между тэгами якорей (,). По словам Microsoft, это может вызвать неадекватную реакцию IE, но я ничего такого не заметил. Почему мы используем таблицу? А потому, что что она очень хорошо разделяет вложенные якоря, которые мы хотим задействовать из основного якоря. Такое решение не работает в Mozilla 0.7 и даже с помощью JavaScript я еще не нашел способа реализовать это. Прямое вложение якорей не допускается Microsoft, поэтому элемент table - это своеобразный хак для IE. И, насколько я знаю, только таблицы позволяют таким образом "провести" IE.
Итак, что у нас тут имеется? 2 таблицы с якорями внутри якорей.
<
A
class=
"a"
href
=
"#11"
>
Help
<
BR
>
<
TABLE cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
>
<
TR
>
<
TD
><
a href
=
"#12"
>
Howto
<
TR
>
<
TD
><
a href
=
"#13"
>
Index
<
TR
>
<
TD
><
a href
=
"#14"
>
About
Которые являются скрытыми.
div
#menu .a table {
display
:
none
;
z
-
index
:-
1
;
}
Браузер показывает содержимое якоря при наведении указателя мыши и применяет в этом случае соответствующий стиль:
div
#menu .a:hover {
background
:
#7DA6EE;
border
:
1px solid black
;
color
:
black
;
z
-
index
:
0
;
}
Для выпадающей таблицы, которую мы используем для подменю: это ключевая таблица, которая и является выпадающим списком.
div
#menu .a:hover table{
background
:
White
;
display
:
block
;
position
:
absolute
;
width
:
125px
;
z
-
index
:
0
;
border
:
1px solid
#708090;
}
Для ссылок внутри подменю:
div
#menu .a:hover table a {
display
:
block
;
color
:
Black
;
text
-
decoration
:
none
;
}
Если мы наводим указатель на одну из ссылок в подменю, браузер применяет следующий стиль:
Для ссылок внутри подменю:
div
#menu .a:hover table a:hover {
display
:
block
;
background
:
#7DA6EE;
color
:
black
;
text
-
decoration
:
none
;
padding
:
0px 11px
;
border
:
1px solid black
;
z
-
index
:
1000
;
visibility
:
visible
;
}
Стиль ссылок в выпадающем меню:
div
#menu .a:hover table a {
display
:
block
;
color
:
Black
;
text
-
decoration
:
none
;
padding
:
1px 12px
;
z
-
index
:
1000
;
}
Возможно, вы заметили, что я испольщовал несколько свойств "z-index" для некоторых элементов. Они являются хаками для некоторых проблем, которые я нашел при тестировании меню.
Усовершенствования
Для того, чтобы добавить подуровни в выпадающее меню нужно просто вставить еще один элемент div ".menuitem" (вместе с его содержимым и аналогичной структурой) вместо ссылки в родительскую таблицу.
Теперь, когда у вас есть подуровни в меню, вам нужно будет удалить тэги
, чтобы дать меню "нормально выезжать". В дополнение к этому, вам нужно будет сделать несколько копий классов.menuitem и.a с одинаковыми свойствами, но разными именами для каждого подменю.
Да, похоже поработать придется много, НО вы можете просто добавить их селекторы в соответствующую секцию таблицы стилей.
Полное описание того, как это сделать, я сделаю в следующий раз.
А пока что скажу, что это меню вы можете изменить так, как вам захочется, приспособить под себя. И возможностей для этого существует бесконечное множество - ограничить их может только ваша фантазия...
Переключение стилей (Скины)
Если вы хотите добавить скины для вашего меню с возможностью их смены самим пользователем, вам нужно будет добавить дополнительные таблицы стилей и дать им имена с id="some_name" (для IE) и с именами name="some_name" (для остальных браузеров). Для того, чтобы не применялись оба стиля, вам нужно заблокировать все стили, кроме стилей по умолчанию, путем добавления параметра "disabled" в стиль тэга (причем не имеет значения, связываете ли вы его или используете линейный синтаксис). Mozilla и Opera позволяют переключение поименованных стилей из браузера. Как правило, эти браузеры не применяют все стили, которые определены именем name="..." и игнорируют id="...". Также они умеют использовать имя name="default" как таблицу стилей по умолчанию и name="alternate" в качестве альтернативной таблицы стилей. Вы можете определить имя стиля, которое пользователь будет видеть как свойство title="...". Например, демонстрационная версия меню на этой странице включает следующие определения:
<
STYLE type
=
text
/
css id
=
"alternate"
title
=
"Blue"
name
=
"alternate"
disabled
>
...<
STYLE
>
<
STYLE type
=
text
/
css id
=
"default"
title
=
"Default"
name
=
"default"
>
...<
STYLE
>
Обратите внимание на порядок присвоения имен, я настойчиво рекомендую строго ему следовать.
IE не имеет встроенного переключения стилей CSS, поэтому нам придется его сделать самим (тут уже не без использования JavaScript):
Выберите один из стилей, кликнув на соответствующий, и вернитесь вверх, чтобы увидеть
изменения:
onclick
=
"document.styleSheets("default").disabled=false;document.styleSheets("alternate").disabled=true;"
>
Стиль
по умолчанию
Onclick
=
"document.styleSheets("alternate").disabled=false;document.styleSheets("default").disabled=true;"
>
Голубой
Onclick
=
"document.styleSheets("alternate").disabled=true;document.styleSheets("default").disabled=true;"
>
Без
стилей
Это делается так:
<
ul
>
<
li onclick
=
"document.styleSheets("default").disabled=false;
document.styleSheets("alternate").disabled=true;"
>
<
a
>Default
<
li onclick
=
"document.styleSheets("alternate").disabled=false;
>
<
a
>
Blue
<
li onclick
=
"document.styleSheets("alternate").disabled=true;
document.styleSheets("default").disabled=true;"
>
<
a
>
No Stylesheet
Предупреждение! Это просто маленький пример!
Перезагрузка страницы сбросит значения по умолчанию для таблиц стилей. Поэтому для реальных целей необходимо использовать cookies или серверные скрипты для того, чтобы запоминать выбор пользователя, что опять-таки не является предметом рассмотрения данной статьи.
Добавлю только, что приведенный выше код будет работать только в
IE.
Заключение
Я советую всем использовать меню на основе CSS на ваших сайтах (и в веб-приложениях), потому что таким образом можно избежать многих проблем, которые появляются при использовании меню на основе JavaScript. Такие проблемы, как правило, возникают при неправильной обработке событий в IE. Более того, в некоторых браузерах имеется возможность отключения скриптов, и уж тем более многие браузеры не поддерживают JS от Microsoft.
Если же браузер не поддерживает CSS, то он по крайней мере будет отображать все ссылки.
Известные ошибки
По умолчанию ссылки в подменю не работают в Mozilla. Но я нашел более-менее приемлемое решение этой ошибки. Оно основано на вставке специального меню, опять-таки без использования скриптов. Просмотрите внимательно те места кода, где упоминается Mozilla (или "moz"). Вы увидите, что HTML разделы не имеют вложенных якорей (последний тэг помещен туда, где он и должен находиться). В первой части CSS я использую недокументированные селекторы - это специальные селекторы для Mozilla, и добавляю селектор:hover для тех элементов div, которые поддерживаются Mozilla. И все равно после этого поведение остается не совсем корректным.
В комментариях есть замечание (от Nick Young), что меню не работает в Netscape. я уверен, что проблема там в том же, что и в Mozilla. Надо искать дополнительную информацию об этом. Решение возможно потребует некоторых изменений, потому что альтернативный код должен нормально работать и в Netscape.
Замечания:
Страница была протестирована в IE версий 5, 5.5, 6, в Opera 7.23 и Mozilla 0.71. Скорее всего, меню будет работать и в более ранних версиях указанных браузеров.
Аннотация:
Цель. Научиться применять элементы HTML (списки и гиперссылки), а также свойства CSS (модель отображения, псевдоклассы гиперссылок) для формирования системы навигации на веб-странице.
Разместить на странице меню
с набором гиперссылок - одна из важных задач в практике веб-дизайнера. Чтобы не утомлять внимание пользователя просмотром всего набора, ссылки обычно группируют по категориям, и в основное меню
включают только категории. Только при выборе категории должны отобразиться соответствующие ссылки (или подкатегории).
Как правило, такие динамические меню
принято создавать средствами языка Javascript, позволяющего совершать любой сложности манипуляции с элементами веб-страницы. Однако, существует и решение на CSS
- довольно простое и красивое, хотя и не любую фантазию дизайнера выполняющее. Рассмотрим его пошагово.
Запустите Visual Web Developer (или Visual Studio) и создайте новый документ HTML.
Внутри элемента head
введите подходящий заголовок страницы.
Введите открывающий тэг
. Обратите внимание, что программа даёт подсказки по мере набора текста (эта технология называется Intellisense): введя открывающую угловую скобку, вы видите перечень html-элементов, а введя пробел после имени элемента, вы видите перечень допустимых имён атрибутов данного элемента (в данном случае необходим атрибут type
). Поставив знак равенства после имени атрибута, вы можете увидеть список его допустимых значений (в тех случаях, когда такой список существует в принципе). Всякий раз значение можно выбрать из списка щелчком мыши либо, если по мере ввода оно выделилось автоматически, просто нажать Enter
или пробел.
После ввода закрывающей угловой скобки редактор автоматически добавит закрывающий тэг
.
Создайте в теле документа набор категорий в виде неупорядоченного списка (ul
), каждый элемент которого содержит список ссылок (см. пример).
- Популярные блюда
- Итальянская кухня
- Закуски
- Закуски
- Сласти
- Фрукты
- Подарки к празднику
- Юбилеи
- Малышам
- День рождения
- Поздравляем!!!
- Выбор по цене
- Меньше 1000 руб
- От 1000 до 1500 руб
- От 1500 до 2000 руб
- От 2000 до 3000 руб
- Дорого
- Фрукты и Овощи
- Сухофрукты и Орехи
- Корзины фруктов
- Горы фруктов
- Здоровая пища
- Без пестицидов
- Цветы
- Живые цветы
- Садовые цветы
- "Говорящие" цветы
-
Корпоративные подарки
Листинг
7.1.
Разметка списка категорий и ссылок
Названия ссылок и категорий придумайте самостоятельно. Важно, чтобы атрибут id
внешнего списка имел значение MainMenu
- далее ему будет назначен особый стиль по этому идентификатору).
В таблице стилей добавьте следующее правило:#MainMenu > li {
float: left;
list-style-type: none;
}
Отслеживайте изменения, происходящие с отображением документа, разделив окно редактора на представление исходного кода и конструктора. После применения указанного стилевого правила пункты внешнего списка (li
) расположились горизонтально (за счёт обтекания):
Рис.
7.1.
Пусть вложенные списки ссылок будут невидимыми (добавьте им свойство display:none;
) и появляются только при наведении курсора на название соответствующей категории. Следующее правило с селектором псевдокласса hover
имеет такой смысл: у списка (ul
), вложенного в пункт списка (li
), на который наведён указатель (:hover
) и который вложен в элемент с id=#MainMenu
, способ отображения следует сделать блочным (а не невидимым):#MainMenu li:hover ul {
display:block;
}
Сохраните разрабатываемый документ, откройте его в браузере и убедитесь, что меню работает правильно.
Принципиально механизм работает - осталась эстетическая сторона.- Назначьте якорям любого уровня вложенности в меню (правило #MainMenu a
) желаемый цвет (color
), гарнитуру (font
), а также уберите подчёркивание (text-decoration
).
- Назначьте элементам списка категорий (правило #MainMenu > li
) фоновый цвет (background
), внутренний отступ (padding
) и рамку справа (border-right
).
- Назначьте элементам вложенного списка ссылок (правило #MainMenu li li
) такой же фоновый цвет, как и в списке категорий, а также небольшой отступ и рамку снизу. Кроме того, уберите маркировку списка (list-style-type
).
- Уберите у списка ссылок (правило #MainMenu li ul
) поля и отступы (margin
и padding
).
Небольшой проблемой является то, что некоторые элементы списка категорий увеличиваются в ширину при наведении на них указателя. Это является следствием того, что ширина элемента списка определяется шириной всего содержимого - включая вложенный список. Однако если выбросить вложенный список из нормального потока и позиционировать его абсолютно, то его ширина более не будет влиять на ширину родительского элемента. Поэтому укажите для списка ссылок абсолютное позиционирование, а для элементов списка категорий - относительное. Проверьте в браузере. Затем уточните положение вложенного списка относительно его контейнера путём задания значения свойств left
и top
(не опускайте выпадающий список слишком низко, иначе он станет пропадать при попытке выбрать в нём ссылку).
Зачем нужно было позиционировать элементы списка категорий относительно? Уберите соответствующее правило, и вам всё станет ясно.
Добавьте последний штрих: пусть элементы обоих списков при наведении указателя немного изменяют цвет фона (правило #MainMenu li:hover
).
Окончательный результат должен быть подобен следующему.
Наверняка вы видели на некоторых веб-сайтах динамичные и анимированные меню, которые изменяются при прокрутке вниз. Минимизируя главное меню навигации, вы оставляете больше места для содержания. В этом уроке мы объясним, как вы можете создать меню самостоятельно с помощью HTML5, CSS3 и немного jQuery.
Если вы хотите, чтобы особое внимание фокусировалось на содержании сайта, а также позволяло создавать более крупную и впечатляющую навигацию при первом посещении пользователем веб-сайта, то такого рода меню вам подойдет как нельзя лучше. Вы можете отлично продемонстрировать свой бренд или логотип, и после первоначального ознакомления с сайтом, уменьшить некоторые элементы, что позволит пользователю обратить главное внимание на ваше содержание.
Есть несколько способов это сделать. В этом уроке мы объясним, как создать фиксированное меню во всю ширину страницы, которое изменяется в высоте вместе с логотипом, создавая сведенную к минимуму версию исходного оригинала. При желании, вы также можете заменить логотип на другой вариант, например инициалы или иконку, но имейте в виду, что консистенция очень важна здесь, так чтобы пользователь понимал, как элемент изменился и что его главная цель по-прежнему является навигация по сайту.
Создание базовой структуры в HTML5
Мы начнем с создания основного HTML кода, который нам понадобится. Для начала, мы будем придерживаться очень простой структуры HTML5.
Теперь, когда наш первоначальный HTML код написан, мы добавим код для меню, а также некоторые другие детали для хедера нашего HTML файла.
Как создать анимированное меню | WebDesignMagazine
- Главная
- Статьи
- Это очень клевый сайт!
Крутим вниз и смотрим как изменится меню
Все! Приехали!
В нашем : мы добавили мета-тег для автора, чтобы указать создателя документа, после чего мы включили известный “сброс CSS” от Эрика Мейера, что приведет к сбросу почти каждого элемента в HTML файле, давая вам более понятный и простой документ для работы. И так как мы будем использовать JQuery позже, в последней строке нашего главного элемента мы импортируем его через JQuery CDN.
В нашем теге, мы использовали по умолчанию HTML5 элемента. Наш будет во всю ширину страницы и будет нести ответственность за изменения между большими и малыми версии меню. Мы даем нашему класс с именем “large”, так чтобы мы могли изменить некоторые специфические свойства в CSS, чтобы преврать наше меню в уменьшенную версию. это наш меню-контейнер, который содержит изображение логотипа нашего веб-сайта и простой неупорядоченный список меню с тремя ссылками.
Поскольку у нас здесь нету никакого контента, будет использоваться, чтобы растянуть страницу и заставить действовать прокрутку.
И это все по HTML части. Теперь нам нужно стилизовать элементы при помощи CSS и сделать меню динамичным.
Стилизация меню и страниц
/* Импортируем шрифт Amaranth */
@import url(//fonts.googleapis.com/css?family=Amaranth);
/* Основной стиль */
body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Размер и центровка меню */ nav{ width: 960px; margin: 0 auto;}
Немного этого CSS сделает наше меню 960px шириной по центру, при организации нашего меню справа и логотипа слева. Мы также импортируем Amaranth шрифт от Google Web Fonts, чтобы использовать его для нашего текста на странице.
Section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: "Amaranth", sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; }
Здесь мы просто заставляем страницу растянуться, чтобы спровоцировать скроллинг (прокрутку), и позиционирование текста для обозначения начала и конца содержания.
Header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: "Amaranth", sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }
/* Размеры для увеличенного меню */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }
Здесь мы заканчиваем основную стилизацию нашего заголовка. будет служить нашим меню контейнером. Он будет содержать наш элемент и будет служить элементом, где мы определяем цвет фона, высоту меню, стиль меню ссылок и другое. Он будет адаптироваться к ширине экрана со свойствами ширины: 100% и будет оставаться фиксированными в течение других элементов на веб-сайте. Важно не забуть задать z-индекс, чтобы этот элемент перекрывал остальные части страницы, а также положения:fixed, чтобы сделать div закрепленным вверху, так чтобы он оставался на том же положении, в то время как пользователь прокручивает веб-сайт. Как вы видите, кроме установки стилей для заголовков, мы также устанавливаем некоторые специфические стили для “large” класса, используя header.large. Начальное состояние нашего меню будет большим, и поэтому мы здесь определяем только нужные стили, чтобы оно выглядело, как мы хотим, при первоначальном входе пользователя на страницу.
Динамическое изменение размера меню
Наше меню сделано и стилизовано, но мы все еще хотим поработать над его минимизацией. Для создания этого «состояния», мы будем создавать новый класс для в CSS под названием “small”, который будет ответствен за изменение свойств, которые мы должны модифицировать. Мы уже определили большое меню, так что теперь мы просто должны сделать наше меню короче, наше изображение меньшего пропорционального размера, а (margin top) мы используем в наших элементах
, что также должно быть уменьшено, чтобы они оставались вертикально в центре с новой высотой меню: /* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }
Итак, как вы видите, эти стили практически идентичны тем, которые в большей меню, мы просто изменили класс “large” на “small” и изменили значения, которые мы использовали, на меньшие. Мы используем отрицательные марджин-топ на изображение, чтобы централизовать его в контейнере, так как изображение имеет тонкую тень и выше, чем написание для его приспособления. Теперь у нас есть все необходимые стили, чтобы настроить меню размера изменения, и если вы попытаетесь изменить его в вашем , вы увидите в браузере, что меню станет меньше. Но нам нужно, чтоб оно было динамичным.
Изменение класса меню при помощи jQuery
При всех наших стилях на местах, нам просто нужно добавить немного JavaScript, чтобы переключатся между классами «large» и «small». Так как мы хотим изменить это на основе прокрутки пользователем, мы будем использовать.ScrollTop () функцию в jQuery. Эта функция позволит нам получить или установить позицию прокрутки в пикселях. Положение прокрутки является количеством пикселей, которые уже были прокручены в окне браузера. В этом случае мы просто должны знать сколько пикселей пользователь прокрутил, чтобы мы могли вызвать наш код и переключиться между классами:
$(document).on("scroll",function(){
if($(document).scrollTop()>100){
$("header").removeClass("large").addClass("small");
} else{
$("header").removeClass("small").addClass("large");
}
});
Если пользователь прокрутил более 100 пикселей, то тогда будет удален класс «large», который мы создали, и добавлен наш новый класс «small». Таким образом, меню будет изменяться в размере, как мы ранее определили в CSS. Попробуйте, к этому времени оно должно уже работать, но вы могли заметить, что переходы между классами, кажутся очень резкими.
CSS переходы для анимации меню
Для того, чтобы гладко переключаться между классами в нашем меню, мы будем использовать CSS переходы. Просто используйте этот кусок кода рядом с остальной частью вашего CSS.
Header,nav, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}
Здесь мы определили переходы для всех свойств CSS для , ![]()
и
элементов, в основном все элементы, которые мы меняем. Этот код будет анимировать изменения между обоими классами с переходами CSS в течение 1 секунды. Проверьте сейчас, результат должен быть очень плавным.
Первым делом следует уточнить, что официально такого термина нет. Вообще же под динамическим меню можно понимать такое меню, содержание которого меняется во время работы пользователя в зависимости от каких-либо внешних обстоятельств.
В данном случае речь идет о предмете, хоть и попадающим под эту расплывчатую формулировку, но более простом и прозаичном. Если меню, как таковому, свойственна динамика (вспомним, что инсталляция программы приводит к изменениям в нем) и имеется даже особо изменчивое меню "Документы", придуманное Microsoft, то я предлагаю поговорить о том, как организовать меню, содержащее именно ваши данные и изменяемое вами в процессе работы.
Выпустив Windows 95, компания Microsoft предприняла попытку перенести акцент с системно-программистских вещиц вроде "файлов" на понятные любому деловому человеку "документы". Для этого была усилена взаимосвязь между типами файлов и настойчиво предложено открывать их двойным щелчком мышки непосредственно по значку документа, а не из запущенного предварительно приложения. Что же, это не новинка и, в принципе, вещь более удобная, чем лазание по дискам в окне "Открыть".
Как приманку компания поставила в меню пункт "Документы", призванный обеспечить ускоренный доступ к последним из открывавшихся файлов. Критике это нововведение уже подвергалось, напомню лишь основные претензии: плохо справляется система с выставлением в меню именно открывавшихся последними документов, меню замусорено, документы не упорядочены и их нельзя структурировать тематически, наконец, они просто не все представлены.
Я раз десять пробовал модернизировать меню "Документы", но особо путного ничего не получилось. Могу предложить другой вариант. Представьте себе, что в системном меню на первом его уровне имеется один или несколько пунктов, открывающих доступ к системе подменю, соответствующей принятому вами разбиению документов на группы (по теме, времени, типу и т.п.), причем в подменю содержатся все находящиеся в вашем распоряжении файлы документов, их состав обновляется по мере создания или удаления, они переводятся из одного меню в другое, автоматически следуя за перемещениями файлов на диске.
Нормальный вариант быстрого доступа, просмотра и поиска документов? Тогда учтите, что реализуется такое динамическое меню проще простого. Надо лишь поместить в соответствующую главному меню директорию на диске ваши рабочие директории. Именно директории с живыми файлами, а не ярлыки. Сделайте это, и вы сразу получите доступ через меню к каждому из хранящихся там документов.
Но чтобы все выглядело тик-так, придется еще повозиться. Надо использовать длинные имена, тогда ваше пользовательское меню с документами получит человеческий вид. Это потребует от вас отказаться от милых сердцу DOS"овских каракатиц наподобие Docs, Doc1 и т.п. Ничего, надо привыкать называть вещи своими именами и забыть про восьмибуквенные подпольные клички.
Над именами придется подумать. Как я уже говорил, количество вложенных директорий не должно превышать 3, ну максимум 4 уровней. Их названия не следует делать слишком пространными, как и имена содержащихся в них документов. Иначе ваше меню будет гулять по экрану сначала слева направо, потом загибаться обратно и снова вперед. Замучаетесь гонять мышку. Избегайте дублирования слов. Если директория и, соответственно, подменю называются "Договоры", то не надо входящие в него документы называть "Договор №139-45 от...". Совершенно очевидно, что это договор, раз он лежит в папке с договорами. Старайтесь также с помощью нескольких слов, отведенных судьбой (или шириной экрана, если вам так больше нравится) на описание документа, отразить его содержание. Номер и дата - сведения прекрасные, но навряд ли вы с ходу вспомните, о чем был этот документ.
Ценой дополнительных усилий можно добиться согласования внутри цепочки, образуемой названиями подменю и конечного документа, падежей, спряжений и прочей нечисти. Глазу приятнее и менее утомительно для вас читать на экране прилично построенные фразы, а не общаться с компьютером на ломаном русском, как с представителем иностранного юридического лица. Например, если документ описывается выражением "Договор за 1996 год об аренде склада на ж.д. станции", то можно составить следующую цепочку меню: "Договор" - "за 1996 год" - "об аренде" - "склада на ж.д. станции". Быть может, кого-то покоробит название файла "склада на ж.д. станции", но с учетом выстраивающейся перед ним цепочки из названий директорий все получается правильно.
У организованного таким способом динамического пользовательского меню есть и недостатки. Во-первых, система не всегда обновляет меню сразу после попадания туда нового файла (удаления имеющегося). Видимо, где-то в лабиринтах многопоточности и многозадачности застревает команда о необходимости освежить меню. Немного неприятно, но случается не так уж часто, а после загрузки машины меню уж точно будет соответствовать тому, что записано на диске. (Это не значит, что я призываю каждый раз в подобных случаях перегружать машину, обычно можно обойтись перечитыванием директории в "Проводнике" по клавише .) Во-вторых, нехорошо хранить свои рабочие файлы внутри директории Windows. Придется вытащить оттуда папку "Главное меню" и следить за ней, как положено беспокоиться о сохранности пользовательской информации - делать резервные копии, очищать от мусора и т.д. Третья неприятность носит психологический характер - первое время уж очень непривычно видеть свои рабочие директории не внутри корневого оглавления диска, а где-то в "Главном меню". Но это проходит - привыкаешь.
Скрытые элементы меню
Еще один способ упростить содержание меню и, следовательно, повысить эффективность его использования - спрятать его часть на время нормальной работы.
В меню Windows 95 полным-полно вещей, которыми при нормальной работе пользоваться не приходится. К ним относятся ярлыки от программ деинсталляции приложений, различные файлы Readme и прочая текстовая информация от производителей, программы регистрации и формы для отправки по электронной почте. Сюда же можно зачислить и утилиты служебного плана, которыми вы пользуетесь только тогда, когда софт начинает хныкать или вести себя подозрительно. Для выполнения ежедневных процедур компьютерной гигиены удобнее всего (и достаточно) прибегнуть к услугам утилиты автоматического выполнения System Agent из комплекта Plus, вместо того чтобы запускать сканирование диска и дефрагментацию вручную. А раз так, то и постоянно держать эти программы в меню нет резона.
Однако не стоит и удалять из меню все, что в данный момент показалось лишним. Например, многие приложения при деинсталляции обращаются как раз к ярлыку Uninstall в меню, а не к самой программе. Бог им судья, но если ярлык удалить, то потом не получится чикнуть обычным путем приложение. Существует к тому же простой и безболезненный способ упростить меню, ничего оттуда не выбрасывая.
В Windows 95, как и в DOS, есть понятие скрытых файлов и директорий. При обычной работе вы не видите их на экране, так как система не показывает те файлы и каталоги, у которых установлен флажок "Скрытый". Флажок этот взводится и сбрасывается в окне свойств файла. Чтобы увидеть такие объекты, надо в "Проводнике" зайти через меню в "Вид"/"Параметры" и включить режим "Отображать все файлы".
Попробуйте сделать так. Ничего не удаляя, соберите в системном меню такую структуру вложенных уровней и пунктов, которая устроит вас при повседневной работе. Всю остальную начинку сделайте скрытой, размечая как отдельные ярлыки и файлы, так и целые директории и устанавливая у них соответствующий атрибут. Делать это лучше в режиме отображения всех типов файлов. Закончив упражнения, переключите режим отображения на нормальный, при котором скрытые файлы не видны, и посмотрите на результаты своего труда.
Если меню стало проще и удобнее, значит вам удалось внести в интерфейс Windows 95 еще одну полезнейшую настройку. Когда же придется заняться ковырянием в системных неполадках (а такое, увы, случается нередко), просто включите в "Проводнике" отображение всех файлов и получите в свое распоряжение полный набор элементов меню.
В принципе, аналогичный подход можно использовать в отношении рабочего стола, содержимое которого связано с папкой C:\Windows\Рабочий стол. Однако для десктопа система хранит не только ярлыки, но и порядок их размещения (он сокрыт в недрах реестра конфигурации), поэтому при переключениях режима отображения у меня на машине система собирала значки в алфавитном порядке. Что меня, естественно, не устроило. Проблему создания нескольких раскладок рабочего стола можно решить, но лучше уже другим путем.
Возможности обустройства меню и рабочего стола в Windows 95 (в отличие от сегодняшней беседы) на описанном далеко не заканчиваются. Новые подходы к оптимизации рабочего места может найти любой пользователь, если выкроит время для экспериментов и попробует несколько нетрадиционно применить стандартные и общеизвестные системные средства из арсенала Microsoft.
Роман Соболенко
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам:
