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

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

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

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

Предложения
На форуме идут технические работы. Кое-что кое-где может отображаться криво. Мы скоро всё поправим. :)

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

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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Верстка и скрипты » [ВЫПОЛНЕНО] CSS/HTML / Кодинг: Меню навигации, моб.стиль


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

Сообщений 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

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

0

3

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

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

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

0

4

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

0

5

Эми Белкова
готово:
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

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

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

Код:
@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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Верстка и скрипты » [ВЫПОЛНЕНО] CSS/HTML / Кодинг: Меню навигации, моб.стиль