Все записи с меткой ‘Menu’


0

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

Автор Jemand

Горизонтальное выпадающее меню без использования JavaScript и различных хаков. Меню представляет собой многоуровневый список.

CSS-код:

* {
	margin:0;
	padding:0;
}
#nav {
	font-size:0.7em;
	list-style-type:none;
	width:600px;
	height:25px;
	display:inline-block;
	background:#355C96;
	line-height:25px;
}
#nav li{
	float:left;
	width:120px;
	margin-top:-10000px;
}
#nav li a {
	width:120px;
	text-decoration:none;
	text-align:center;
	color:#fff;
	position:relative;
	float:left;
	margin-right:-119px;
	margin-top:10000px;
}
#nav li a:hover, #content #nav li a:focus, #content #nav li a:active {
	background:#DCE2FC;
	margin-right:0;
	color:#355C96;
}
#nav li ul {
	background:#6286BD;
	float:left;
	margin-top:-25px;
	padding-top:25px;
	margin-bottom:-10000px;
	list-style-type:none;
}
#nav li ul li {
	float:none;
	margin:0;
	width:auto;
}
#nav li ul li a {
	float:none;
	display:block;
	margin:0;
	margin-right:-1px;
	background:#6286BD;
}

HTML-код:

<div class="center">
<ul id="nav">
  <li><a href="">Меню 1</a>
    <ul>
      <li><a href="">Подменю 1</a></li>
      <li><a href="">Подменю 2</a></li>
      <li><a href="">Подменю 3</a></li>
    </ul>
  </li>
  <li><a href="">Меню 2</a>
    <ul>
      <li><a href="">Подменю 1</a></li>
      <li><a href="">Подменю 2</a></li>
      <li><a href="">Подменю 3</a></li>
    </ul>
  </li>
  <li><a href="">Меню 3</a>
    <ul>
      <li><a href="">Подменю 1</a></li>
      <li><a href="">Подменю 2</a></li>
      <li><a href="">Подменю 3</a></li>
    </ul>
  </li>
  <li><a href="">Меню 4</a></li>
  <li><a href="">Меню 5</a></li>
</ul>
</div>

IE 8, Opera 9.62, FF 3.5 – проверено, работает!

Пример выпадающего меню без JS!

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong
19

Вертикальное раскрывающееся меню

Автор Jemand

Если на сайте мало места, но очень хочется разместить большое количество пунктов в меню, к нам на помощь приходит вертикальное раскрывающееся меню. Данное меню впишется практически в любой дизайн сайта, конечно при условии визуального изменения под стиль сайта. Ну хватит слов, перейдем к делу, а точнее к коду.

CSS-код:

#menu_body {
background:#81A192;
width:200px
}
#menu_body ul li {
list-style-type:none;
border-bottom:1px solid #fff;
margin-left:-40px;
padding-left:7px
}
#menu_body ul li a {
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none
}
#menu_body ul li ul li {
border:0;
list-style-type:square;
color:#fff;
list-style-position:inside
}
#menu_body ul li ul {
border-top:1px solid #fff;
margin-left:-7px;
padding-left:50px
}

JavaScript: (добавляем в head после CSS)

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
function allclose() {
	for (i=0; i < id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = "none";
	}
}
function openMenu(id){
	for (i=0; i < id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = "none";
		}
	}
	if (document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block"; 
	}
}

В строке 

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');

нужно добавить значений “sub_menu” столько, сколько групп меню будет, т.е. если будет 10 групп раскрывающихся меню, то здесь должны быть прописаны все 10 значений: sub_menu_1′,’sub_menu_2′,’sub_menu_3′,’sub_menu_4′,’sub_menu_5′ и т.д. Соответственно и HTML код должен содержать 10 блоков, иначе будут проблемы а работе.

В <body> добавляем вызов функции:

HTML-код:

<body onload="allclose()">

И в конце само тело нашего меню.

HTML-код:

<div id="menu_body">
<ul>

  <li><a href="#" onclick="openMenu('sub_menu_1');return(false)">menu 1</a> 
      <ul id="sub_menu_1">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>

          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
      </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_2');return(false)">menu 2</a>
      <ul id="sub_menu_2">

          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>

          <li><a href="#">sub menu 7</a></li>
     </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_3');return(false)">menu 3</a>
     <ul id="sub_menu_3">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>

          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
    </ul>
  </li>
</ul>
</div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8 Проверено, работает!
Firefox 3.5.4 Проверено, работает!
Opera 9.64 Проверено, работает!

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong