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

Изображение

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

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

/* 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>
Комментарии: 29

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

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

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

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

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

#menu {
  width: 960px;
  margin: 60px auto;
...
60px замените на 0
width: 960px; - это ширина, можно заменить на 100%, чтобы меню было на всю ширину страницы.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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. Быть может вам сделать меню в тон фона разделов форума? Светлый который, либо синий, как в заголовке? Как-то более в тему будет?!...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

Могу помочь конечно же:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 21 окт 2013, 16:13 Сообщение

Я буду признателен
  • 0

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;
}
Как я вижу, ну может чуть уже можно сделать, но это уже по вкусу так сказать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

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

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

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

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

<a href="ссылка (куда идем при нажатии на значек)"><img src="ссылка картинки (значек)"></a>
здесь подробнее
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

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

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

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

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

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

<a href="ссылка" style="padding: 0 12px;"><img src="изображение" alt="" /></a>
зы. Кстати, картинка очень к менюшке подходит, классно смотрится:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы