Навигатор

Шаблоны для 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
Интересное
Мини профиль + Форма входа
Рейтинг: 65602
Красивое горизонтальное меню для ucoz
Рейтинг: 53695
Мини-чат для ucoz
Рейтинг: 48089
Скрипт мониторинга cs серверов
Рейтинг: 43250
Слайдер новостей для uCoz
Рейтинг: 18600

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

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

 

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

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

 

Code
<style>
#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;  
  }</style>
<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>

 

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 | Просмотров: 5094 |

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

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