В чем смысл такого ux, когда из форума на основной сайт нет перехода

[hi-artem]

Нет ссылки, приходится по клаве стучать.

С этим же не раз встречался и на энтерпрайзных порталах и всегда мне это казалось крайне неудобным...

[afiskon]

В чем смысл такого ux

Провоцирует создание новых тем на форуме Шучу.

На самом деле просто пока никто из админов не осилил как тут сделать красивую менюшку. Из панели управления сайтом это сделать нельзя (можно только в header / footer что-то дописать, в таком стиле), нужно прямо в шаблоны на сервере вонзиться, а там как-то очень сложно накручено - ruby. docker и вот это вот все.

[afiskon]

Так, погулил немного, вроде осилил. Проверяйте. Что-то могло закэшироваться, если видите фигню, попробуйте пару раз нажать F5.

Если кому интересно - в админке идем в Оформление -> СSS/HTML, создаем новое оформление, называем Menu.

В "CSS" пишем:

#navmenuv {
  position: absolute;
  z-index: 9999;
  height: 50px;
  margin-left: 20%;
}

@media screen and (max-width: 800px) {
  #navmenuv {
    visibility: hidden;
    display: none;
  }
}

#navmenuv li a {
  font-size: 14px;
  color: #999;
  line-height: 60px;
  padding: 0 10px;
}

#navmenuv li a:hover {
  color: black;
}

#navmenuv ul.nav {
    padding: 0;
    margin: 0;
}

#navmenuv .nav li {
    display:inline;
    padding:0;
    margin:0;
}

В "Заголовок":

<div id="navmenucontainer" class="container">
<div id="navmenuv">
<ul class="nav">
<li><a href="http://forum.devzen.ru/">Главная</a></li>
<li><a href="http://devzen.ru/">Подкаст</a></li>
<li><a href="http://devzen.ru/donate/">Поддержать!</a></li>
<li><a href="http://devzen.ru/contact/">Связаться</a></li>
</ul>
</div>
</div>

Жмем на иконку мобильного телефона, в мобильном CSS:

#navmenuv {
  visibility: hidden;
  display: none;
}

Ставим галочку "Разрешить", затем жмем "Сохранить".

По теме:

• https://meta.discourse.org/t/add-menu-items-to-main-header-area/24628
• http://stackoverflow.com/questions/16550485/hide-div-tag-on-mobile-view-only

[EgorZhuk]

Где-то после 1500 по ширине начинает наползать на лого. На 1920 уже перекрывает его.

[Nikita_Melnikov]

А иногда вообще перекрывает меню, что-то странное с версткой

[afiskon]

@EgorZhuk @Nikita_Melnikov я к сожалению почти ничего не понимаю в CSS и верстке и прямо сейчас не имею под рукой широкого экрана. Вы не могли бы сохранить у себя страницу сайта и подобрать правильный CSS? Править надо вот этот файл:

<link class="custom-css" rel="stylesheet" href="/site_customizations/7e202ef2-56d7-47d5-98d8-a9c8d15e57dd.css?target=desktop&v=68efb2a3a3c57e37f62468cfda84a12c&__ws=forum.devzen.ru" type="text/css" media="all">

Из HTML желательно править только приведенный выше кусок HTML-кода. чтобы им можно было управлять из админки, не внося изменений в шаблон. Но если без этого никак, в теории можно и шаблон подправить.

[afiskon]

@EgorZhuk @Nikita_Melnikov

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

devzen-forum-css.tgz (675,8 КБ)

[Nikita_Melnikov]

@afiskon я вот совсем не могу во фронтенд, но судя по тому, что логотип и меню находятся в разных блоках, нужно править html

[EgorZhuk]

Я бы поместил navmenucontainer между дивом с лого и правой менюхой.
Сделал бы позиционирование относительным и float: left.
С самого avmenu убрал позиционирование и маржин.
https://drive.google.com/file/d/0BzVckAbDytTXemRySVZ0aVg5ajA/view

div#navmenucontainer {
position: relative;
float: left;
}
#navmenuv {
z-index: 99999;
height: 50px;
}

[afiskon]

@EgorZhuk к сожалению, похоже, все не так просто. В коде шаблона вообще ничего такого нет, насколько я понимаю, DOM строиться Ember'ом. Если я делаю в консоли:

$("#ember853").html("Test");

То могу подсунуть в заголовок что угодно. Но при добавлении:

<script>
$("#ember853").html("Test");    
</script>

Перед </body> это не работает, так как на момент загрузки страницы элемента с соответствующим id нет. Нет ли идей, как это можно было бы обойти?

[wiz]

Можно попробовать задетектить когда приложение стартануло и навешиваться туда.

Если не получится по-хорошему, setTimer в цикле.

Меня больше смущает "853" - веб-паучье чутьё подсказывает, что в подобные идентификаторы целиться некомильфо т.к. они могут в любой момент съехать. Лучше цепляться на что-то вроде .ember-view.title.

[afiskon]

@wiz ну я же ничего не понимаю в jQuery что, прямо так и писать $(".ember-view.title")? Тебя не сильно затруднит привести более полный пример?

[afiskon]

Во, кажется получилось, и даже без JS!

#navmenuv {
  position: absolute;
  z-index: 9999;
  height: 50px;
  left: 50%;
  margin: 0 0 0 -350px;
}

Как вам? У меня перестало сползать (напомню - могло что-то закэшироваться, нажимайте F5).

[wiz]

Да,

var sel = jQuery(".ember-view.title")

и дальше варианты:

• sel.append( jQuery("<div>дописывание в конец с парсингом содержимого</div>") )
• jQuery("<div> в обратную сторону </div>").appendTo(sel)
• sel.html("<div> полная замена сырым html </div>")

[hi-artem]

ОК, пока пойдет,
хотя конечно это не так делается, но я и сам с CSS справляюсь стиснув зубы ))

sel = jQuery(".ember-view.title")

без яваскрипта уж точно обойтись можно.

Пока предлагаю оставить так, а далее, как только кто-то про себя напишет "фронтендер" - вот пусть и поправит

PS: Может показаться, что я зря эту тему затеял, но так как цель форума - раскрутка подкаста, то ссылка на подкаст необходима.

[mderrdx5341]

в место margin: 0 0 0 -350px;
я бы поиграл с:

navmenuv {
    left: 40%;
    transform: translateX(-50%);