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

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

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

Страница 1 из 1
1

METRO2033

Группа: Проверенный

Собщений: 580

Репутация: 50

Наград: 5

Замечания : 0%

# 1 12:09

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

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

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

Код

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

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

Код

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

Код

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

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

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

Код

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

Прикрепления: 1476006.png (9.1 Kb) · 0655007.png (5.5 Kb)

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

Страница 1 из 1
1

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