Навигатор

Шаблоны для Joomla
Шаблоны для uCoz
Категории раздела
Профиль для ucoz [9]
Новый профиль для ucoz, мини профиль для ucoz, скрипт для ucoz профиль, профиль для сайта ucoz
Ajax для ucoz [13]
Ucoz ajax, ajax окна для ucoz, скрипты ajax для ucoz, новые ajax окна для ucoz, новый вид ajax ucoz
Скрипты для ucoz [128]
скачать скрипты для ucoz, скрипты ucoz
Меню для ucoz [45]
меню для ucoz, горизонтальное меню для ucoz, раздвижное меню ucoz, вертикальное, выпадающие меню ucoz
Календари для ucoz [20]
скрипт календарь cs, скрипт для ucoz календарь, календарь для ucoz cs 1.6, календари ucoz
Часы для ucoz [31]
часы для ucoz, часы для ucoz cs 1.6
Статистика для ucoz [11]
статистика cs для ucoz
Форма входа для ucoz [15]
форма входа для ucoz
Переключатели для ucoz [9]
Переключатели страниц для ucoz
Шапки для ucoz [13]
шапки для ucoz cs 1.6
Интересное
Мини профиль + Форма входа
Рейтинг: 66779
Красивое горизонтальное меню для ucoz
Рейтинг: 54064
Мини-чат для ucoz
Рейтинг: 48510
Скрипт мониторинга cs серверов
Рейтинг: 43544
Слайдер новостей для uCoz
Рейтинг: 18600
  1. Главная
  2. Скрипты для ucoz
  3. Меню для ucoz
  4. Анимированное меню для ucoz

Анимированное меню для ucoz

Анимированное меню для ucoz
 
Меню для ucoz - Анимированное меню для ucoz
 
Замечательное анимированное меню, с помощью библиотеки Mootools для сайтов ucoz.

Установка меню ucoz много времени не займет. Начнём!

После <head> и перед </head>:

Code
<script type="text/javascript" src="http://wallaby.ucoz.ru/js_template/mootools.js"></script>
<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', '#333333');
  toggler.setStyle('background', '#F7F1E5');
  },
  onBackground: function(toggler, element){
  toggler.setStyle('color', '#333');
  toggler.setStyle('background', '#E8D7B7');
  }
  }, $('menu'));
});  
</script>

В Ваш CSS:

Code
#menu h3{
  background:#E8D7B7;
  padding:4px;
  font-size:12px;
  color:#000;
  border-bottom:solid 2px #9C8B7B;
  cursor:pointer;
  font-weight:normal;
  text-transform:uppercase
}
#menu ul{
  list-style:none
}
#menu li{
  border-bottom:solid 1px #DEDEDE
}
#menu li a{
  padding:3px 6px;
  display:block;
  color:#5CA8CC;
  text-decoration:none
}
#menu li a:hover{
  background:#EFEFEF
}

Этот код, в то место, где хотите видеть Ваше меню. Обычно это глобальные блоки:

Code
<div id="menu">
  <h3 class="toggler menusection">О компании</h3>
  <ul class="element menusection">
  <li><a href="">Ссылка 1</a></li>
  <li><a href="">Ссылка 2</a></li>
  <li><a href="">Ссылка 3</a></li>
  <li><a href="">Ссылка 4</a></li>
  </ul>
  <h3 class="toggler menusection">Статьи</h3>
  <ul class="element menusection">
  <li><a href="">Ссылка 1</a></li>
  <li><a href="">Ссылка 2</a></li>
  <li><a href="">Ссылка 3</a></li>
  <li><a href="">Ссылка 4</a></li>
  <li><a href="">Ссылка 5</a></li>
  <li><a href="">Ссылка 6</a></li>
  </ul>
  <h3 class="toggler menusection">Работы</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>

 


ВАЖНО!
Если хотите задать ширину меню, как на скриншоте, тогда в CSS нужно добавить еще это:

 

Code
#box{
  width:500px; 
  border:solid 1px #9C8B7B;
  margin:10px auto
}


500px - ширина меню. 

Тогда Код Вашего меню будет выглядить так:

Code
<div id="box">
  <div id="menu">
  <h3 class="toggler menusection">О компании</h3>
  <ul class="element menusection">
  <li><a href="">Ссылка 1</a></li>
  <li><a href="">Ссылка 2</a></li>
  <li><a href="">Ссылка 3</a></li>
  <li><a href="">Ссылка 4</a></li>
  </ul>
  <h3 class="toggler menusection">Статьи</h3>
  <ul class="element menusection">
  <li><a href="">Ссылка 1</a></li>
  <li><a href="">Ссылка 2</a></li>
  <li><a href="">Ссылка 3</a></li>
  <li><a href="">Ссылка 4</a></li>
  <li><a href="">Ссылка 5</a></li>
  <li><a href="">Ссылка 6</a></li>
  </ul>
  <h3 class="toggler menusection">Работы</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>


Как видим мы добавили в начале меню <div id="box"> 

 и вконце закрыли</div>. Теперь Вам не составит труда настроить меню под себя. 

Вопросы и замечания оставлять в комментариях. Спасибо!
Категория Меню для ucoz | Добавил: Wallaby | Просмотров: 3055 |

Комментарии отсутствуют

по актуальности
Чтобы оставить комментарий, необходимо или