Выпадающее/Выезжающее карты меню для сайта ucoz
                                                                                                                                                                                
Приветствую Вас Гость | 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:
/ --------------- \
/ Как нужно качать? \

Категория: Скрипты для ucoz | Просмотров: 1203 | Добавил: drak-zp | Рейтинг: 5.0/5 | Загрузок: 33


avatar


Профиль
Привет: Гость


Гость, мы рады вас видеть. Пожалуйста зарегестрируйтесь или авторизуйтесь!
Топ материалов
Статистика
Онлайн всего: 9
Гостей: 9
Пользователей: 0






Анализ веб сайтов
Друзья сайта
Хочу в друзья
Друзья сайта h1tan.ru Друзья сайта h1tan.ru
Друзья сайта h1tan.ru Друзья сайта h1tan.ru