Zh YandexMap PlacemarkGroupControl/ru: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
| Line 4: | Line 4: | ||
Открываем слайдер ''' | Открываем слайдер '''Groups''' | ||
Для начала определим положение списка сверху, причем это будет div-верстка. | Для начала определим положение списка сверху, причем это будет div-верстка. | ||
| Line 10: | Line 10: | ||
Для этого указываем для расположения списка групп '''Placemark Control''' значение '''Group-Map''' | Для этого указываем для расположения списка групп '''Placemark Control''' значение '''Group-Map''' | ||
Указываем для поля ''' | Указываем для поля '''Group CSS''', что будем использовать '''External''' стиль, т.е. стиль будем определять в своем шаблоне. | ||
После чего внешний вид списка будет приблизительно таким | После чего внешний вид списка будет приблизительно таким | ||
Latest revision as of 11:59, 10 October 2019
Расположение списка групп горизонтально
В ряде случаев возникает желание при управлении метками через список групп расположить список групп горизонтально.
Открываем слайдер 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 • русский |
|---|