Многоуровневое меню uCoz (видео-урок)

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

Для начала войдите в панель управления своим сайтом и на главной странице панели управления перейдите по ссылке «Конструктор меню»

Видео-урок Многоуровневое меню uCoz

Все остальные действия я записал в виде 1,5 минутного скринкаста и выложил на youtube.com.

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

Изменение внешнего вида меню через css

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

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

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

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

.uMenuRoot li a:hover {
  font-weight:bold;
  color:#c77a25;
  text-decoration:underline;
}

.uMenuItem li a{
  color:#000000;
  text-decoration:underline;
}

#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-menuvitem a{
  color:#c77a25;
}

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

Если добавление стилей никак не отразилось на внешнем виде меню почистите кэш браузера и обновите страницу. З.Ы. человек для которого я записывал этот скринкаст нашёл меня вконтакте, так что подписывайтесь на страницу сайта!

Рекомендую так же ознакомится:

• Видеоукурс по uCoz;
• Курсы по html и css;