CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

12

Анимированное вертикальное меню на MooTools

Jemand 11405 ,
JavaScript

1. CSS

* {
	margin: 0;
	padding: 0;
	}
ul {
	list-style: none;
	}
h3 {
	background: #000;
	padding: 4px;
	font-size: 12px;
	color: #000;
	border-bottom: solid 2px #fff;
	cursor: pointer;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	}
#box {
	width: 250px;
	border: solid 1px #fff;
	font-family: Georgia;
	margin: 10px auto;
	}
#menu li {
	border-bottom: solid 1px #DEDEDE;
	text-align: center;
	}
#menu li a {
	padding:3px 6px;
	display:block;
	color:#fff;
	text-decoration:none;
	background: #ccc;
	}
#menu li a:hover {
	background: #666;
	}

2. Подключение MooTools

<script type="text/javascript" src="mootools.js"></script>

3. JavaScript

<script type="text/javascript">
window.addEvent('domready', function(){
	var accordion = new Accordion('h3.menusection', 'ul.menusection', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#fff');
			toggler.setStyle('background', '#000');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#fff');
			toggler.setStyle('background', '#000');
		}
	}, $('menu'));
});
</script>

4. HTML

<div id="box">
	<div id="menu">
		<h3 class="toggler menusection">Пункт №1</h3>
		<ul class="element menusection">
			<li><a href="">Подпункт №1</a></li>
		</ul>
		<h3 class="toggler menusection">Пункт №2</h3>
		<ul class="element menusection">
			<li><a href="">Подпункт №1</a></li>
			<li><a href="">Подпункт №2</a></li>
		</ul>
		<h3 class="toggler menusection">Пункт №3</h3>
		<ul class="element menusection">
			<li><a href="">Подпункт №1</a></li>
			<li><a href="">Подпункт №2</a></li>
			<li><a href="">Подпункт №3</a></li>
		</ul>
    </div>
</div>

Демо

Рекламная пауза

» 12 комментариев

  1. А чет в IE не работает!!!

    Что делать?

  2. Как сделать из него 4х уровневое меню, а не 2х ?

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

  4. Подскажите как сделать чтоб меня при переходе на любую страницу не сворачивалось в исходное положение, а подсвечивало ту страницу на которой находишься.

  5. у меня в IE 9 не работает…. что делать? может кто подскажет…


Оставить комментарий