ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

Платформа: MyBB.ru (RusFF)
Стоимость: 8000 рублей;
Авторы: Moju & Gerda

Посмотреть

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

[ВЫПОЛНЕНО] CSS/HTML / Кодинг: Меню навигации, моб.стиль

Страница: 1
Тема закрыта

Сообщений 1 страница 8 из 8

1

ОБЩАЯ ИНФОРМАЦИЯ О ЗАКАЗЕ

1. ССЫЛКА НА ФОРУМ/САЙТ:
http://jnytxtujltkfnm.0pk.ru
2. УСЛОВИЯ И БЮДЖЕТ:

Минимальный и максимальный бюджет, условия: 
-

Предлагаю в обмен:
-

3. ВАШИ КОНТАКТЫ:

https://vk.com/reisawa

ТЕХНИЧЕСКОЕ ЗАДАНИЕ

1. ОПИСАНИЕ ЗАКАЗА:
 
Хотелось бы меню навигации и пользовательских ссылок сделать вот в таком виде.
https://i.imgur.com/YVgzVUg.png https://i.imgur.com/5i7k1nR.png

2. ИСХОДНИКИ И ГРАФИКА:

✔ Я предоставляю выбор исходников дизайнеру
✘ Дизайнер должен использовать ТОЛЬКО мои исходники
✘ Я ПРОТИВ использования в создании готового клипарта, все должно быть нарисовано вручную
https://forumstatic.ru/files/0014/e8/b6/19409.jpg https://forumstatic.ru/files/0014/e8/b6/26846.jpg
Цвет фона: #52302f
Цвет ссылок и разделителя: #dedbcb
Шрифт: подойдет Tahoma с небольшой тенью

Иконок никаких не надо.

3. ДОПОЛНИТЕЛЬНО:

Буду весьма благодарна

+1

2

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Эми Белкова
скинь в ЛС плз доступ на тестовик.

0

3

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Эми Белкова
хочется, чтобы меньшки с разных сторон раскрывались вот так?

Эми Белкова написал(а):

или сделать их с одной стороны?

0

4

Герда, с разных будет удобнее

0

5

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Эми Белкова
готово:
https://i.imgur.com/q6l6PR8.gif

в конце второго окна стиля дизайн:

Код:
/* *********************************** */
/* Меню в мобильном дизайне © ForumD.ru */
/* *********************************** */

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

#pun #nav-but,
#pun #user-but {
display: block !important;
width: 48px;
height: 48px;
position: absolute;
top: 0;
opacity: 0.5;
z-index: 100;
}
#nav-but {left: 0; background: url(/img/navicons.png) no-repeat 0 0;}
#user-but {right: 0; background: url(/img/navicons.png) no-repeat 0 -576px;}

.punbb #pun-navlinks, .punbb #pun-navlinks .container {margin-top: 0 !important; text-align: left !important;}

.punbb #pun-navlinks {position: absolute; top: 0; left: 0;}

.punbb #pun-ulinks,
.punbb #pun-navlinks {
background: #52302f !important; 
padding: 10px !important;
display: none;
}
.punbb #pun-ulinks.show,
.punbb #pun-navlinks.show {display: inline-block;}
.punbb #pun-navlinks .container {padding: 0px !important;}

.punbb #pun-ulinks, .punbb #pun-navlinks .container li a, .punbb #pun-navlinks .container li a:hover {
width: auto !important;
height: auto !important;
background-image: none !important;
background-color: transparent;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
.punbb #pun-ulinks .container li a,
.punbb #pun-navlinks .container li a {
color: #e2dbcd !important; 
font-weight: bold;
text-shadow: 1px 1px 1px #000;
}
.punbb #pun-ulinks .container li a,
.punbb #pun-navlinks .container li a span {font-size: 14px !important;}

.punbb #pun-ulinks .container li,
.punbb #pun-navlinks .container li {
line-height: normal !important; 
display: block;
border-bottom: 1px solid #e2dbcd !important;
padding-bottom: 4px !important;
margin-bottom: 10px !important;
}
.punbb #pun-navlinks h2,
.punbb #pun-ulinks h2 {
font-size: 12px !important;
height: auto;
width: auto;
position: relative;
left: auto;
line-height: normal;
color: #a99897;
text-transform: uppercase;
}
.punbb #pun-navlinks h2 {padding: 12px 0px 20px 40px;}
.punbb #pun-ulinks h2 {padding: 12px 40px 20px 0px;}
.punbb #pun-ulinks ul {
display: inline-block !important;
z-index: 0 !important;
position: relative !important;
top: 0 !important;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
.punbb #pun-ulinks {
top: 0 !important;
right: 0 !important;
line-height: normal !important;
z-index: 0 !important;
padding: 10px !important;
}
.punbb #pun-ulinks .container {
background-color: transparent !important; 
width: 100% !important;
}
.punbb #pun-ulinks .container li a {padding: 0 !important;}

}

HTML верх стоят кнопки включения меню:

Код:
<!-- кнопки меню для мобильного стиля -->
<div id="nav-but" style="display:none"></div>
<div id="user-but" style="display:none"></div>
<script type="text/javascript">
$("#nav-but").click(function(){
$("#pun-navlinks").toggleClass("show");
});
$("#user-but").click(function(){
$("#pun-ulinks").toggleClass("show");
});
</script>

+1

6

Герда, попробовала с телефона и через код форума.
Выходит вот так.
А в остальном вы просто Богиня *о*
https://forumupload.ru/uploads/0007/e3/f7/5772/661106.png

0

7

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9803
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

Эми Белкова
поправила

не хватало кусочка:

Код:
@media screen and (max-width: 480px) {

#pun.ismoderator #pun-navlinks .container li {padding: 0 0 4px 0 !important;}
#pun.ismoderator #pun-ulinks, 
#pun.ismoderator #pun-navlinks .container li a, 
#pun.ismoderator #pun #pun-navlinks .container li a:hover {width: auto !important; height: auto !important;}

}

странные коды в мобильном стиле майбб %-)
ума не приложу, зачем им дополнительно прописывать ширину ссылок у админов и модеров для дисплея 480px

+1

8

Герда, большое вам спасибо! Это прекрасная работа!)

+1

Тема закрыта
Страница: 1