Отзывчивое меню навигации

Автор digger®, 26 июня 2017, 09:13:12

« предыдущая - следующая »

0 Пользователей и 1 гость просматривают эту тему.

digger®

26 июня 2017, 09:13:12 Последнее редактирование: 24 ноября 2017, 17:03:00 от digger® Причина: Добавил про .responsive_menu
Набросок для отзывчивого меню навигации. Делалось для замены стремного меню в Responsive Curve.
Также, скрыты формы логина и поиска, занимающие полэкрана на мобильном устройстве.

В script.js

добавить в начало
Код: (js)
var main_menu_visible;

добавить в конец
Код: (js)
// Function to show/hide mobile menu
function showMobileMenu() {
 if (main_menu_visible == true) {
        document.getElementById('main_menu').style.display = 'none';
        main_menu_visible = false;
    }
    else {
        document.getElementById('main_menu').style.display = 'block';
        main_menu_visible = true;
 }
}

Из responsive.css удалить все стили .responsive_menu

В index.css

добавить в конец

Код: (css)
#mobile_menu_button {
 display: none;
}

@media screen and (max-width: 640px) {

 #main_menu {
 display: none;
 }

 #mobile_menu_button {
 display: inline-block;
 background: url(../images/mobile_menu.png) no-repeat;
 height: 40px;
 width: 40px;
 float: right;
 margin-top: 4px;
 margin-right: 5px;
 cursor: pointer;
 }

 h1.forumtitle {
 line-height: 22px;
 font-size: 1.3em;
 float: none;
 }

 #header div.frame {
 height: 50px;
 }

 #top_section {
 min-height: 5px;
 }

 .navigate_section ul {
 padding: 0.5em 0;
 }
}

@media screen and (min-width: 240px) and (max-width: 640px) {
img#upshrink {
display: none;
}

#upper_section {
display: none;
}
}

#main_menu .dropmenu span.firstlevel {
display: block !important;
}


В index.template.php
перед
Код: (html)
<h1 class="forumtitle"> 

добавить
Код: (html)
<div id="mobile_menu_button" onclick="showMobileMenu();"></div>

По месту доработать напильником размеры и отступы и положить картинку mobile_menu.png 40x40px для кнопки в папку /images/ используемой темы оформления.


Suonare

Попробуем, спасибо. Меню там реально стрёмное.

gorbi

А в мод это может превратиться?

S.T.A.L.K.E.R.

@digger® подскажите код вокруг этого
Код
<h1 class="forumtitle">
Я что-то даже в дефолтной теме у себя по любым вхождениям найти не могу этот кусок кода wallbash

digger®

Цитата: S.T.A.L.K.E.R. от 26 июня 2017, 09:41:23@digger® подскажите код вокруг этого
Код
<h1 class="forumtitle">
Я что-то даже в дефолтной теме у себя по любым вхождениям найти не могу этот кусок кода wallbash
Под
Код
<div id="top_section">

S.T.A.L.K.E.R.

Просто шикарно и бомбезно :D  O0
Стиль переделать под свою тему и наверно умыкну кнопку выше со скрина.Она как раз под мой стиль подойдет
Вы не против?
Менб у меня только по непонятной причине вверху открывается,смотрю чего оно так


gorbi

У дизайнеров вроде сендвич называется?

S.T.A.L.K.E.R.

Все,шикарно.Теперь осталось разобраться почему меню открывается вверху кнопки а не внизу(это особенность моей темы,уже разобрался),хотя и так просто отлично...
Я вот такую кнопку поставил
Код
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id2luZG93cy0xMjUyIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJJY29ucyIgc3R5bGU9Im9wYWNpdHk6MC43NTsiPgoJPHBhdGggaWQ9Im1lbnUiIGQ9Ik02LDE1aDEyYzAuNTUzLDAsMSwwLjQ0NywxLDF2MWMwLDAuNTUzLTAuNDQ3LDEtMSwxSDZjLTAuNTUzLDAtMS0wLjQ0Ny0xLTF2LTFDNSwxNS40NDcsNS40NDcsMTUsNiwxNXogTTUsMTF2MSAgIGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDEyYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTFjMC0wLjU1My0wLjQ0Ny0xLTEtMUg2QzUuNDQ3LDEwLDUsMTAuNDQ3LDUsMTF6IE01LDZ2MWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDEyICAgYzAuNTUzLDAsMS0wLjQ0NywxLTFWNmMwLTAuNTUzLTAuNDQ3LTEtMS0xSDZDNS40NDcsNSw1LDUuNDQ3LDUsNnoiLz4KPC9nPgo8ZyBpZD0iR3VpZGVzIiBzdHlsZT0iZGlzcGxheTpub25lOyI+CjwvZz4KPC9zdmc+) no-repeat;
Это ж можно по идее стилями сделать всплывающие меню как и тут?

digger®

Цитата: S.T.A.L.K.E.R. от 26 июня 2017, 10:14:08Все,шикарно.Теперь осталось разобраться почему меню открывается вверху кнопки а не внизу,хотя и так просто отлично...
Нужно кнопку поставить перед
Код
<div id="main_menu"
тогда будет снизу открываться

S.T.A.L.K.E.R.

Спасибо,я там уже дополнил сообщение.Красиво вышло однако,смф преображается в нечто... :D

Serifa

А дайте адрес, где можно зайти и на кнопку потыкать? И оно для 2.1 тоже встанет?
версия форума 2.1
«- Помощник капитана Бакстер, - заявил Лумис, - безбожно врет. Все отнюдь не под контролем, вернее, не под его контролем. Корабль захвачен представителями небелковой формы разумной жизни, которые маскируются под обслуживающих роботов, а некоторые даже не делают и этого...»
«То, что у тебя есть, лечится антибиотиками» (nowhere man, 1995)
В телеге

S.T.A.L.K.E.R.

Цитата: Serifa от 04 июля 2017, 16:27:36А дайте адрес, где можно зайти и на кнопку потыкать? И оно для 2.1 тоже встанет?
У меня на форум зайди и потыкай.Ссылка есть тут.

gorbi

А какое-то промышленное решение ожидается или только ручная работа?

Serifa

версия форума 2.1
«- Помощник капитана Бакстер, - заявил Лумис, - безбожно врет. Все отнюдь не под контролем, вернее, не под его контролем. Корабль захвачен представителями небелковой формы разумной жизни, которые маскируются под обслуживающих роботов, а некоторые даже не делают и этого...»
«То, что у тебя есть, лечится антибиотиками» (nowhere man, 1995)
В телеге

gorbi

Присоединяюсь. Дайте ссыль посмотреть!!!

Suonare

Цитата: gorbi от 01 августа 2017, 09:12:58Дайте ссыль посмотреть!!!
Привет :) . Сцылко в профиль нарисовала, смотрите.

gorbi

Подскажите, а сложно ли добавить иконки для разделов, как это есть в 2.1. Чтобы было видно разделы, в которых появились новые сообщения.

S.T.A.L.K.E.R.

Цитата: gorbi от 31 марта 2018, 11:40:28Подскажите, а сложно ли добавить иконки для разделов, как это есть в 2.1. Чтобы было видно разделы, в которых появились новые сообщения.
Подробней.В 2.0 вроде ж как такое тоже есть.

gorbi

Цитата: S.T.A.L.K.E.R. от 31 марта 2018, 12:28:03Подробней.В 2.0 вроде ж как такое тоже есть.
В десктопной версии есть, а в мобильной у меня не выводятся. Проверял на двух форумах

S.T.A.L.K.E.R.

Цитата: gorbi от 31 марта 2018, 15:28:32В десктопной версии есть, а в мобильной у меня не выводятся. Проверял на двух форумах

А мобильная что за тема?
Скорее всего в мобильной теме просто не прописана сама кнопка.

gorbi

Я не правильно выразился, не тема мобильная, а устройства. Тема стандартная.

Serifa

Уберите оповещение о редактировании поста (первого поста в теме), а то из-за него содержимое в трубочку сворачивается! У меня, по-крайней мере.
версия форума 2.1
«- Помощник капитана Бакстер, - заявил Лумис, - безбожно врет. Все отнюдь не под контролем, вернее, не под его контролем. Корабль захвачен представителями небелковой формы разумной жизни, которые маскируются под обслуживающих роботов, а некоторые даже не делают и этого...»
«То, что у тебя есть, лечится антибиотиками» (nowhere man, 1995)
В телеге

gorbi

Это у меня убрано, хотелось бы иконки к темам )

S.T.A.L.K.E.R.

Тема стандарт
Цитата: gorbi от 31 марта 2018, 17:19:43Я не правильно выразился, не тема мобильная, а устройства. Тема стандартная.
Да нет,тема не стандартная ибо добавлена отзывчивость для мобильных устройств.А значит CSS переделан.
Если это те иконки что сбоку слева то в дефолтном CSS со строки 105 вытрите стили table.table_list tbody.content td.icon, и в строке 197 удалите .icon,.Удаляйте только это,остальное оставьте.И то не понятно где оно потом вылезти сможет
Вам недоступны вложения в этом разделе.

gorbi

Каким образом получен левый скрин? По пропорциям вроде как мобильное устройство, но на нём без иконок.

S.T.A.L.K.E.R.

Цитата: gorbi от 01 апреля 2018, 10:29:16Каким образом получен левый скрин?
Цитата: gorbi от 01 апреля 2018, 10:29:16Каким образом получен левый скрин?
Средства вебмастера Опера.
Цитата: gorbi от 01 апреля 2018, 10:29:16По пропорциям вроде как мобильное устройство, но на нём без иконок.

Эмулятор мобильного устройства.Иконки слева что я сделал чтобы видны были это они или нет?