Много Уровневое меню средствами css+html

[Pashok(one)]

Добавляем в 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;

}


/**********Меню от мафии********/

[_Dark_]

Как это относится к категории хуков и модификаций?

[Pashok(one)]

Как это относится к категории хуков и модификаций?

Ну у нас же нет раздела "Модификации шаблонов" !

[_Dark_]

У нас есть раздел Дизайн и графика IP.Board.

[Pashok(one)]

У нас есть раздел Дизайн и графика IP.Board.

Я думаю статья по html+css никак не относится к Дизайну/графике , прошу сделать раздел модификация шаблонов.

[_Dark_]

Дизайн = шаблон.

Раздел Модификация шабонов не рентабелен.

[ZloyMonah]

мб не в тему, но скриншот в шапку самое оно!

[madbatman]

А в какую строку добавлять? 

У меня шляпа какая-то получилась.

 

 

И как ссылки в меню сделать рабочими?

Изменено 17 апреля, 2013 пользователем madbatman

[Pashok(one)]

<a href="#">Разработка</a>

 

Вместо # ссылку укажи

[madbatman]

Спасибо.

Понял, а как поставить вместо дефолтного меню? 

У меня или в подвал падает, или в самый верх как на скрине.

[madbatman]

Тему в топку! 

Автор непонятно зачем ее сюда вообще запостил.

[madbatman]

Добавлю свою инструкцию.

 

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]

madbatman, молоток.

ТС привёл пример создания многоуровнево меню с помощью CSS. Сам код каждый может подредактировать по свои нуждны/стиль.

[madbatman]

Каждый -это сильно сказано.

Я ваще в этом не бум-бум.

Спортивный интерес так сказать.

Если кто сюда кинет совсем правильную инструкцию, чтобы меню сделать точь-в точь как на мафии ( а не просто код как в первом посте) буду очень признателен.

Изменено 17 апреля, 2013 пользователем madbatman

[madbatman]

Апну!

Как сделать меню как у Мафии?

 

Чтобы новые публикации и меню в одной строке одного цвета были.

 

Как на скрине:

 

 

 

 

 

 

[madbatman]

Pashok(one) по скапу со мной связался.

 

Все настроил! Спасибо ему ! Извиняюсь если обидел.

[Lordbl4]

вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер!

[Ruskat]

А как его сделать вертикальным и:

разместив его слева выводить подменю справа, а разместив справа, выводить подменю слева?

И в горизонтальном варианте выводить менюшки вверх а не в низ.

[madbatman]

вот бы ещё со спасибками довольные пользователи прилагали инструкции к важным вопросам типа "как сделать меню как у мафии" - было бы просто супер!

 

Так стартопик мне через админку все  сам сделал, я понятия не имею, как он это сделал.

У него скайп в подписи- свяжись с ним,

[madbatman]

проолжу тему...как подрубить шапку в CSS?

Чтобы она была по размеру форума?

И полоска с менюшками тоже по ширине форума нужна.

Помогите чайнику кодом, и в какую строку  

•  
  ipb_styles.css

 

 

этот код засунуть, мне  тоже  полезно узнать.

Спасибо!

 

Картинка, на ней фон отлично работает - тянется и все такое, но шапка адская на всю ширину никак не убирается.

 

Изменено 21 апреля, 2013 пользователем madbatman