Форум PHP программистов > Вертикальное меню, с подменю.

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Вертикальное меню, с подменю.

Миша

23.03.2014 - 14:10

Вертикальное меню, с подменю, какие вообще есть варианты реализации?

_____________
Принимаю заказы, писать в ЛС

sergeiss

23.03.2014 - 14:29

Например, accordion в jQuery UI.
Можно на чистом CSS сваять...

Можно сделать "сложный аккордеон" по типу того, как в jQuery UI, тоже на jQuery, но с большим количеством вложенностей...

Выбирай на вкус

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Миша

24.03.2014 - 10:00

И опять я накосячил. Ъ Должно было получиться трёхуровневое меню, второй - вниз, третий - вправо. Но блин третий не работает.


<html>
<head>
       <link rel="stylesheet" type="text/css" href="styl.css">


<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
startList = 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";
	}
}
window.onload=startList;
</script>



</head>

<body>

<div id="menu_body">
	<ul>
		<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>
			<ul id="sub_menu_1">
				<li><a href="#">Подпункт №1</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>
			<ul id="sub_menu_2">
				<li><a href="#">Подпункт №1</a>
             <span> 
               <a href="#">1Ссылка</a>
               <a href="#">Ссылка</a>
               <a href="#">Ссылка</a>  
            </span>
</li>
				<li><a href="#">Подпункт №2</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>
			<ul id="sub_menu_3">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
				<li><a href="#">Подпункт №3</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

#menu_body li ul {
	display: none;
	}
#menu_body li:hover ul, #menu_body li.over ul {
	display: block;
	}
 #menu_body {
    background:#171717;
    width: 200px;
    }
#menu_body a {
	display: block;
	width: 185px;
	height: 24px;
	padding-left: 15px;
	} 

#menu_body ul li {
    list-style-type: none;
    border-bottom: 1px solid #fff;
    margin-left: -40px;
    padding-left: 0px;
    } 

#menu_body ul li a {
    color: #fff;
    text-decoration: none;
	font-size: 115%;
	font-family: Georgia;
    } 

#menu_body ul li a:hover {
    color: #fff;
    text-decoration: none;
	background:#424242;
    } 

#menu_body ul li ul li {
    border: 0;
    list-style-type: none;
    color: #fff;
    list-style-position: inside;
	background:#7F7F7F;
    } 

#menu_body ul li ul{
    border-top: 1px solid #fff;
    margin-left: -10px;
    padding-left: 50px;
    }

#menu li span {
  position: absolute;
  left: 160px;
  margin-top: -20px;
  display: none;
	}
#menu li:hover span { display: block;}

_____________
Принимаю заказы, писать в ЛС

Быстрый ответ:

Здесь расположена полная версия этой страницы.