Posted 1 декабря, 201212 yr Добавляем в 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; } /**********Меню от мафии********/
1 декабря, 201212 yr Author Как это относится к категории хуков и модификаций? Ну у нас же нет раздела "Модификации шаблонов" !
1 декабря, 201212 yr Author У нас есть раздел Дизайн и графика IP.Board. Я думаю статья по html+css никак не относится к Дизайну/графике , прошу сделать раздел модификация шаблонов.
17 апреля, 201312 yr А в какую строку добавлять? У меня шляпа какая-то получилась. И как ссылки в меню сделать рабочими? Edited 17 апреля, 201312 yr by madbatman
17 апреля, 201312 yr Спасибо. Понял, а как поставить вместо дефолтного меню? У меня или в подвал падает, или в самый верх как на скрине.
17 апреля, 201312 yr Добавлю свою инструкцию. 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; Получилось у меня в итоге вот такое меню: Это тестовый форум, тренируюсь на нем просто.
17 апреля, 201312 yr madbatman, молоток. ТС привёл пример создания многоуровнево меню с помощью CSS. Сам код каждый может подредактировать по свои нуждны/стиль.
17 апреля, 201312 yr Каждый -это сильно сказано. Я ваще в этом не бум-бум. Спортивный интерес так сказать. Если кто сюда кинет совсем правильную инструкцию, чтобы меню сделать точь-в точь как на мафии ( а не просто код как в первом посте) буду очень признателен. Edited 17 апреля, 201312 yr by madbatman
17 апреля, 201312 yr Апну! Как сделать меню как у Мафии? Чтобы новые публикации и меню в одной строке одного цвета были. Как на скрине:
17 апреля, 201312 yr Pashok(one) по скапу со мной связался. Все настроил! Спасибо ему ! Извиняюсь если обидел.
18 апреля, 201312 yr вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер!
18 апреля, 201312 yr А как его сделать вертикальным и: разместив его слева выводить подменю справа, а разместив справа, выводить подменю слева? И в горизонтальном варианте выводить менюшки вверх а не в низ.
19 апреля, 201312 yr вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер! Так стартопик мне через админку все сам сделал, я понятия не имею, как он это сделал. У него скайп в подписи- свяжись с ним,
21 апреля, 201312 yr проолжу тему...как подрубить шапку в CSS? Чтобы она была по размеру форума? И полоска с менюшками тоже по ширине форума нужна. Помогите чайнику кодом, и в какую строку ipb_styles.css этот код засунуть, мне тоже полезно узнать. Спасибо! Картинка, на ней фон отлично работает - тянется и все такое, но шапка адская на всю ширину никак не убирается. Edited 21 апреля, 201312 yr by madbatman
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.