Галерея домашних страниц

foxvlad · Сообщение **foxvlad** » Чт авг 20, 2015 10:54 am

Мое оформление "menu". Верхний зеленый блок закреплен и остается все время, даже при прокрутке.
Переключатели с подписями в один ряд и выровнены по правому краю.
Разделы комнат, для лучшей визуализации и выделения, размещены в два столбика.
http://www.youtube.com/watch?v=D6Q96VC_zmw

skysilver · Сообщение **skysilver** » Чт авг 20, 2015 11:16 am

Занятно. Хотелось бы увидеть подробности реализации и пакет иконок в архиве.

foxvlad · Сообщение **foxvlad** » Чт авг 20, 2015 1:29 pm

skysilver писал(а):Занятно. Хотелось бы увидеть подробности реализации и пакет иконок в архиве.

Пакет иконок, сейчас выложу, а по поводу реализации там, очень много зависит от проекта, так как все через стили.

И во многих вещах приходиться прописывать по именным стилям к каждой графе меню.
Если найдутся, кто захочет заморачиватся и будет интересно, могу попробовать описать.

foxvlad · Сообщение **foxvlad** » Чт авг 20, 2015 1:32 pm

foxvlad писал(а):Мое оформление "menu". Верхний зеленый блок закреплен и остается все время, даже при прокрутке.
Переключатели с подписями в один ряд и выровнены по правому краю.
Разделы комнат, для лучшей визуализации и выделения, размещены в два столбика.
http://www.youtube.com/watch?v=D6Q96VC_zmw

Во вложении архив с иконками

Silowar · Сообщение **Silowar** » Чт авг 20, 2015 1:39 pm

foxvlad писал(а): Если найдутся, кто захочет заморачиватся и будет интересно, могу попробовать описать.

Я бы заморочился, мне нравиться такой интерфейс.

foxvlad · Сообщение **foxvlad** » Чт авг 20, 2015 2:09 pm

Ну попробую, написать, но сразу предупреждаю очень много придется делать ручками самим.

Первый этап делаем элементы меню и прикрепляем иконки.

Чтобы получить примерно, такую картину:

skysilver · Сообщение **skysilver** » Чт авг 20, 2015 2:12 pm

foxvlad, предлагаю Вам создать отдельную тему и в ней постараться подробно изложить, как повторить Ваши наработки другим. Конечно, не в один заход, а постепенно. Мне к примеру, крайне интересен зеленый закрепленный блок и кнопки комнат.

foxvlad · Сообщение **foxvlad** » Чт авг 20, 2015 2:20 pm

из папки "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;
}

Ну а далее спаршивайте

foxvlad · Сообщение **foxvlad** » Чт авг 20, 2015 2:22 pm

skysilver писал(а):foxvlad, предлагаю Вам создать отдельную тему и в ней постараться подробно изложить, как повторить Ваши наработки другим. Конечно, не в один заход, а постепенно. Мне к примеру, крайне интересен зеленый закрепленный блок и кнопки комнат.

Не хотел плодить темы может лучше тут?

skysilver · Сообщение **skysilver** » Чт авг 20, 2015 2:28 pm

foxvlad писал(а):Не хотел плодить темы может лучше тут?

Тема "Галерея домашних страниц" уж как-то очень слабо соотносится с темой создания кастомного интерфейса меню.

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

Галерея домашних страниц

Внешний вид меню

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц

Re: Галлерея домашних страниц