Код | $(document).ready(function(){
$('.panel ul li ul').hide();
$('.panel ul li:has(ul)> a').click(function() {
$(this).parent().find('ul').slideToggle();
return false;
});
$('.panel ul li ul li ul li').hide();
$('.panel ul li ul li:has(ul)> a').click(function() {
$(this).parent().find('li').slideToggle();
return false;
});
|
Код |
<div class="panel">
<ul class="rigthmenu"> <li><a href="litlleschool.php">Начальный уровень</a> <ul> <li><a href="lclear.php">С нуля</a> <ul> <li><a href="rainbow.php" class="link">Радужная абстракция</a></li> <li><a href="smile.php" class="link">Cмайлик</a></li> <li><a href="abstr.php" class="link">Черно-белая абстракция</a></li> <li><a href="list.php" class="link">Тетрадный лист</a></li> </ul> </li> <li><a href="lstart.php">Знакомство с Gimp</a> <ul> <li><a href="tupanel.php" class="link">Панель инструментов</a></li> <li><a href="tuwin.php" class="link">Рабочее пространство</a></li> </ul> </li> <li><a href="lphoto.php">Обработка фотографий</a> <ul> <li><a href="insky.php" class="link">Взгляд неба</a></li> <li><a href="makeup.php" class="link">Нанесение макияжа</a></li> <li><a href="hair.php" class="link">Перекрашиваем волосы</a></li> <li><a href="linzav.php" class="link">Меняем цвет глаз.Часть 2</a></li> <li><a href="linza.php" class="link">Меняем цвет глаз.Часть 1</a></li> <li><a href="regimsmeshivaniya.php" class="link">Режим смешивания</a></li> <li><a href="object.php" class="link">Выделение главного объекта</a></li> <li><a href="romashka.php" class="link">Выборочное обесцвечивание</a></li> <li><a href="cosmetic.php" class="link">Устранение дефектов кожи</a></li> <li><a href="redeyes.php" class="link">Устранение эффекта красных глаз</a></li> <li><a href="chelka.php" class="link">Удлиняем челку</a></li> <li><a href="svet.php" class="link">Работа со светом</a></li> </ul> </li> </ul> </li> <li><a href="mediumschool.php">Средний уровень</a> <ul> <li><a href="mclear.php">С нуля</a> <ul> <li><a href="mouse.php" class="link">Мышь</a></li> <li><a href="body.php" class="link">Человеческое тело</a></li> <li><a href="mult.php" class="link">Мультяшный пейзаж</a></li> <li><a href="qbist.php" class="link">Q-bist</a></li> <li><a href="lenta.php" class="link">Георгиевская ленточка</a></li> <li><a href="cos.php" class="link">Космос</a></li> <li><a href="ship.php" class="link">Корабль</a></li> <li><a href="person.php" class="link">Анимэ-девушка</a></li> <li><a href="child.php" class="link">Персонаж</a></li> <li><a href="pazzle.php" class="link">Мозаика</a></li> </ul> </li> <li><a href="mphoto.php">Обработка фотографий</a> <ul> <li><a href="shansow.php" class="link">Силуэты</a></li> <li><a href="make-up.php" class="link">Нанесение макияжа</a></li> <li><a href="ghost.php" class="link">Создание призрака</a></li> </ul> </li> <li><a href="manim.php">Анимация</a> <ul> <li><a href="snow.php" class="link">Cнег</a></li> <li><a href="beam.php" class="link">Урок создания анимированных глаз</a></li> <li><a href="anismail.php" class="link">Анимированный смайлик</a></li> </ul> </li> </ul> </li> <li><a href="highschool.php">Сложный уровень</a> <ul> <li><a href="hclear.php">С нуля</a> <ul> <li><a href="tiger.php" class="link">Тигр</a></li> </ul> </li> <li><a href="hphoto.php">Обработка фотографий</a> <ul> <li><a href="starphoto.php" class="link">Восстановление черно-беорй фотографии</a></li> <li><a href="panorama.php" class="link">Фрагментарная фотография</a></li> <li><a href="build.php" class="link">Запечатление</a></li> <li><a href="color.php" class="link">Раскрашивание черно-белой фотографии</a></li> <li><a href="portret.php" class="link">Векторный рисунок по фотографии</a></li> </ul> </li> <li><a href="hanim.php">Анимация</a> <ul> <li><a href="tree.php" class="link">Наряжаем елку</a></li> <li><a href="ani.php" class="link">Ангел</a></li> <li><a href="clouds.php" class="link">Облака</a></li> </ul> </li> </ul> </li> <li><a href="text.php">Обработка текста</a> <ul> <li><a href="txt.php" class="link">Объемный текст</a></li> <li><a href="shrift.php" class="link">Изучения шрифта</a></li> </ul> </li> <li><a href="web.php">Web</a> <ul> <li><a href="button.php" class="link">Кнопка в стиле crystal</a></li> </ul> </li> <li><a href="video.php">Видеоуроки</a> <ul> <li><a href="videoweb.php" class="link">Подготовка изображения для веб</a></li> <li><a href="videokriv.php" class="link">Работа с кривыми</a></li> <li><a href="videorez.php" class="link">Управление резкостью</a></li> <li><a href="videoface.php" class="link">Лицо</a></li> </ul> </li> </ul>
</div>
|
Код |
.panel ul{
list-style:none;
margin:0 4px;
padding:0 10px;
margin-bottom:4px;
border-left:2px solid #eee;
border-right:2px solid #eee;
border-bottom:2px solid #eee;
}
.panel li ul{
list-style-type: none;
margin: 0;
padding: 0;
display: none;
border:0;
}
.panel li ul li ul {
display: none;
}
.panel li ul li {
margin: 0 0 0 16px;
padding: 0;
}
.panel a{
display: block;
padding: 5px 0px;
text-decoration: none;
color: #000;
font-weight: bold;
}
.links {
margin-top:12px;
margin-left: 125px;
}
.links a{
font-weight: bold;
font-size:1.4em;
color: #fff;
text-decoration:none;
|
Незнаю как сделать двухвложенное меню. Первая вложенность работает, а вот вторую он не показывает. Может кто-то поможет. На примере вот http://gimpforyou.org/abstr.php
|