Zh YandexMap PlacemarkGroupControl/ru

From Documentation
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Расположение списка групп горизонтально

В ряде случаев возникает желание при управлении метками через список групп расположить список групп горизонтально.


Открываем слайдер Groups

Для начала определим положение списка сверху, причем это будет div-верстка.

Для этого указываем для расположения списка групп Placemark Control значение Group-Map

Указываем для поля Group CSS, что будем использовать External стиль, т.е. стиль будем определять в своем шаблоне.

После чего внешний вид списка будет приблизительно таким


Далее идем в стили шаблона (template.css или другой используемый файл стилей).

Добавляем стили для ul и li тегов.

#YMapsMenu-external #zhym-menu-external li
{
  list-style-type: none;
  display: inline;
}

#YMapsMenu-external ul
{
margin-left: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}


Смотрим, что получилось


Далее попробуем немного 'оживить' внешний вид

Добавляем следующий код

#YMapsMenu-external a
{
padding: 3px;
background-color: #369;
border-bottom: 1px solid #fff;
display: inline;
}

#YMapsMenu-external a:link, #zhym-menu-external a:visited
{
color: #fff;
text-decoration: none;
}

#YMapsMenu-external #zhym-menu-external a.active {
background-color: #035;
color: #bbb;
                    }
#YMapsMenu-external a:hover
{
background-color: #036;
color: #eee;
}


Ну а теперь список групп вот такой


Language: English  • русский