Приветствую Вас Гость | RSS
Меню
Главная » Файлы » Все для Ucoz » Скрипты для ucoz
Выпадающее/Выезжающее карты меню для сайта ucoz
Добрый день всем вебмастерам,сегодня мы рассмотрим отличное выпадающее меню в виде карт для сайта ucoz.Как ни странно меню ужасно легко устанавливается и имеет очень гибкое редактирование.Вы можете поставить Ваше выезжающее меню где угодно,не задев других частей Вашего веб дизайна. 

И так, начнем с установки:
Если Вы хотите вставить выпадающее меню в определенном месте Вашей html страницы, Вам нужно вставить этот код:
Код
<meta charset="utf-8">
<style type="text/css">
.menu {position:relative; height:40px; font-family: arial, sans-serif; width:550px; margin:450px auto 0 auto; background:url(http://delaisait.ucoz.ru/script/menu/img/1/futer.png) no-repeat left bottom; border-bottom:3px solid #ddd;}
.container {height:50px; width:160px; overflow:hidden; position:absolute; top:-30px; padding-top:20px; z-index:1;
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
.menu .p1 {left:8px;}
.menu .p2 {left:193px;}
.menu .p3 {left:378px;}
.menu .p4 {left:563px;}

.container:hover {height:452px; top:-432px;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.container div h3 {padding:0; margin:0; line-height:40px; color:#fff; font-size:18px; text-align:center; font-style:italic;}
.container div h4 {padding:50px 15px 25px 15px; margin:0; line-height:18px; color:#fc6; font-size:14px; text-align:center; font-style:italic;}
.container div ol li {font-size:12px; color:#000; line-height:20px;}
.container div ol li a {margin:0; line-height:18px; color:#000; font-size:12px; text-align:left; text-decoration:none;}
.container div ol li a:hover {color:#fff;}
.container div img {display:block; border:0; margin:30px auto;}

.container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.card {
width:160px; height: 380px;
-webkit-transition: 1s 0s;
-moz-transition: 1s 0s;
-ms-transition: 1s 0s;
-o-transition: 1s 0s;
transition: 1s 0s;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.obverse {
position: absolute;
width:160px; height: 362px;
background:#036;  
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.reverse {
position: absolute;
width:160px; height: 362px;
background:#060;  
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.container:hover .card {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>

<div class="menu">
<div class="container p1">
<div class="card">
<div class="obverse">
<h3>Фото</h3>
<img src="http://delaisait.ucoz.ru/script/menu/img/1/foto.png" alt="">
</div>
<div class="reverse">
<h4>Лучшее</h4>
<ol>
<li><a href="#url">Дом</a></li>
<li><a href="#url">Работа</a></li>
<li><a href="#url">Рыбалка</a></li>
<li><a href="#url">В гостях</a></li>
<li><a href="#url">Животные</a></li>
<li><a href="#url">Мой город</a></li>
</ol>
</div>
</div>
</div>
<div class="container p2">
<div class="card">
<div class="obverse">
<h3>Музыка</h3>
<img src="http://delaisait.ucoz.ru/script/menu/img/1/muzik.png" alt="">
</div>
<div class="reverse">
<h4>Вся музыка</h4>
<ol>
<li><a href="#url">Транс</a></li>
<li><a href="#url">Попса</a></li>
<li><a href="#url">Рок</a></li>
<li><a href="#url">Реп</a></li>
<li><a href="#url">Классика</a></li>
</ol>
</div>
</div>
</div>
<div class="container p3">
<div class="card">
<div class="obverse">
<h3>Игры</h3>
<img src="http://delaisait.ucoz.ru/script/menu/img/1/games.png" alt="">
</div>
<div class="reverse">
<h4>Все игры</h4>
<ol>
<li><a href="#url">Контра CS</a></li>
<li><a href="#url">Контра CSS</a></li>
<li><a href="#url">Контра GO</a></li>
<li><a href="#url">F.E.A.R</a></li>
<li><a href="#url">NFS</a></li>
<li><a href="#url">DOOM</a></li>
</ol>
</div>
</div>
</div>
</div>



Но если захотели,чтобы выпадающее меню стояло допустим на всех страницах Каталога файлов,Вам нужно сделать следующее:
Этот код как бы для подключения СSS вставляем между тегами :
Код
<style type="text/css">
.menu {position:relative; height:40px; font-family: arial, sans-serif; width:550px; margin:450px auto 0 auto; background:url(http://delaisait.ucoz.ru/script/menu/img/1/futer.png) no-repeat left bottom; border-bottom:3px solid #ddd;}
.container {height:50px; width:160px; overflow:hidden; position:absolute; top:-30px; padding-top:20px; z-index:1;
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
.menu .p1 {left:8px;}
.menu .p2 {left:193px;}
.menu .p3 {left:378px;}
.menu .p4 {left:563px;}

.container:hover {height:452px; top:-432px;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.container div h3 {padding:0; margin:0; line-height:40px; color:#fff; font-size:18px; text-align:center; font-style:italic;}
.container div h4 {padding:50px 15px 25px 15px; margin:0; line-height:18px; color:#fc6; font-size:14px; text-align:center; font-style:italic;}
.container div ol li {font-size:12px; color:#000; line-height:20px;}
.container div ol li a {margin:0; line-height:18px; color:#000; font-size:12px; text-align:left; text-decoration:none;}
.container div ol li a:hover {color:#fff;}
.container div img {display:block; border:0; margin:30px auto;}

.container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.card {
width:160px; height: 380px;
-webkit-transition: 1s 0s;
-moz-transition: 1s 0s;
-ms-transition: 1s 0s;
-o-transition: 1s 0s;
transition: 1s 0s;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.obverse {
position: absolute;
width:160px; height: 362px;
background:#036;  
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.reverse {
position: absolute;
width:160px; height: 362px;
background:#060;  
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.container:hover .card {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>

Между тегами <body> вставляем код скрипта выпадающего меню:
Код
<div class="menu">
<div class="container p1">
<div class="card">
<div class="obverse">
<h3>Фото</h3>
<img src="http://delaisait.ucoz.ru/script/menu/img/1/foto.png" alt="" />
</div>
<div class="reverse">
<h4>Лучшее</h4>
<ol>
<li><a href="#url">Дом</a></li>
<li><a href="#url">Работа</a></li>
<li><a href="#url">Рыбалка</a></li>
<li><a href="#url">В гостях</a></li>
<li><a href="#url">Животные</a></li>
<li><a href="#url">Мой город</a></li>
</ol>
</div>
</div>
</div>
<div class="container p2">
<div class="card">
<div class="obverse">
<h3>Музыка</h3>
<img src="http://delaisait.ucoz.ru/script/menu/img/1/muzik.png" alt="" />
</div>
<div class="reverse">
<h4>Вся музыка</h4>
<ol>
<li><a href="#url">Транс</a></li>
<li><a href="#url">Попса</a></li>
<li><a href="#url">Рок</a></li>
<li><a href="#url">Реп</a></li>
<li><a href="#url">Классика</a></li>
</ol>
</div>
</div>
</div>
<div class="container p3">
<div class="card">
<div class="obverse">
<h3>Игры</h3>
<img src="http://delaisait.ucoz.ru/script/menu/img/1/games.png" alt="" />
</div>
<div class="reverse">
<h4>Все игры</h4>
<ol>
<li><a href="#url">Контра CS</a></li>
<li><a href="#url">Контра CSS</a></li>
<li><a href="#url">Контра GO</a></li>
<li><a href="#url">F.E.A.R</a></li>
<li><a href="#url">NFS</a></li>
<li><a href="#url">DOOM</a></li>
</ol>
</div>
</div>
</div>
</div>


И так, что Вы можете отредактировать?
Да практически всё,начиная от названия и пути ссылки, заканчивая самой картой(картинка,цвет)
Выбираем что Вы хотите изменить,ищем данный код во 2 части и редактируем.Легче и быть не может.
По всем вопросом обращайтесь в форме комментариев ниже.Удачи! Пример Работы выпадающего меня в виде карт для ucoz:

Фото

Лучшее

  1. Дом
  2. Работа
  3. Рыбалка
  4. В гостях
  5. Животные
  6. Мой город

Музыка

Вся музыка

  1. Транс
  2. Попса
  3. Рок
  4. Реп
  5. Классика

Игры

Все игры

  1. Контра CS
  2. Контра CSS
  3. Контра GO
  4. F.E.A.R
  5. NFS
  6. DOOM
/ --------------- \
/ Как нужно качать? \
Категория: Скрипты для ucoz | Просмотров: 1595 | Добавил: drak-zp | Рейтинг: 5.0/6 | Загрузок: 42



UcozВконтакте
Всего комментариев: 0
Войдите:
avatar
-->

Реклама
Топ материалов
"Все материалы на сайте предоставлены исключительно в ознакомительных целях.Администрация сайта ответственности не несёт."
H1tan.ru (2012-2015)
Конструктор сайтов - uCoz