Горизонтальное меню с выпадающим списком

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
xaocZ

Горизонтальное меню с выпадающим списком

xaocZ 21 июл 2012, 14:09 Сообщение

Горизонтальное меню с выпадающим списком

Изображение

В тему стиля добавляем

Код: Выделить всё

/* Menu-Bar ---------------------------------------- */ #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 #acca24, 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; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; 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 { /* Только для IE6 */ color: #fafafa; } #menu ul { margin: 20px 0 0 0; _margin: 0; /*Только для IE6*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #6f8314); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; 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; /*Только для IE6*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*Только для IE6*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*Только для IE6*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#acca24, #6f8314); background-image: -webkit-gradient(linear, left top, left bottom, from(#acca24), to(#6f8314)); background-image: -webkit-linear-gradient(#acca24, #6f8314); background-image: -o-linear-gradient(#acca24, #6f8314); background-image: -ms-linear-gradient(#acca24, #6f8314); background-image: linear-gradient(#acca24, #6f8314); } #menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; 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: #acca24; } #menu ul ul li:first-child a:hover:after { border-right-color: #acca24; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; }


Туда где будет ваше меню, обычно в overall_header.html

Код: Выделить всё

<ul id="menu"> <li><a href="/">Главная</a></li> <li><a href="">Пункт 1</a> <ul> <li><a href="">Пункт 1.1</a> <ul> <li><a href="">Пункт 1.1.1</a></li> <li><a href="">Пункт 1.1.2</a></li> <li><a href="">Пункт 1.1.3</a></li> <li><a href="">Пункт 1.1.4</a></li> </ul> </li> <li><a href="">Пункт 1.2</a> <ul> <li><a href="">Пункт 1.2.1</a></li> <li><a href="">Пункт 1.2.2</a></li> <li><a href="">Пункт 1.2.3</a></li> <li><a href="">Пункт 1.2.4</a></li> </ul> </li> <li><a href="">Пункт 1.3</a> <ul> <li><a href="">Пункт 1.3.1</a></li> <li><a href="">Пункт 1.3.2</a></li> <li><a href="">Пункт 1.3.3</a></li> <li><a href="">Пункт 1.3.4</a></li> </ul> </li> <li><a href="">Пункт 1.4</a> <ul> <li><a href="">Пункт 1.4.1</a></li> <li><a href="">Пункт 1.4.2</a></li> <li><a href="">Пункт 1.4.3</a></li> <li><a href="">Пункт 1.4.4</a></li> </ul> </li> </ul> </li> <li><a href="">Пункт 2</a> <ul> <li><a href="">Пункт 2.1</a> <ul> <li><a href="">Пункт 2.1.1</a></li> <li><a href="">Пункт 2.1.2</a></li> <li><a href="">Пункт 2.1.3</a></li> <li><a href="">Пункт 2.1.4</a></li> </ul> </li> <li><a href="">Пункт 2.2</a> <ul> <li><a href="">Пункт 2.2.1</a></li> <li><a href="">Пункт 2.2.2</a></li> <li><a href="">Пункт 2.2.3</a></li> <li><a href="">Пункт 2.2.4</a></li> </ul> </li> <li><a href="">Пункт 2.3</a> <ul> <li><a href="">Пункт 2.3.1</a></li> <li><a href="">Пункт 2.3.2</a></li> <li><a href="">Пункт 2.3.3</a></li> <li><a href="">Пункт 2.3.4</a></li> </ul> </li> <li><a href="">Пункт 2.4</a> <ul> <li><a href="">Пункт 2.4.1</a></li> <li><a href="">Пункт 2.4.2</a></li> <li><a href="">Пункт 2.4.3</a></li> <li><a href="">Пункт 2.4.4</a></li> </ul> </li> </ul> </li> <li><a href="">Пункт 3</a> <ul> <li><a href="">Пункт 3.1</a> <ul> <li><a href="">Пункт 3.1.1</a></li> <li><a href="">Пункт 3.1.2</a></li> <li><a href="">Пункт 3.1.3</a></li> <li><a href="">Пункт 3.1.4</a></li> </ul> </li> <li><a href="">Пункт 3.2</a> <ul> <li><a href="">Пункт 3.2.1</a></li> <li><a href="">Пункт 3.2.2</a></li> <li><a href="">Пункт 3.2.3</a></li> <li><a href="">Пункт 3.2.4</a></li> </ul> </li> <li><a href="">Пункт 3.3</a> <ul> <li><a href="">Пункт 3.3.1</a></li> <li><a href="">Пункт 3.3.2</a></li> <li><a href="">Пункт 3.3.3</a></li> <li><a href="">Пункт 3.3.4</a></li> </ul> </li> <li><a href="">Пункт 3.4</a> <ul> <li><a href="">Пункт 3.4.1</a></li> <li><a href="">Пункт 3.4.2</a></li> <li><a href="">Пункт 3.4.3</a></li> <li><a href="">Пункт 3.4.4</a></li> </ul> </li> </ul> </li> <li><a href="">Пункт 4</a> <ul> <li><a href="">Пункт 4.1</a> <ul> <li><a href="">Пункт 4.1.1</a></li> <li><a href="">Пункт 4.1.2</a></li> <li><a href="">Пункт 4.1.3</a></li> <li><a href="">Пункт 4.1.4</a></li> </ul> </li> <li><a href="">Пункт 4.2</a> <ul> <li><a href="">Пункт 4.2.1</a></li> <li><a href="">Пункт 4.2.2</a></li> <li><a href="">Пункт 4.2.3</a></li> <li><a href="">Пункт 4.2.4</a></li> </ul> </li> <li><a href="">Пункт 4.3</a> <ul> <li><a href="">Пункт 4.3.1</a></li> <li><a href="">Пункт 4.3.2</a></li> <li><a href="">Пункт 4.3.3</a></li> <li><a href="">Пункт 4.3.4</a></li> </ul> </li> <li><a href="">Пункт 4.4</a> <ul> <li><a href="">Пункт 4.4.1</a></li> <li><a href="">Пункт 4.4.2</a></li> <li><a href="">Пункт 4.4.3</a></li> <li><a href="">Пункт 4.4.4</a></li> </ul> </li> </ul> </li> <li><a href="#">О Нас</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">F.A.Q.</a></li> </ul>

Never opened myself this way
Life is ours, we live it our way
All these words I don't just say
And nothing else matters


Metallica - Nothing Else Matters

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 19 окт 2013, 20:55 Сообщение

Сверху образовалась какая-то синяя полоса? как её убрать?

Аватара пользователя
CabinetAdmin

Re: Горизонтальное меню с выпадающим списком

CabinetAdmin 20 окт 2013, 06:57 Сообщение

Нужно убрать отступы сверху и снизу:

Код: Выделить всё

#menu { width: 960px; margin: 60px auto; ...


60px замените на 0
width: 960px; - это ширина, можно заменить на 100%, чтобы меню было на всю ширину страницы.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 20 окт 2013, 09:43 Сообщение

Подкорректировал, стало как-то не красиво, оно слишком выделяется из всего дизайна форума, наверное нужно делать его так же былым как у вас, с чёрными или синими разделительными полосами
И вот синяя полоса сверху появляется - это жуть(((

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 21 окт 2013, 10:57 Сообщение

Подскажите какие переменные отвечают за цвета, а-то потырка, потыркал, фигня получается какая-то

Аватара пользователя
CabinetAdmin

Re: Горизонтальное меню с выпадающим списком

CabinetAdmin 21 окт 2013, 14:21 Сообщение

Вот этот кусок:

Код: Выделить всё

#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 #acca24, 0 1px 0 #666 inset; }


background-image для разных видов браузеров, фон в виде градиента, перед ними background-color с цветов в формате понятным всем браузерам, стоит он перед background-image на случай если браузер (например тот же IE-7,8...) не понимает градиент.

В #menu ul { цвета для выпадающего списка. #menu ul a:hover { при наведении мышкой.

ps. Быть может вам сделать меню в тон фона разделов форума? Светлый который, либо синий, как в заголовке? Как-то более в тему будет?!...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 21 окт 2013, 15:33 Сообщение

CabinetAdmin
CabinetAdmin » Сегодня, 14:21 писал(а):Быть может вам сделать меню в тон фона разделов форума? Светлый который, либо синий, как в заголовке? Как-то более в тему будет?!...


Вот я и хочу так сделать.
А вы предложили помощь или просто посоветовали?

Аватара пользователя
CabinetAdmin

Re: Горизонтальное меню с выпадающим списком

CabinetAdmin 21 окт 2013, 16:06 Сообщение

Могу помочь конечно же:)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Аватара пользователя
CabinetAdmin

Re: Горизонтальное меню с выпадающим списком

CabinetAdmin 21 окт 2013, 17:02 Сообщение

Примерно как-то так:

Код: Выделить всё

/* Menu-Bar :: Design by cabinetadmina.ru from gaz-autoclub.ru ----------------------------------------------------v.1.0.1--- */ #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 100%; margin: 0px auto; border: 1px solid #D0D8DD; background-color: #EDF0F5; } #menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; } #menu li { float: left; position: relative; border-right: 1px solid #D0D8DD; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #E6EAF0; background-color: #EDF0F5; -moz-box-shadow: 1px 0 0 #fff; -webkit-box-shadow: 1px 0 0 #fff; box-shadow: 1px 0 0 #fff; } #menu a { float: left; padding: 12px 30px; color: #087FB9; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #005784; } *html #menu li a:hover { /* Только для IE6 */ color: #005784; } #menu ul { margin: 20px 0 0 0; _margin: 0; /*Только для IE6*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #EDF0F5; border: 1px solid #D0D8DD; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; 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; /*Только для IE6*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; _line-height: 0; /*Только для IE6*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #E6EAF0, 0 2px 0 #D0D8DD; box-shadow: 0 1px 0 #E6EAF0, 0 2px 0 #D0D8DD; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*Только для IE6*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #FAFBFD; background-image: -moz-linear-gradient(#D1DAE6, #FAFBFD); background-image: -webkit-gradient(linear, left top, left bottom, from(#D1DAE6), to(#FAFBFD)); background-image: -webkit-linear-gradient(#D1DAE6, #FAFBFD); background-image: -o-linear-gradient(#D1DAE6, #FAFBFD); background-image: -ms-linear-gradient(#D1DAE6, #FAFBFD); background-image: linear-gradient(#D1DAE6, #FAFBFD); } #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: 5px solid #7EA4D4; } #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: 5px solid #7EA4D4; } #menu ul li:first-child a:hover:after { border-bottom-color: #7EA4D4; } #menu ul ul li:first-child a:hover:after { border-right-color: #7EA4D4; border-bottom-color: transparent; }


Как я вижу, ну может чуть уже можно сделать, но это уже по вкусу так сказать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 21 окт 2013, 19:11 Сообщение

CabinetAdmin
Вот если бы она была бы под цвет шапки то было бы шик

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 04 янв 2014, 16:16 Сообщение

Появился вопрос, как мне вместо надписи (в шапке меню) поставить значёк гиперсылка, тоесть значёк который при нажатии переходил бы на определённцю ссылку!
Вот кусок с кода

Код: Выделить всё

<li><a href="#">О Нас</a></li>

Аватара пользователя
Uzanka

Re: Горизонтальное меню с выпадающим списком

Uzanka 04 янв 2014, 16:40 Сообщение

eska
использовать тег изображения внутри тега ссылки

Код: Выделить всё

<a href="ссылка (куда идем при нажатии на значек)"><img src="ссылка картинки (значек)"></a>


здесь подробнее
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
eska

Re: Горизонтальное меню с выпадающим списком

eska 04 янв 2014, 17:39 Сообщение

Вставил картинку получилось вот так http://gaz-autoclub.ru/index.php (смотреть меню)
Можно ли как-то меню выровнить?

Аватара пользователя
CabinetAdmin

Re: Горизонтальное меню с выпадающим списком

CabinetAdmin 04 янв 2014, 18:10 Сообщение

Если сильно не мудрить:

Код: Выделить всё

<a href="ссылка" style="padding: 0 12px;"><img src="изображение" alt="" /></a>


зы. Кстати, картинка очень к менюшке подходит, классно смотрится:)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость