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

Итак, что же нам предоставляет uCoz для создания красивого меню? Зайдя в панель управления, и перейдя в подраздел "Конструктор меню" раздела "Дизайн" я обнаружил удобную возможность создавать иерархию меню при помощи простого перетягивания пунктов на нужное мне место (drag and drop). Создам новое меню.

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


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

.uMenuRoot{ 
margin:0px;
padding:0px;
}

Теперь мне нужно привести внешний вид пунктов главного меню в соответствие с придуманным мною стилем: каждый пункт вместе с указателем должен быть обрамлен в рамочку, между пунктами должно быть определенное расстояние, при наведении мышки на пункт должна происходить подмена картинки. Сделаю это, изменив стиль элементов li, которые вложены в класс uMenuRoot:

.uMenuRoot li { 
border: solid #666666 1px;
list-style:none;
margin: 1px 1px 1px 1px;
padding: 4px 3px 3px 23px;
height:15px;
font-family:Tahoma,Arial,Helvetica;
font-weight:bold;
color:#FFBC00;
background: url('/img/plus.gif') no-repeat 3px #EFEFEF;
}
.uMenuRoot li:hover {
border: solid #666666 1px;
list-style:none;
margin: 1px 1px 1px 1px;
padding: 4px 3px 3px 23px;
height:15px;
font-family:Tahoma,Arial,Helvetica;
font-weight:bold;
color:#FFBC00;
text-decoration:underline;
background: url('/img/minus.gif') no-repeat 3px #EFEFEF;
}

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

#uMenuDiv1 .xw-tl, #uMenuDiv1 .xw-bl { 
display: none;
}
#uMenuDiv1 .xw-ml, #uMenuDiv1 .xw-mr {
padding: 0;
}

Потом мне понадобилось изменить стиль слоя, в который вложены все элементы подраздела - я изменил цвет рамки и фона слоя.

#uMenuDiv1 .xw-mc { 
border: solid #FFFFFF 1px;
background: #EFEFEF;
}

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

#uMenuDiv1 .u-menuvitem { 
background: url('/img/point1.gif') no-repeat 3px #EFEFEF;
padding: 3px 3px 0px 23px;
color:#666666;
}
#uMenuDiv1 .u-menuitemhl{
background: url('/img/point1s.gif') no-repeat 3px #EFEFEF;
padding: 3px 3px 0px 23px;
color:#666666;
text-decoration:underline;
}

Итак, что же вышло?

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

    В тоже время, для создания меню при помощи конструктора меню uCoz мне пришлось потратить гораздо меньше времени - так как само создание меню берет на себя система, а мне остается только менять внешний вид на свой вкус и по своим потребностям.
    Новое меню в действии вы можете видеть на autoclub.ck.ua. На данный момент для потребностей моего сайта вариант, сделанный при помощи конструктора меню, отлично подходит.

    P.S. Стиль оформления кодов был мною подсмотрен у хорошего сервиса: U.Pastebin. Используя этот сервис вы можете значительное упростить себе работу с фрагментами исходного кода программ.

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

    74 комментариев
    1 2 3 »
    1 Написал DefKiNG 15 Июня 2009, 20:40
    Хм занятно, теперь изменение вида нового меню станет для меня проще, а то раньше забросил из-за путаницы в классах. Надо будет на тестовом сайте поэкспериментировать. Спасибо smile
    p.s. А возможно ли сделать так, чтобы список подменюшек появлялся с другой стороны?
    8 Написал Kron 16 Июня 2009, 14:41
    если не будет места то выведет его слева....

    при хороших знаниях в CSS из этого меню можно наделать всяких интересных и красивых, непохожих на другие менюхи.

    2 Написал mob_dp2 15 Июня 2009, 21:14
    А в опере меню кто проверять будет?

    http://img31.imageshack.us/img31/5733/screenshot144.jpg

    7 Написал Kron 16 Июня 2009, 14:40
    в моей опере 9,63 все корретно показывается.... каждая версия оперы это все новые и новые чудеса....
    9 Написал mob_dp2 16 Июня 2009, 16:00
    Уже и у меня все нормально.
    Оперы 9.64 / 10

    По поводу "новые чудеса" спорить не хочу, но лично я никаких координальных изменений еще с версии 9.24 не видел.

    10 Написал Kurt 16 Июня 2009, 16:47
    Андрей имеет ввиду чудеса с точки зрения багов по работе с валидным кодом, с css и яваскриптами. С точки зрения пользователя изменения в опере действительно не столь заметны.
    avatar
    43 Написал Director 23 Июля 2009, 23:55
    У меня "жалоба" поступила на Opera 9.27. Проверил на 9.64 - все нормально. Посоветовал обновить браузер.
    3 Написал [Кронд] 15 Июня 2009, 22:37
    Я привык сам писать =) Интересно, конечно, но руками - оно как-то надёжней, ИМХО =)
    avatar
    5 Написал bibimij1578 16 Июня 2009, 13:07
    Самому писать - это похвально, но иногда обстоятельства требуют использовать готовые решения, а не изобретение велосипеда. Вы же не будете писать свою систему БД, например, только потому, что есть уже готовые, а это не круто.
    avatar
    15 Написал chu4___x 19 Июня 2009, 23:24
    Изобрети велосипед - наберись опыта smile
    6 Написал Kron 16 Июня 2009, 14:36
    если уж заявляете подобное, то будьте честным перед самим собой... не используйте винду, все сторонние программы, и т.д. и т.п.... по вашим же словам "так надежнее".

    тот, кто делает подобные заявления, просто никогда ничего сложного не делал...

    11 Написал mob_dp2 16 Июня 2009, 17:46
    Понятие "сложного" - растяжимое, но наверное вы имеете ввиду выпадающее меню.
    Вы же не знаете, делал ли Кронд свое выпадающее меню, верно?
    12 Написал Styler 16 Июня 2009, 18:09
    Не совсем понял, кого вы имели ввиду.
    13 Написал Kron 16 Июня 2009, 18:15
    какой примитивизм... после того как мы создавали 4 года юкоз, вы считаете, что сложным было сделать именно выпадающее меню...

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

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

    65 Написал rznmed 10 Октября 2009, 20:45
    Вы безусловно правы. но хотелось бы больше настроек в меню. А то у меня часто выпадающие вправо пункты просто застывают и не убираются
    4 Написал evra 15 Июня 2009, 22:47
    Если можно, хотелось бы порекомендовать сайт http://www.leigeber.com/category/javascript/, на котором представлены практически все популярные скриптовые решения (кроме табов - их можно найти в англонете в изобилии), ультралегкой реализации (никаких дополнительных библиотке типа jquery равно как и потребности в них разбираться). Так, accordion обойдется всего в несколько килобайт. В рунете встречала некоторые переводы - нужно в поисковике набрать leigeber. Установка будет под силу немного продвинутому пользователю. А результат поражает своей эффективностью равно как и эффектностью.
    avatar
    14 Написал ilya1983 19 Июня 2009, 20:30
    ЛЮДИ если кто-то и блещит своими способностями, конечно хорошо, но как высказался Kron - примитивизм как раз и необходим именно тут потому-что люди читающие эту рубрику надеются на то что они смогут по детально научиться как в главе на пробу про доску объявлений, а то такое чувство собрались профи лишь бы поговорить. Конечно я уважаю автора, но хотелось бы детализации biggrin
    23 Написал Styler 22 Июня 2009, 12:55
    Да я вроде и код привел уже, который менял.
    Какой детализации - расписывать детально порядок нажатия на каждую кнопку в админке?
    avatar
    29 Написал Sborwik 28 Июня 2009, 00:35
    +1
    avatar
    16 Написал Serg7069 20 Июня 2009, 21:21
    как сделать вертикальное разворачивающееся меню с подменю? похожее как на левом скриншоте, но чтоб принажатии разворачивалось/сворачивалось
    avatar
    17 Написал chu4___x 20 Июня 2009, 23:42
    Ищите на woweb.ru... Если не найдёте, пишите мне в лс smile
    avatar
    18 Написал chu4___x 21 Июня 2009, 00:29
    Простое меню написал, стили и всё остальное сами перепишите.
    http://pastebin.ucoz.com/publ/1-1-0-454
    avatar
    19 Написал chu4___x 21 Июня 2009, 01:11
    Битая ссылка, вот новая: http://pastebin.ucoz.com/publ/1-1-0-456
    22 Написал Styler 22 Июня 2009, 12:54
    Почитайте предыдущую статью - я там описывал это.
    20 Написал magnum 22 Июня 2009, 08:25
    подскажите как сделать двойное выпадающее меню напрмиер:
    "Каталог" - "АЗС" - а здесь еще меню
    21 Написал Styler 22 Июня 2009, 12:53
    Повнимательнее присмотритесь к конструктору меню.
    Это сделать крайне просто - нужно просто добавить новый пункт меню и перетащить его в нужное вам место.
    avatar
    24 Написал IncognitoSS 23 Июня 2009, 23:59
    Пожалуйста обьясните новичку help в этом деле(создание сайта), я создал свой сайт, начал его наполнять контентом, и вродебы всё неплохо, даже начали появляться посетители, за 4 дня 57 посетителей, знаю мало, но это только начало biggrin Значит проблемка вот в чём:
    Вот меню моего сайта

    Меню сайта
    Главная
    Каталог статей
    Каталог файлов
    Форум и т.д.(это так, образно)
    Помогите! Как мне сюда добавить пункт, например, фильмы, музыка.
    Вобщем как создать ещё несколько пунктов меню не зависящих друг от друга, чтоб это небыли категории, а именно пункты меню. За ранее благодарю

    avatar
    25 Написал Chip4528 24 Июня 2009, 15:08
    Я создал сайт, и хочу изменить изображение в верхнем левом углу, в дизайне №431. Скажите пожалуйста, как мне это сделать?
    avatar
    26 Написал chu4___x 25 Июня 2009, 04:39
    Включить мозг, пойти на htmlbook.ru, посмотреть нужную информацию и приступать к работе smile
    33 Написал Kron 04 Июля 2009, 15:00
    "Включить мозг"... у меня последователи есть biggrin
    avatar
    27 Написал krasnjak 27 Июня 2009, 09:08
    Большое Вам спасибо! Благодаря Вам, у меня получилось сделать иерархическое меню. Это, оказывается, так просто.
    avatar
    28 Написал Sborwik 28 Июня 2009, 00:32
    С интересом прочитал все статьи! Но на практике ничего не выходит! Описано все сжато. Я в системе новичок, СSS не изучал, складывается такое ощущение что написано все для профи и для поднятия рейтинга будущего сайта autoclub.ck.ua. А так все хорошо начиналось!
    Ладно сеть большая буду искать! dry
    31 Написал DefKiNG 30 Июня 2009, 17:01
    Что вам еще надо? В статьях итак описано все ясно и понятно, просто нужно самостоятельно учить css и html (благо есть интернет), и не жаловаться в коментариях из-за того что вы учится не хотите и ничего не получается
    30 Написал magnum 28 Июня 2009, 19:10
    админы, Вы в курсе что эта меню не отображается в осле 8???
    32 Написал Kron 04 Июля 2009, 14:58
    юзер, а Вы в курсе что нужно яваскрипт в браузере включать?
    34 Написал Gorec 10 Июля 2009, 00:15
    И все равно в IE проблема не решена. Яваскрипт у меня в браузере включен, никаких сторонних скриптов на сайте нет...
    Меню в IE выглядит обрезанным...
    39 Написал Styler 13 Июля 2009, 12:55
    Скриншот приведите пожалуйста и версию ИЕ.
    35 Написал mannn 11 Июля 2009, 07:18
    Меню бесподобное, спасибо! Но у меня появилась одна проблема. Сделал второе меню по этой схеме, но у меня вылазит стандартный юкозовский бэкграунд для подменю: http://s34.ucoz.net/.s/img/wd/1/left-right.png , хотя я прописал свой и в первом меню он отображается корректно. Как с этим бороться? "Мозг включал", но это не помогло... smile
    avatar
    36 Написал EA-games 11 Июля 2009, 09:47
    а где конструктор дизайна находиться? wacko angry
    37 Написал mannn 11 Июля 2009, 09:59
    biggrin biggrin biggrin
    avatar
    38 Написал DeWALT1436 11 Июля 2009, 18:57
    а можно ли поменять раскладку меню с вертикально на горизонтально , если да то подскажите плиз ))
    avatar
    40 Написал rigondinja 13 Июля 2009, 23:42
    mnje vapros, ja iz germanji i mnje s ruskom ne tak uzh otljichno, ja djelaju svaju web page, no mnje nenado formu registraciji i log in kak ja magu ih snjatj? ja chitala po njemecki, po angljiski i po ruski, no mnje njipaluchilos, ja izpolzuju primer #823
    ja mogu dobavitj i snjat na ljevom storonje etu log in formu no kak ja mogu snjatj verhnjim pravom ugle eti formi registracija i log in? ja hotjela sdjelat kak info page i vse.
    spasibo vam agromnoje.
    41 Написал mannn 14 Июля 2009, 15:17
    You should take off the block named "login form" in your constructor smile
    avatar
    44 Написал rigondinja 28 Июля 2009, 03:03
    yeah i know, i take off tis block. but i wanaa switch off registration form...like a web page free gor everyone...without registracion, but plz tell me step by step how, cuz i can't descry this.
    avatar
    45 Написал Humbug 01 Августа 2009, 01:56
    /panel/?a=users;l=setup
    find there "methods of authorization" and switch them off.

    /panel/?a=users;l=groups;t=2;id=999
    let guests do everything. it`s a page free for everyone, isn`t it? biggrin

    42 Написал magnum 22 Июля 2009, 20:12
    Kron, не можешь отладить для осла, а еще админ называется...
    46 Написал cbetji0ta 01 Августа 2009, 22:05
    Сделал всё по образцу, но почему-то не отображаеться стрелка
    /point1s.gif
    пробовал закачать ее под другим именем, все-равно не отображаеться.

    Сайт вот: http://print-master.su/
    Файл http://print-master.su/img/point1s.gif есть, открывается. Помогите, в чем проблема?

    Code

    /* Site Menus */

    .uMenuRoot{  
      margin:0px;  
      padding:0px;  
      }

    .uMenuRoot li {  
      border: solid #666666 1px;  
      list-style:none;  
      margin: 1px 1px 1px 1px;  
      padding: 4px 3px 3px 23px;  
      height:15px;  
      font-family:Tahoma,Arial,Helvetica;  
      font-weight:bold;  
      color:#000000;  
      background: url('/img/plus.gif') no-repeat 3px #FFBC00; /* Фон меню */
      }
      .uMenuRoot li:hover {  
      border: solid #666666 1px;  
      list-style:none;  
      margin: 1px 1px 1px 1px;  
      padding: 4px 3px 3px 23px;  
      height:15px;  
      font-family:Tahoma,Arial,Helvetica;  
      font-weight:bold;  
      color:#FFBC00;  
      text-decoration:underline;  
      background: url('/img/minus.gif') no-repeat 3px #EFEFEF;  
      }

    #uMenuDiv1 .xw-tl, #uMenuDiv1 .xw-bl {  
      display: none;  
      }  
      #uMenuDiv1 .xw-ml, #uMenuDiv1 .xw-mr {  
      padding: 0;  
      }

    #uMenuDiv1 .xw-mc {  
      border: solid #FFFFFF 1px;  
      background: #EFEFEF;  
      }

    #uMenuDiv1 .u-menuvitem {  
      background: url('/img/point1.gif') no-repeat 3px #EFEFEF;  
      padding: 3px 3px 0px 23px;  
      color:#666666;  
      }  
      #uMenuDiv1 .u-menuitemhl {  
      background: url('/img/point1s.gif') no-repeat 3px #EFEFEF;  
      padding: 3px 3px 0px 23px;  
      color:#666666;  
      background:#FFBC00;
      text-decoration:underline;  
      }
    avatar
    47 Написал kot7023 02 Августа 2009, 17:00
    УВАЖАЕМЫЕ КОЛЛЕГИ ПРОБЛЕММА С IE 6 ОСТАЕТСЯ ОТКРЫТОЙ. МЕНЮ СРЕЗАЕТСЯ ПО НАИМЕНЬШЕМУ ПОДПУНКТУ ВЛОЖЕННОЙ ИНФОРМАЦИИ. ТАК КАК 80% НАСЕЛЕНИЯ РАБОТАЕТ В IE 6. ПРИВЕДЕННАЯ ВЫШЕ МЕТОДИКА ВИЗУАЛЬНО ПРАВИЛЬНО НЕ ОТОБРАЖАЕТСЯ. БЕРИТЕ ЛЮБУЮ ВЕРСИЮ IE 6 C XP SP3.
    НАПИШИТЕ КАК УСТРАНИТЬ ЭТОТ БАГ И ДАННАЯ МЕТОДИКА БУДЕТ НОВЫМ ТОЛЧКОМ РАЗВИТИЯ UCOZ. НЕ ИГНОРИРУЙТЕ ПОДДЕРЖИВАЮ : 34 Gorec (10.07.2009 00:15)
    И все равно в IE проблема не решена. Яваскрипт у меня в браузере включен, никаких сторонних скриптов на сайте нет...
    Меню в IE выглядит обрезанным...

    ВОЗЬМИТЕ СТАРЫЙ IE 6 И ИСПРАВЬТЕ БАГ WINDOWS ДАЙТЕ ЛЕКАРСТВО.
    INFO@UAU.COM.UA help help help wacko

    63 Написал rznmed 10 Октября 2009, 20:40
    ие 8 включен в критические обновления. проблемма не актуальна
    48 Написал Cahes 07 Августа 2009, 18:59
    Здравствуйте, хорошая статья, только у меня одна проблема, я хочу поменять всплывающее меню, но никак не могу найти у себя в таблице стилей этот код "#uMenuDiv1", пользуюсь стилем # 844. Буду очень благодарен за помощь.
    1-20 21-40 41-42
    Ваш комментарий