Главная » 2012 » Январь » 16

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

Тэги: для начинающих, меню, UCOZ Категория: uCoz
16.01.2012
Комментариев: 0| Просмотров: 7267
uCoz: Многоуровневое меню (видеоурок) | showmehow.ru


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

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

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


Посмотреть видеоурок (откроется в отдельном окне) Рекомендую смотреть этот видеоурок в разрешении 720p и на полный экран.

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


Для изменения внешнего вида меню необходимо добавить следующие стили в ваш CSS файл сайта и изменить их согласно вашего дизайна.
Code

.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;
}


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


З.Ы. человек для которого я записывал этот скринкаст нашёл меня вконтакте, так что подписывайтесь на страницу сайта http://vkontakte.ru/showmehowru !


Предлагаю вам так же ознакомится: с моим бесплатным видео-курсом по uCoz


Оцените статью Комментариев: 0

При полном или частичном копировании материалов сайта, установка ссылки на сайт источник: http://www.showmehow.ru обязательна!