Posted 1 декабря, 201211 yr comment_15908 Добавляем в 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; } /**********Меню от мафии********/ Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/ Share on other sites Больше вариантов
1 декабря, 201211 yr comment_15915 Как это относится к категории хуков и модификаций? Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=15915 Share on other sites Больше вариантов
1 декабря, 201211 yr Author comment_15918 Как это относится к категории хуков и модификаций? Ну у нас же нет раздела "Модификации шаблонов" ! Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=15918 Share on other sites Больше вариантов
1 декабря, 201211 yr comment_15922 У нас есть раздел Дизайн и графика IP.Board. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=15922 Share on other sites Больше вариантов
1 декабря, 201211 yr Author comment_15926 У нас есть раздел Дизайн и графика IP.Board. Я думаю статья по html+css никак не относится к Дизайну/графике , прошу сделать раздел модификация шаблонов. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=15926 Share on other sites Больше вариантов
1 декабря, 201211 yr comment_15934 Дизайн = шаблон. Раздел Модификация шабонов не рентабелен. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=15934 Share on other sites Больше вариантов
29 января, 201311 yr comment_20153 мб не в тему, но скриншот в шапку самое оно! Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=20153 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_27915 А в какую строку добавлять? У меня шляпа какая-то получилась. И как ссылки в меню сделать рабочими? Edited 17 апреля, 201311 yr by madbatman Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=27915 Share on other sites Больше вариантов
17 апреля, 201311 yr Author comment_27916 <a href="#">Разработка</a> Вместо # ссылку укажи Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=27916 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_27918 Спасибо. Понял, а как поставить вместо дефолтного меню? У меня или в подвал падает, или в самый верх как на скрине. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=27918 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_27920 Тему в топку! Автор непонятно зачем ее сюда вообще запостил. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=27920 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_27933 Добавлю свою инструкцию. 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; Получилось у меня в итоге вот такое меню: Это тестовый форум, тренируюсь на нем просто. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=27933 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_27965 madbatman, молоток. ТС привёл пример создания многоуровнево меню с помощью CSS. Сам код каждый может подредактировать по свои нуждны/стиль. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=27965 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_27993 Каждый -это сильно сказано. Я ваще в этом не бум-бум. Спортивный интерес так сказать. Если кто сюда кинет совсем правильную инструкцию, чтобы меню сделать точь-в точь как на мафии ( а не просто код как в первом посте) буду очень признателен. Edited 17 апреля, 201311 yr by madbatman Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=27993 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_28027 Апну! Как сделать меню как у Мафии? Чтобы новые публикации и меню в одной строке одного цвета были. Как на скрине: Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=28027 Share on other sites Больше вариантов
17 апреля, 201311 yr comment_28052 Pashok(one) по скапу со мной связался. Все настроил! Спасибо ему ! Извиняюсь если обидел. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=28052 Share on other sites Больше вариантов
18 апреля, 201311 yr comment_28142 вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер! Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=28142 Share on other sites Больше вариантов
18 апреля, 201311 yr comment_28146 А как его сделать вертикальным и: разместив его слева выводить подменю справа, а разместив справа, выводить подменю слева? И в горизонтальном варианте выводить менюшки вверх а не в низ. Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=28146 Share on other sites Больше вариантов
19 апреля, 201311 yr comment_28162 вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер! Так стартопик мне через админку все сам сделал, я понятия не имею, как он это сделал. У него скайп в подписи- свяжись с ним, Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=28162 Share on other sites Больше вариантов
21 апреля, 201311 yr comment_28504 проолжу тему...как подрубить шапку в CSS? Чтобы она была по размеру форума? И полоска с менюшками тоже по ширине форума нужна. Помогите чайнику кодом, и в какую строку ipb_styles.css этот код засунуть, мне тоже полезно узнать. Спасибо! Картинка, на ней фон отлично работает - тянется и все такое, но шапка адская на всю ширину никак не убирается. Edited 21 апреля, 201311 yr by madbatman Link to comment https://ipbmafia.ru/topic/2387-mnogo-urovnevoe-menyu-sredstvami-csshtml/?&do=findComment&comment=28504 Share on other sites Больше вариантов
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.