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

0 670

Категория: Ucoz » Меню для ucoz Опубликовал: DavGev Дата: 20.05.2013

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

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

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

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

В Ваш CSS:

#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
}

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

<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 нужно добавить еще это:

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

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

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

<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>

Источник материала: Не указан.

Всего комментариев: 0