Меню для сайта и традиционный разбор ошибок при создании проекта с нуля
Наш следующий этап начнем, как и было обещано, с работы над ошибками.
Ошибка №1 на которую мне указали - отсутствие проверок сайта в браузере Opera. Лично я не очень люблю этот браузер, но справедливости ради замечу, что он занимает довольно значительную нишу среди общего количества пользователей сети Интернет. Например, по статистике украинского портала Bigmir.net, распределение пользователей по используемому браузеру за последний месяц выглядит так:

Вполне вероятно, что на других системах статистики эти данные будут отличаться, но общий порядок ясен, Opera использует значительное количество людей. Поэтому - устанавливаю ее себе в качестве еще одного браузера для проверки. Смотрим то что уже сделано - выглядит нормально.

Ошибка №2 - на сайте не использовался доступ по uID. Так как преимущества uID бесспорны: сайт смогут посещать все пользователи, которые регистрировались на любых других сайтах uCoz - добавлю поддержку uID на свой сайт. В перспективе это принесет не только удобство для пользователей, но и дополнительный трафик - а это сейчас очень важно. Через панель управления включаем поддержку uID - для этого переходим в модуль "Пользователи" » Настройки модуля и включаем в опции
"Разрешенные методы авторизации пользователей" первый параметр - "uNet пользователи (uID)". На сайте сразу же появляется значок , и при регистрации появляется выбор - регистрировать uCoz ID или осуществить локальную регистрацию на сайте. Проводим пробную регистрацию - все получается отлично. Также хотелось бы сразу исправить еще одну ошибку, допущенную на прошлом этапе: ошибка №3 - после регистрации показывается сообщение "Для авторизации на сайте воспользуйтесь формой в правой колонке", но формы на месте нет. Подумав, я решил вообще убрать это сообщение, и сделать автоматический переход с этой страницы на главную страницу сайта. Таким образом, пользователь сразу после регистрации будет попадать на главную страницу сайта, на которой будет сосредоточено максимум всего интересного smile Исправляю шаблон "Страница входа пользователей", меняю текст сообщения и добавляю простой javascript переадресации пользователя.

Code
location.href = "$HOME_PAGE_LINK$";

Проверяем во всех браузерах - работает.

Ошибки исправлены - переходим к следующему шагу. Сегодня я хотел сделать меню сайта. Но, для начала, хотелось бы определится, что изначально вообще будет на сайте - так как от этого напрямую зависит, что будет в меню. Итак - изначально я хотел чтобы на сайте были новости. Думаю вполне целесообразно будет разделить их на три категории - автоновости региона, страны и мировые. При таком разделении пользователь сможет просматривать ту категорию что ему интересна, или смотреть новости всех категорий сразу на главной странице. Сделаем глобальный пункт "Новости" с тремя подпунктами:

Code
Автоновости  
--- по региону  
--- по Украине  
--- мировые  

Следующим - и основным пунктом меню будет каталог фирм и организаций. Он должен быть достаточно широко структурирован, чтобы облегчить доступ к информации для пользователей. Я буду стараться придерживаться одного из основных правил юзабилити - "Правила трех кликов". Его суть состоит в том, что пользователь не будет в восторге от использования сайта, если он не может найти необходимую ему информацию за три клика мышкой. Поэтому - меню должно быть организовано максимально просто и понятно. Для каталога изначально примем такую структуру:

Code
Каталог
--- АЗС
--- Автосалоны
--- Автомагазины
--- Авторынки
--- Автошколы
--- Грузоперевозки
--- Органы власти
--- Разборки машин
--- Развал/схождение
--- Сервисные центры
--- СТО
--- Стоянки
--- Страховые компании
--- Мойки
--- Шиномонтажи
--- Услуги эвакуатора

Эта структура в будущем будет уточнятся и дополнятся.

Последнее, что должно быть в меню - это доска объявлений. Ее тоже нужно разбить на категории - для удобства размещения и поиска объявлений.
Начнем с небольшого количества:

Code
Доска объявлений
--- Продам авто
--- Куплю авто
--- Продам запчасти
--- Куплю запчасти

Так как объявления у нас частные - этого должно хватить на первое время.
Итак структура ясна - переходим к реализации. Так как пунктов меню получилось довольно много - отображать на экране их все одновременно будет неразумно. У человека, зашедшего на сайт будут просто разбегаться глаза от обилия выбора. Поэтому - сделаю меню раздвижным - по принципу жалюзи. Пользователь сможет открыть только нужные ему разделы и получить список категорий в них. Остальные разделы будут свернуты.

В реализации такого меню мне сильно поможет широко известный javascript-фреймворк jQuery. Так как он уже внедрен в uCoz - мне нет необходимости подключать его отдельно. Редактирую глобальный блок AAMENU и размещаю там будущее меню. Оно организовано в виде вложенных списков - то есть разделы - это список (ul), в качестве элементов(li) которого используются другие списки. Такая организация позволяет удобно работать с каждым пунктом и понятно структурировать их.
Для того, чтобы обозначать развернутые и свернутые разделы я нарисовал небольшие иконки, которые обозначают соответственно минус и плюс. Подмена этих картинок при нажатии на заголовок раздела производится также при помощи jQuery.
То, что в итоге получилось вы можете видеть на сайте http://autoclub.ck.ua

Скрипт, реализующий такой эффект для меню довольно прост:

Code
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).find("img").attr("src", "/img/plus.gif");
checkElement.slideUp('normal');

return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$(this).find("img").attr("src", "/img/minus.gif");
checkElement.slideDown('normal');

return false;
}}
);
}
$(document).ready(function() {initMenu();});
</script>

Разберем его работу. Запуск скрипта происходит автоматически, как только происходит полная загрузка страницы. При запуске автоматически разворачивается первый раздел - "Каталог". Таким образом я упрощаю доступ к основной информации сайта - каталогу фирм и организаций. Дальнейший код работает по такому принципу - нажатие на ссылку, которая является дочерней для элемента списка (li) вызывает функцию, в которой проверяется - если следующий за активным(ссылкой) элемент является списком, и он видим - то сворачиваем его и меняем иконку этой категории на "минус" - свернуто. Если элемент является списком и он НЕ видим - то разворачиваем его и устанавливаем иконку этой категории - развернуто ("плюс"). Проверка в разных браузерах показала следующее:
- Firefox и Google Chrome: все работает и выглядит именно так как и задумано
- IE: есть непонятная проблема с "морганием" подменю при сворачивании категории.
- Opera: нужно увеличить отступы между категориями раздела - так как они сливаются.

Подведем небольшой итог.
Благодаря уже внедренному в систему uCoz фреймворку jQuery удалось сделать простое и удобное меню для сайта, которое не перегружает пользователя излишней информацией, и в то же время достаточно хорошо структурировано. В будущем, конечно, это меню будет меняться и совершенствоваться - но для старта проекта - его достаточно. При создании меню мне пришлось впервые столкнуться с различиями в работе браузеров, и в следующей работе над ошибками нужно будет исправить найденные проблемы.

На следующем этапе я планирую доделать навигацию по сайту и приступить к настройке модуля новостей.

Эта статья входит в цикл статей блога "Делаем проект с нуля".
Ознакомиться с полным циклом можно по ссылке.

44 комментариев
1 2 »
1 Написал [Steelz] 02 Июня 2009, 00:58
Всё по делу, однако напрягает такое большое количество "Опер". Мне казалось, что их меньше и моя любимая лиса - бесспорный лидер... dry
11 Написал Kron 02 Июня 2009, 20:34
она и есть лидер в мировой статистике (по сравнению с оперой), но по рунету опера его обходит...

опера неплохой браузер, но по количеству багов и своих фишек, которые не позволяют делать те вещи, которые в других браузерах сделать можно опера уступает фоксу...

в любом случае, хуже всего адаптирован для современных приложений IE...

15 Написал mob_dp2 04 Июня 2009, 23:54
Откуда такая информация?

Я натыкался на статью, где писали, что кол-во багов ФФ3 в разы превосходит ИЕ.

Сам ФФ не пользуюсь (кстати ФФ поломался, половину картинок не показывает - вот вам и первый баг), поэтому точно сравнить браузеры не могу.

Покажите хотя бы пару багов в опере, я их никогда не видел.

23 Написал Kron 16 Июня 2009, 23:41
пора бы прекратить устраивать тут детский сад... если вы не разрабатываете сложные яваскрипт приложения вы не можете знать про тонкости разных браузеров и про их баги... одно дело как пользователь видеть какие-то браузерные недочеты, а другое дело как разработчик....

Кстати, очень часто статьи пишут люди далекие от профессионалов, особенно заявления про то что багов В РАЗЫ больше, сразу уводить данную статью в сторону противоположную адекватности.

Так как мы занимаемся разработкой сложных программных продуктов, которые очень сильно завязаны на качестве реализации других программных продуктов (браузеров), мы очень часто сталкиваемся с разными проблемами и могу вас заверить на личном опыте опера ну никак не блещет качеством в отношении веб-разработчиков. То количество новых версий оперы очень неплохо демонстрирует сколько багов они исправляют. Пару месяцев назад, когда они выпустили свой звучный релиз, через неделю они выпустили следующую версию, потому что баг, который они влепили привел к глюкам на огромном кол. сайтов...

avatar
33 Написал Beholder 11 Июля 2009, 16:32
Пользуюсь Opera (9.64) и FF (3).
В Opera глюки наблюдались и не раз. Например последний: после ввода пароля страница на сайте, сделанном на uCoz тупо обновляется, логина не происходит. Пришлось сносить весь кэш браузера, что не есть удобно.
В FF пока ничего криминального не видел, может, потому что реже пользуюсь. Не отрицаю, что баги есть (должны быть), но в "разы больше", чем в IE?!! Не нахожу... ЧЯДНТ? wink
avatar
2 Написал АлексUNDER 02 Июня 2009, 01:21
Чел, да ты гониш!
Опера рулит - полюбаса! tongue всё остальное полный шлак и отбросы bag
например по статистике на своём сайте могу сказать, что с оперы гораздо больше посещений нежели с фаирфокса.
про эксплорер вообще молчу. dry
avatar
4 Написал bibimij1578 02 Июня 2009, 11:05
Давайте не будем разводить пустых споров "Firefox vs Opera", так же как и говорить, что Intel круче AMD. Каждый выбирает то, что ему нравится. Всё познаётся в сравнении.

Добавлю, что на мировом рынке браузеров IE занимает лидирующее место, так как он по умолчанию стоит в windows системах. На втором месте Firefox. Я люблю Firefox, но начиная с версии 3 он стал жутко тормозить, но я не могу жить без его плагинов (firebug - находка для web-разработчика) и чёткого следования стандартам.
У Opera часто выходят новые билды. В этом один плюс и один минус: + пользователю нравится, что он пользуется программой, которая постоянно обновляется, а значит разработчики любят свой проект; - такое количество билдов невольно наводит на мысль, что багов в софте немеренно и разработчикам постоянно приходится их исправлять, невольно добавляя новые.
Safari как IE: только лазанье по интернету, больше ничего. Скорость работы приемлемая.
Chrome. Сейчас пользуюсь только им для сёрфинга в интернете. Быстро, просто и ничего лишнего. Однако я заметил, что есть несовместимость с Silverlight веб-приложениями, а так - всё хорошо.

9 Написал mob_dp2 02 Июня 2009, 18:55
так как он по умолчанию стоит в windows системах

скоро не будет, опера подала в суд на майкрософт и заставила внедрять в виндовс и другие браузеры.

firebug не нужен, т.к. есть opera draginfly

avatar
32 Написал Beholder 11 Июля 2009, 16:17
так как он по умолчанию стоит в windows системах

скоро не будет, опера подала в суд на майкрософт и заставила внедрять в виндовс и другие браузеры.
Пруфлинк в студию. dry

Мнение: никто не будет "внедрять в виндовс и другие браузеры". M$ оно надо?.. Вот IE могут выпилить - это да, только сильно, я думаю, ничего не изменится, просто при установке очередной Windows IE будет предложено скачать с micro$oft.com. Или вообще втихаря скачается. biggrin

avatar
3 Написал WebAdemon 02 Июня 2009, 09:06
Еще одна не совсем удобная особенность - в браузере Mozilla FireFox сайт раздвигается влево и вправо буквально на 5-10 px. В других браузерах не пробовал. Может, стоит поправить?
5 Написал Хиcп 02 Июня 2009, 13:21
В Firefox на расширении экрана 1024х768 при открытии раздела "Объявления" в группе "гость" расширяется страница на 20-15px.
6 Написал Хиcп 02 Июня 2009, 13:23
А. и еще - после авторизации, через uNet профиль в блоке "ваш аккаунт" аватар не изменяется. То есть у меня стандартный аватар, как на этом блоге "Хисп" в том блоке выскакивает картинка дорожного знака.
avatar
7 Написал Кросавчег 02 Июня 2009, 17:41
Втопку FireFox , Слава Опере biggrin
avatar
8 Написал divxl 02 Июня 2009, 17:59
Интерестные статьи. Спасибо!
10 Написал mob_dp2 02 Июня 2009, 18:56
Quote
location.href = "$HOME_PAGE_LINK$";

у меня большой вопрос: почему выбран именно такой вариант?

во первых вместо страшных капсерных букв можно поставить просто /, а во вторых я бы все-таки использовал мета тег рефреш для перехода.

avatar
14 Написал LordOfPariahs 04 Июня 2009, 15:08
ИМХО, и такой, и другой способ переадресации нужно использовать.
22 Написал Kron 16 Июня 2009, 23:29
ничего принципиального вы не сказали... ничего эффективного не добавили...
avatar
12 Написал DonS@n4eZ 03 Июня 2009, 22:37
А кто может помочь сделать такое меню, у меня не выходит.
Просил друзей сделать во Flash, его никто не знает angry
avatar
13 Написал Perspect 04 Июня 2009, 01:36
А нельзя-ли подробней рассказать о раздвижном меню, как его установить?
Есть несколько версий, но этот вариант мне больше нравится cool
16 Написал diyakov-vlad 06 Июня 2009, 18:56
Это всё, конечно, здорово и замечательно.
Но есть одно большое "НО"...
Честно признаюсь, позарился я на биржи ссылок.
Зарегился там, решил перетащить на мой сайт diyakov-vlad.ucoz.ru на Юкозе удалённый код.
Мои дальнейшие действия были такими:
Зашёл в "Дизайн->Конструктор шаблонов".
Нажимал "Каркасы стандартных дизайнов" и увидел
"Каркасы стандартных дизайнов". Нашёл номер дизайна в таблице и кликнул на него.
Прокрутил редактор в самый низ.
Нашёл </body> , выше его вставил $DCODE_2$
Сохранил всё и перезагрузил сайт.
И вылетел весь дизайн.
Помогите пожалуйста, восстановите сайт!
Служба поддержки только отписывается ссылками на форумные темы, где лишь один трёп, а не как не решение проблем.
Я уже всё перепробовал для восстановления.
Видно это баг в шаблонах дизайнов сайта.
Я зарекаюсь от таких необдуманных действий и других буду от этого отговаривать!
21 Написал Kron 16 Июня 2009, 23:25
восстанавливайте дизайн (общие настойки) и предварительно думайте головой... для того чтобы вставить этот код на все страницы сайта не нужно было использовать конструктор шаблонов, нужно было просто зайти в шаблон (глобальный блок) Нижняя часть сайта и вставить этот код...
avatar
17 Написал mrSpam 10 Июня 2009, 16:56
А если надо что бы к примеру что бы не только первый оставался развёрнутый при открытии страницы, а ещё и 6, 7 к примеру??? как это реализовать в этом скрипте?
20 Написал Kron 16 Июня 2009, 23:23
если надо, то ищите информацию в интернете, в данной статье показывается просто пример простого раскрывающегося меню... это не повод терроризировать автора, чтобы он на пальцах объяснял как делать более сложные меню.

Используйте конструктор меню - это куда удобнее и меню получается во много раз лучше...

avatar
24 Написал mrSpam 17 Июня 2009, 12:44
Просто долго искал это меню.. и вот нашёл.. опишите как оно работает пожалуйста=)))
18 Написал Radioman 15 Июня 2009, 16:24
Для понимания создания роздвижного меню хотелось бы увидеть исходный код глобального блока AAMENU, а также листинг главной страницы сайта.
19 Написал Kron 16 Июня 2009, 23:22
читайте следующую статью этого цикла... данное меню вообще не нужно использовать, это просто пример того, что можно делать меню "по-старинке", а НУЖНО их делать "по-новому".
25 Написал maxun 17 Июня 2009, 14:11
Кто подскажет как название сайта редактировать? Меня в управлении, а при входе на сайт ничего не меняется...уже 3-м-ца мучаюсь..раньше вроде свободно редактировалось.
26 Написал Kron 17 Июня 2009, 14:52
в общих настройках...
avatar
28 Написал Stone33 22 Июня 2009, 09:18
Как написать название сайта на главной страничке? У меня написано "Мой сайт"... как изменить эту запись? В общих настройках всё как положено, а на страничке cry Подскажите пожалуйста surprised HELP
avatar
29 Написал Stone33 22 Июня 2009, 09:37
Ой, извините happy уже нашла biggrin Но всё равно - СПАСИБО!
27 Написал seregawaw 19 Июня 2009, 20:10
По поводу uID, вещь хорошая но меня задолбали, постоянный налет ботов, от 50 акаунтов создают, и спамят на форуме,( если нет капчи) у всех ихних учетных записях. один IP, который периодически меняется,
Так что uID пришлось отключить.
avatar
30 Написал dingo 22 Июня 2009, 14:28
Столкнулся с той же проблемой. При включении uID на сайт за день может ботов 10 налететь, поэтому стандартная регистрация остаётся единственным барьером для ботов.
avatar
31 Написал Gozya 08 Июля 2009, 10:11
даа... uID это зло, одни боты с него заходят devil
avatar
34 Написал Director 23 Июля 2009, 23:45
Ко мне тоже пришла "жалоба" из Германии. В Opera 9.27 пишет, что дизайн "поехал". Я проверил на версии 9.64 - все нормально. Может, "гонит"?
avatar
35 Написал bazyo 22 Сентября 2009, 11:19
Раз уж МЕНЮ открывается сразу. Почему бы не дать каждому пользователю самому определять где оно доложно открываться? Как вариант - последний посещённый раздел.
avatar
36 Написал Аркадос 05 Ноября 2009, 17:51
Не могу понять как это меню блин сделать мучаюсь неделю уже((( Не могу устал(((( Подскажите плиз. по нармальному а не пофигистки
avatar
37 Написал Аркадос 05 Ноября 2009, 17:52
то есть хочу добавить к меню вот сайт там по лп объясните если Вам не жалко времени((( http://arkados.do.am/
1-20 21-26
Ваш комментарий