Страница 23 из 48
Внешний вид меню
Добавлено: Чт авг 20, 2015 10:54 am
foxvlad
Мое оформление "menu". Верхний зеленый блок закреплен и остается все время, даже при прокрутке.
Переключатели с подписями в один ряд и выровнены по правому краю.
Разделы комнат, для лучшей визуализации и выделения, размещены в два столбика.
http://www.youtube.com/watch?v=D6Q96VC_zmw
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 11:16 am
skysilver
Занятно. Хотелось бы увидеть подробности реализации и пакет иконок в архиве.
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 1:29 pm
foxvlad
skysilver писал(а):Занятно. Хотелось бы увидеть подробности реализации и пакет иконок в архиве.
Пакет иконок, сейчас выложу, а по поводу реализации там, очень много зависит от проекта, так как все через стили.
И во многих вещах приходиться прописывать по именным стилям к каждой графе меню.
Если найдутся, кто захочет заморачиватся и будет интересно, могу попробовать описать.
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 1:32 pm
foxvlad
foxvlad писал(а):Мое оформление "menu". Верхний зеленый блок закреплен и остается все время, даже при прокрутке.
Переключатели с подписями в один ряд и выровнены по правому краю.
Разделы комнат, для лучшей визуализации и выделения, размещены в два столбика.
http://www.youtube.com/watch?v=D6Q96VC_zmw
Во вложении архив с иконками
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 1:39 pm
Silowar
foxvlad писал(а):
Если найдутся, кто захочет заморачиватся и будет интересно, могу попробовать описать.
Я бы заморочился, мне нравиться такой интерфейс.
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 2:09 pm
foxvlad
Ну попробую, написать, но сразу предупреждаю очень много придется делать ручками самим.
Первый этап делаем элементы меню и прикрепляем иконки.
Чтобы получить примерно, такую картину:
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 2:12 pm
skysilver
foxvlad, предлагаю Вам создать отдельную тему и в ней постараться подробно изложить, как повторить Ваши наработки другим. Конечно, не в один заход, а постепенно. Мне к примеру, крайне интересен зеленый закрепленный блок и кнопки комнат.
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 2:20 pm
foxvlad
из папки "C:\_majordomo\htdocs\templates" копируем фаил "menu.html" в папку "C:\_majordomo\htdocs\templates_alt".
Создаем в папке "C:\_majordomo\htdocs\templates_alt" папку css и в ней фаил "main.css"
Теперь в файле "menu.html" вставляем строку которая подключит наш фаил состилями -
Код: Выделить всё
<link rel="stylesheet" href="<#ROOTHTML#>templates_alt/css/main.css" />
в любом месте между тегами <head>...</head>/
Теперь сам фаил со стилем:
Код: Выделить всё
.ui-slider-switch, .ui-controlgroup-controls { /* прижимаем выключатели к правому краю*/
float:right;
}
.ui-slider-label-a, .ui-header { /* цвет верхней полосы в подменю*/
background-color: #74b71c !important;
}
.ui-header a { /* внешний вид кнопки "назад" в подменю*/
background-color: #5F8C23 !important;
border: 1px solid #272923 !important;
}
.ui-collapsible-heading a { /* Делаем отступ иконок одинаковы и у выпадающего меню и у подменю*/
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
}
.ui-collapsible { /* убираем лишние отступы между элементами меню*/
margin: 0px;
}
.ui-btn-inline, .ui-icon-carat-d, #item97{ /* окрашиваем верхние панельки в меню и подменю в нужный цвет (#item97 - у каждого будет свой индивидуальный)*/
background-color: #74b71c !important;
}
#item127, #item139, #item146, #item147, #item151, #item155, #item156, #item157{ /* Делаем что-бы комнаты встали в два столбика (Id- у каждого будет свой индивидуальный )*/
width:50%;
float:left;
}
/* У кнопок на меню комнат прячем стрелки с правого края (Id- у каждого будет свой индивидуальный )*/
#item127 .ui-icon-carat-r:after, #item139 .ui-icon-carat-r:after, #item146 .ui-icon-carat-r:after, #item147 .ui-icon-carat-r:after,
#item151 .ui-icon-carat-r:after, #item155 .ui-icon-carat-r:after, #item156 .ui-icon-carat-r:after, #item157 .ui-icon-carat-r:after{
display:none;
}
#label_155{ /* Это сложно, объясню потом если у кого будет ситуация когда комнат не четное число*/
display:none;
}
.ui-content, .ui-listview { /* Подгоняем высоту верхних отступов в меню и подменю*/
margin-top:0px !important;
padding-top:0px !important;
padding-left: 2px !important;
padding-right: 2px !important;
}
#item97, .ui-header{ /* Фиксируем верхнюю полосу в меню и подменю (id в меню у каждого индивидуальный)*/
position: fixed !important;
z-index: 9999 !important;
width: 97%;
left: 5px !important;
top: 0px !important;
margin:auto;
padding: 0px;
}
/* А теперь небольшая сложность так как мы зафиксировали наш верхний блок то следующий блок подлезет под него и скроеться
и чтобы их стало видно в каждом подменю нужно сделать пустой блок HTML и перечислить их ниже и параметром регулировать отступ
*/
#item163, #item164, #item165, #item166, #item167, #item168, #item169, #item170, #item171, #item171, #item172, #item173
, #item174, #item175{
padding-top:35px !important;
}
Ну а далее спаршивайте
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 2:22 pm
foxvlad
skysilver писал(а):foxvlad, предлагаю Вам создать отдельную тему и в ней постараться подробно изложить, как повторить Ваши наработки другим. Конечно, не в один заход, а постепенно. Мне к примеру, крайне интересен зеленый закрепленный блок и кнопки комнат.
Не хотел плодить темы может лучше тут?
Re: Галлерея домашних страниц
Добавлено: Чт авг 20, 2015 2:28 pm
skysilver
foxvlad писал(а):Не хотел плодить темы может лучше тут?
Тема "Галерея домашних страниц" уж как-то очень слабо соотносится с темой создания кастомного интерфейса меню.
Заходя в эту ветку, ожидаешь увидеть совсем другое. Поэтому, имхо, целесообразнее создать свою тему, и в ней поделиться своими наработками, а также отвечать на вопросы, которых, чую, будет масса, если народ начнет у себя это реализовывать.