Приветствую Вас Прохожий | RSS Суббота, 03.12.2016, 03:21
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 3
Гостей: 2
Пользователей: 1
LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Комплект модный меню! (Вер. Гор.)

Комплект модный меню! (Вер. Гор.)
Представляю вам комплект модных меню для вашего сайта, в комплекте горизонтальная и вертикальная версия, меню с эффектом наведения, при наведении увеличивается кнопка!
Код работает через css, Можно изменить все цвета!


Установка: Вставьте данные коды на нужном месте, что указаны:

Горизонтальная версия

Вставьте в css код который ниже:
Code
/* hrizontal menu */
.menuHolder {position:relative; float:left; overflow:hidden; font:normal bold 11px/35px verdana, sans-serif;}

.menuHolder .shadow {height:10px; width:90%; left:5%; top:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
ul.menu {margin:0; list-style:none; display:block; float:left; height:100px; position:relative; padding:0 60px;}

ul.menu li {margin:0 5px 0 0; float:left;}

ul.menu li a {background:#aaa; color:#ddd; padding:0 10px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);

-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;

-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

}
ul.menu li a.red {background:#a00;}
ul.menu li a.orange {background:#da0;}
ul.menu li a.yellow {background:#aa0;}
ul.menu li a.green {background:#060;}
ul.menu li a.blue {background:#00a;}
ul.menu li a.indigo {background:#2b0062;}
ul.menu li a.violet {background:#682bc2;}

ul.menu li a:hover {background:#aaa; color:#fff; padding:10px 10px 0 10px;}

ul.menu li a.red:hover {background:#c00;}
ul.menu li a.orange:hover {background:#fc0;}
ul.menu li a.yellow:hover {background:#cc0;}
ul.menu li a.green:hover {background:#080;}
ul.menu li a.blue:hover {background:#00c;}
ul.menu li a.indigo:hover {background:#5b1092;}
ul.menu li a.violet:hover {background:#8a2be2;}

А это сам меню, вставьте на верхней страниц сайта:
Code
<h2>Horizontal Tabs Menu</h2>
<div class="menuHolder">
<ul class="menu">
<li><a href="" class="red">PRODUCTS</a></li>
<li><a href="" class="orange">SERVICES</a></li>
<li><a href="" class="yellow">DEMOS</a></li>
<li><a href="" class="green">MENUS</a></li>
<li><a href="" class="blue">LAYOUTS</a></li>
<li><a href="" class="indigo">CONTACT</a></li>
<li><a href="" class="violet">PRIVACY</a></li>
</ul>
  <div class="shadow"></div>
</div>
<br class="clear" />



Вертикальное меню

Вставьте в сss код который ниже:
Code
/* vertical menu */
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;}

.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}

ul.menu2 li {margin:5px 0 0 0;}

ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

ul.menu2 li a.red {background:#a00;}
ul.menu2 li a.orange {background:#da0;}
ul.menu2 li a.yellow {background:#aa0;}
ul.menu2 li a.green {background:#060;}
ul.menu2 li a.blue {background:#00a;}
ul.menu2 li a.indigo {background:#2b0062;}
ul.menu2 li a.violet {background:#682bc2;}

ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}

ul.menu2 li a.red:hover {background:#c00;}
ul.menu2 li a.orange:hover {background:#fc0;}
ul.menu2 li a.yellow:hover {background:#cc0;}
ul.menu2 li a.green:hover {background:#080;}
ul.menu2 li a.blue:hover {background:#00c;}
ul.menu2 li a.indigo:hover {background:#5b1092;}
ul.menu2 li a.violet:hover {background:#8a2be2;}


Создайте новый блок, и вставьте код меню который ниже:
Code
<h2>Vertical Tabs Menu</h2>
<div class="menuHolder2">
<ul class="menu2">
<li><a href="" class="red">Главная</a></li>
<li><a href="" class="orange">Форум</a></li>
<li><a href="" class="yellow">Новости</a></li>
<li><a href="" class="green">Блог</a></li>
<li><a href="" class="blue">Картинки</a></li>
<li><a href="" class="indigo">Музыка</a></li>
<li><a href="" class="violet">Видео</a></li>
</ul>
  <div class="shadow"></div>
</div>
<br class="clear" />
Автор\Источник: nyrodev.com

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1246 | Комментарии: 8 | Рейтинг: 4.6/5 | |Категория: Скрипты Разное | Добавил: STAFF | Дата: 24.06.2011 | Скачали: 0 | Теги: комплект, (Вер. Гор.), меню, Модный
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 8
-2   Спам
7 Спец-клан   Дата: 27.06.2011  Время: 11:44   [№ 9229]
Что бы по центру было , нужно сделать: написать на верх вот этого :

"<div class="menuHolder">
<ul class="menu">
<li><a href="" class="red">PRODUCTS</a></li>
<li><a href="" class="orange">SERVICES</a></li>
<li><a href="" class="yellow">DEMOS</a></li>
<li><a href="" class="green">MENUS</a></li>
<li><a href="" class="blue">LAYOUTS</a></li>
<li><a href="" class="indigo">CONTACT</a></li>
<li><a href="" class="violet">PRIVACY</a></li>
</ul>
<div class="shadow"></div>
</div>
<br class="clear" />"

Вот в это: " <div id="content"> "

Ну вот и получается:


"<div id="content">
<div class="menuHolder">
<ul class="menu">
<li><a href="" class="red">PRODUCTS</a></li>
<li><a href="" class="orange">SERVICES</a></li>
<li><a href="" class="yellow">DEMOS</a></li>
<li><a href="" class="green">MENUS</a></li>
<li><a href="" class="blue">LAYOUTS</a></li>
<li><a href="" class="indigo">CONTACT</a></li>
<li><a href="" class="violet">PRIVACY</a></li>
</ul>
<div class="shadow"></div>
</div>
<br class="clear" />"

8 ygeorge   Дата: 09.07.2011  Время: 12:42   1 [№ 9413]
К сожалению, так не получается

3 ygeorge   Дата: 24.06.2011  Время: 16:01   [№ 9183]
А как сделать чтоб горизонтальное меню было по центру, а не в левом углу?

4 mr_garga   Дата: 24.06.2011  Время: 16:33   1 [№ 9184]
измени float:left на float:center

5 ygeorge   Дата: 24.06.2011  Время: 17:24   2 [№ 9186]
делал так, к сожалению не получается

6 STAFF   Дата: 24.06.2011  Время: 19:12   2 [№ 9190]
Это не изменит ))))
Через часик дома буду, сделаю)

1 Elik54245424   Дата: 24.06.2011  Время: 10:27   [№ 9179]
Мир, а может ты ошибся ? =) и надо было написать Комплект модных меню ? =)

2 STAFF   Дата: 24.06.2011  Время: 12:37   1 [№ 9181]
Ошибок нет!
Из начале этот меню был сделан автором, только горизонтальная версия!
Поэтому я написал названия меню! который автор сам написал!
Надо было по отдельности добавить, а я сразу с комплектом, и поэтому так и написал!


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Куплю сайты с ТИЦ/PR (п...

9

2 Предлагаю услуги для ан...

0

3 Предлагаю услуги по про...

0

4 Комплексный прогон сайт...

51

5 Сайт онлайн фильмов на ...

1

6 Проблема с таблицей

9

7 Отредактировать фото

2

8 Уже все перепробовал )

1

9 Скрипт "Нравится&q...

3

10 Меню для сайта

3


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru