Pashok(one) Опубликовано 1 декабря, 2012 Поделиться Опубликовано 1 декабря, 2012 Добавляем в globalTemplate : <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Категории</a> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">Графика</a></li> <li><a href="#">Разработка</a></li> <li><a href="#">Веб дизайн</a></li> <li><a href="#">IPBMafia.ru</a> <ul> <li><a href="#">Мы лучшие</a></li> </ul> </li> </ul> <li><a href="#">Статьи</a></li> <li><a href="#">О Сайте</a> <ul> <li><a href="#">Пункт</a></li> </ul> </li> <li><a href="#">Контакты</a></li> </ul> </nav> Добавляем в css : /**********Меню от мафии*********/ #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 960px; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; } #menu li { float: left; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover { color: #fafafa; } #menu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: linear-gradient(#444, #111); box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; transition: all .2s ease-in-out; } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { border-radius: 3px 3px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child > a { border-radius: 0 0 3px 3px; } /**********Меню от мафии********/ Zikoi5, Sanek, Flomaster и 2 других 5 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
_Dark_ Опубликовано 1 декабря, 2012 Поделиться Опубликовано 1 декабря, 2012 Как это относится к категории хуков и модификаций? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Pashok(one) Опубликовано 1 декабря, 2012 Автор Поделиться Опубликовано 1 декабря, 2012 Как это относится к категории хуков и модификаций? Ну у нас же нет раздела "Модификации шаблонов" ! madbatman 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
_Dark_ Опубликовано 1 декабря, 2012 Поделиться Опубликовано 1 декабря, 2012 У нас есть раздел Дизайн и графика IP.Board. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Pashok(one) Опубликовано 1 декабря, 2012 Автор Поделиться Опубликовано 1 декабря, 2012 У нас есть раздел Дизайн и графика IP.Board. Я думаю статья по html+css никак не относится к Дизайну/графике , прошу сделать раздел модификация шаблонов. madbatman 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
_Dark_ Опубликовано 1 декабря, 2012 Поделиться Опубликовано 1 декабря, 2012 Дизайн = шаблон. Раздел Модификация шабонов не рентабелен. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
ZloyMonah Опубликовано 29 января, 2013 Поделиться Опубликовано 29 января, 2013 мб не в тему, но скриншот в шапку самое оно! madbatman 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 (изменено) А в какую строку добавлять? У меня шляпа какая-то получилась. И как ссылки в меню сделать рабочими? Изменено 17 апреля, 2013 пользователем madbatman Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Pashok(one) Опубликовано 17 апреля, 2013 Автор Поделиться Опубликовано 17 апреля, 2013 <a href="#">Разработка</a> Вместо # ссылку укажи madbatman 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 Спасибо. Понял, а как поставить вместо дефолтного меню? У меня или в подвал падает, или в самый верх как на скрине. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 Тему в топку! Автор непонятно зачем ее сюда вообще запостил. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 Добавлю свою инструкцию. 1. Отключить всю навигацию в ваших приложениях (форум,галерея и т.д) 2. Убрать пункт БОЛЬШЕ В globalTemplate и ищем: <li id='nav_other_apps' style='display: none'> <a href='#' class='ipbmenu' id='more_apps'>{$this->lang->words['more_apps']} <img src='{$this->settings['img_url']}/useropts_arrow.png' /></a> Удаляем эти строчки 3. Перед первым кодом в старттопике добавить: <li class='left'> Меню будет четко слева 4 .ищем в globalTemplate <if test=”showhomeurl:|:$this->settings['home_url']“> <li id=’nav_home’ class=’left’><a href=’{$this->settings['home_url']}’ title=’{$this->lang->words['homepage_title']}’ rel=”home”>{$this->settings['home_name']}</a></li> </if> После этих строк вставляем первый код из старттопика с добавленым в самом начале нами строками <li class='left'> 5. Идем в ipb_stiles.css И в самый конец добавить второй код из стартопика Еще мне пришлось поменять в нем ширину самого меню. Было: #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 960px; margin: 60px auto; Сделал так: width: 609px; margin: 6px auto; Получилось у меня в итоге вот такое меню: Это тестовый форум, тренируюсь на нем просто. Respected 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Respected Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 madbatman, молоток. ТС привёл пример создания многоуровнево меню с помощью CSS. Сам код каждый может подредактировать по свои нуждны/стиль. madbatman 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 (изменено) Каждый -это сильно сказано. Я ваще в этом не бум-бум. Спортивный интерес так сказать. Если кто сюда кинет совсем правильную инструкцию, чтобы меню сделать точь-в точь как на мафии ( а не просто код как в первом посте) буду очень признателен. Изменено 17 апреля, 2013 пользователем madbatman Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 Апну! Как сделать меню как у Мафии? Чтобы новые публикации и меню в одной строке одного цвета были. Как на скрине: Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 17 апреля, 2013 Поделиться Опубликовано 17 апреля, 2013 Pashok(one) по скапу со мной связался. Все настроил! Спасибо ему ! Извиняюсь если обидел. Pashok(one) 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Lordbl4 Опубликовано 18 апреля, 2013 Поделиться Опубликовано 18 апреля, 2013 вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер! madbatman 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Ruskat Опубликовано 18 апреля, 2013 Поделиться Опубликовано 18 апреля, 2013 А как его сделать вертикальным и: разместив его слева выводить подменю справа, а разместив справа, выводить подменю слева? И в горизонтальном варианте выводить менюшки вверх а не в низ. madbatman 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 19 апреля, 2013 Поделиться Опубликовано 19 апреля, 2013 вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер! Так стартопик мне через админку все сам сделал, я понятия не имею, как он это сделал. У него скайп в подписи- свяжись с ним, Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
madbatman Опубликовано 21 апреля, 2013 Поделиться Опубликовано 21 апреля, 2013 (изменено) проолжу тему...как подрубить шапку в CSS? Чтобы она была по размеру форума? И полоска с менюшками тоже по ширине форума нужна. Помогите чайнику кодом, и в какую строку ipb_styles.css этот код засунуть, мне тоже полезно узнать. Спасибо! Картинка, на ней фон отлично работает - тянется и все такое, но шапка адская на всю ширину никак не убирается. Изменено 21 апреля, 2013 пользователем madbatman Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.