Переходим на новый уровень! Надоели меню с использованием скриптов и картинок которые вечно грузят сайт, а ведь нам нужно только легкое красивое меню для ucoz, не только красивое но и многофункциональное. Представляю вам меню с вышеуказанными качествами. C помощью стилей и новых свойств CSS3, не используя javascript и изображения мы получим новое меню для ucoz. При наведении мышкой на категорию, меню плавно раздвигается(меню с эффектом аккордиона).

1. Установка раздвижного меню один кодом.

Вставляем в любое место на сайте, где хотим видеть меню:

Code

2. Установка по разделам:

2.1 Вставляем в CSS:

Code

#accordion .item {
  width: 400px;
  height: 30px;
  overflow: hidden;

  border: 1px solid #ccc;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  margin-bottom: 2px;
  }
  #accordion h3 {
  display: block;
  height: 20px;
  line-height: 20px;
  margin: 0px 0px 5px 0px;
  background: #e6e6e6;
  padding: 5px;
  color: #1e1e1e;
  text-decoration: none;
  }
  #accordion p {
  height: 150px;
  padding: 5px;
  }
  #accordion div:hover h3 {
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  }

  .aleft {
  float:left;
  width:90px;
  }
  .aright {
  float:left;
  width:90px;
  }
  .arsip li {
  float: left;
  width: 120px;
  }
  .clearfix {
  display: inline-block;
  }

  #accordion .item {
  transition: height ease-in-out 500ms; /* wallaby.ucoz.ru css3 transition */
  -o-transition: height ease-in-out 500ms;
  -moz-transition: height ease-in-out 500ms;
  -webkit-transition: height ease-in-out 500ms;
  }
  #accordion div:hover {
  height: 180px;
  }

  #accordion .item {
  width: 210px;
  height: 30px;
  overflow: hidden;

  transition: height ease-in-out 500ms; /* wallaby.ucoz.ru css3 transition */
  -o-transition: height ease-in-out 500ms;
  -moz-transition: height ease-in-out 500ms;
  -webkit-transition: height ease-in-out 500ms;

  border: 1px solid #ccc;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  margin-bottom: 2px;
  }
  #accordion h3{
  display: block;
  height: 20px;
  line-height: 20px;

  background: #e6e6e6;
  padding: 5px;
  color: #1e1e1e;
  text-decoration: none;
  }
  #accordion p {
  height: 150px;
  padding: 5px;
  }
  #accordion div:hover {
  height: 180px;
  }
  #accordion div:hover h3 {
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  }

2.2 По месту положения раздвижного меню ucoz:

Code

<div id="accordion">
<div class="item">
<h3>WallaBy.ucoz.ru</h3>
  </div>
<div class="item">
  <h3>Шаблоны для ucoz</h3>
  Шаблоны для ucoz - это дизай для вашего сайта. Еще их называют оформлением или чаще всего темой.<br>
<a href="http://wallaby.ucoz.ru/">Тут ваша ссылка</a>
  </div>
  <div class="item">
<h3>Скрипты для ucoz</h3>
<p>Скрипты для ucoz - это частицы HTML кода, которые автоматизируют некоторые процессы, действия которых без скриптов пришлось бы делать очень долго вручную.</p>
  </div>
  <div class="item">
<h3>Графика для сайта</h3>
  </div>
  <div class="item">
<h3>Форум</h3>
<a href="http://wallaby.ucoz.ru/forum">Форум WallaBy</a>
  </div>
</div>

Quote

Лучше используйте 1 вариант установки, быстро и без хлопот.

Quote

Как изменить ширину и высоту меню?

Если такой вопрос возникнет, поиграйтесь с px в CSS:

Code

#accordion .item {
width: 210px; // Ширина раздвижного меню
height: 30px; // Высота закритого раздвижного меню
overflow: hidden;

Категория Меню для ucoz | Добавил: Wallaby | Просмотров: 5151 |

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

по актуальности

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

Профиль

Привет: Гость
Фото профиля wallaby

Связь с администратором
Регистрация
Забыл пароль
ВХОД
Добавить новость!

Поиск

Новое раздвижное меню для ucoz

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

Шаблоны для ucoz

Скрипты для ucoz

Cinema 4D

Графика для uCoz