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

Posted 1 декабря, 201211 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;

}


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

Цитата

Flomaster, Zikoi5, madbatman and 2 others
5

1 декабря, 201211 yr

comment_15915

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

Цитата

1 декабря, 201211 yr

Author

comment_15918

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

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

Цитата

madbatman
1

1 декабря, 201211 yr

comment_15922

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

Цитата

1 декабря, 201211 yr

Author

comment_15926

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

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

Цитата

madbatman
1

1 декабря, 201211 yr

comment_15934

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

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

Цитата

29 января, 201311 yr

comment_20153

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

Цитата

madbatman
1

17 апреля, 201311 yr

comment_27915

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

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

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

Edited 17 апреля, 201311 yr by madbatman

Цитата

17 апреля, 201311 yr

Author

comment_27916

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

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

Цитата

madbatman
1

17 апреля, 201311 yr

comment_27918

Спасибо.

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

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

Цитата

17 апреля, 201311 yr

comment_27920

Тему в топку!

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

Цитата

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;

Получилось у меня в итоге вот такое меню:

Это тестовый форум, тренируюсь на нем просто.

Цитата

Respected
1

17 апреля, 201311 yr

comment_27965

madbatman, молоток.

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

Цитата

madbatman
1

17 апреля, 201311 yr

comment_27993

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

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

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

:hi:

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

Edited 17 апреля, 201311 yr by madbatman

Цитата

17 апреля, 201311 yr

comment_28027

Апну!

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

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

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

Цитата

17 апреля, 201311 yr

comment_28052

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

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

Цитата

18 апреля, 201311 yr

comment_28142

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

Цитата

madbatman
1

18 апреля, 201311 yr

comment_28146

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

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

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

Цитата

madbatman
1

19 апреля, 201311 yr

comment_28162

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

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

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

Цитата

21 апреля, 201311 yr

comment_28504

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

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

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

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

ipb_styles.css

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

Спасибо!

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

Edited 21 апреля, 201311 yr by madbatman

Цитата

Sign In

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

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search