Cообщество пользователей SMF

Набросок для отзывчивого меню навигации. Делалось для замены стремного меню в Responsive Curve.
Также, скрыты формы логина и поиска, занимающие полэкрана на мобильном устройстве.

В script.js

добавить в начало
var main_menu_visible;
добавить в конец
// 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

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

#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
перед
<h1 class="forumtitle">
добавить
<div id="mobile_menu_button" onclick="showMobileMenu();"></div>
По месту доработать напильником размеры и отступы и положить картинку mobile_menu.png 40x40px для кнопки в папку /images/ используемой темы оформления.

В живую выглядит так

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

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

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

Цитата: S.T.A.L.K.E.R. от 26 июня 2017, 09:41:23@digger® подскажите код вокруг этого

Код Выделить Развернуть

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

Под
<div id="top_section">

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

Копку не жалко, брал с какого-то стока бесплатных иконок.

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

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

Цитата: S.T.A.L.K.E.R. от 26 июня 2017, 10:14:08Все,шикарно.Теперь осталось разобраться почему меню открывается вверху кнопки а не внизу,хотя и так просто отлично...

Нужно кнопку поставить перед
<div id="main_menu"тогда будет снизу открываться

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

А дайте адрес, где можно зайти и на кнопку потыкать? И оно для 2.1 тоже встанет?

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

У меня на форум зайди и потыкай.Ссылка есть тут.

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

А для 2.1?
И где ссылка?

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

Цитата: gorbi от 01 августа 2017, 09:12:58Дайте ссыль посмотреть!!!

Привет . Сцылко в профиль нарисовала, смотрите.

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

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

Подробней.В 2.0 вроде ж как такое тоже есть.

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

В десктопной версии есть, а в мобильной у меня не выводятся. Проверял на двух форумах

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

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

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

Уберите оповещение о редактировании поста (первого поста в теме), а то из-за него содержимое в трубочку сворачивается! У меня, по-крайней мере.

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

Тема стандарт

Цитата: gorbi от 31 марта 2018, 17:19:43Я не правильно выразился, не тема мобильная, а устройства. Тема стандартная.

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

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

Цитата: gorbi от 01 апреля 2018, 10:29:16Каким образом получен левый скрин?

Цитата: gorbi от 01 апреля 2018, 10:29:16Каким образом получен левый скрин?

Средства вебмастера Опера.

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

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

Всё работает как доктор digger® прописал.
Есть вопрос. Как сделать доступным в шапке ссылки

ЦитироватьНовые сообщения с последнего визита.
Новые ответы на ваши сообщения.

Цитата: bulatus от 24 февраля 2021, 06:46:22Всё работает как доктор digger® прописал.
Есть вопрос. Как сделать доступным в шапке ссылки

Вставить в меню
<li><a href="' , $scripturl , '?action=unread;">' , $txt['new_posts'] , ' ' , $context['unreadall'] . ' ' . $txt['unreadall_txt'] , '</a></li>
<li><a href="' , $scripturl , '?action=unreadreplies;">' , $txt['new_replies'] , ' ' , $context['unreadreplies'] . ' ' . $txt['unreadreplies_txt'] , '</a></li>Код может быть нужно подредактировать,это с другой темы оформения