Скрипты для сайтов — круговое меню на CSS.
Скрипты для сайтов — круговое меню на CSS
<style>
.rmenu{
width:800px;
height:52px;
position:relative;
top:200px;
left:100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.ritem{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.rlink{
left:2px;
top:2px;
position:absolute;
width:48px;
height:48px;
}
.icon_home{
background:transparent url(images/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(images/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(images/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(images/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(images/photos.png) no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
background:transparent;
display:none;
}
.item_content h2{
color:#aaa;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
.item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content p {
background-color:transparent;
display:none;
}
.item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}
</style>
<div class="rmenu">
<div class="ritem">
<a class="rlink icon_mail"></a>
<div class="item_content">
<h2>Контакты</h2>
<p>
<a href="#">Почта</a>
<a href="#">Twitter</a>
<a href="#">Facebook</a>
</p>
</div>
</div>
<div class="ritem">
<a class="rlink icon_help"></a>
<div class="item_content">
<h2>Помощь</h2>
<p>
<a href="#">FAQ</a>
<a href="#">Поддержка</a>
<a href="#">Тикеты</a>
</p>
</div>
</div>
<div class="ritem">
<a class="rlink icon_find"></a>
<div class="item_content">
<h2>Поиск</h2>
<p>
<input type="text"></input>
<a href="">ОК</a>
</p>
</div>
</div>
<div class="ritem">
<a class="rlink icon_photos"></a>
<div class="item_content">
<h2>Галерея</h2>
<p>
<a href="#">Категории</a>
<a href="#">Архивы</a>
<a href="#">Лучшее</a>
</p>
</div>
</div>
<div class="ritem">
<a class="rlink icon_home"></a>
<div class="item_content">
<h2>MILKIMAUS</h2>
<p>
<a href="">Услуги</a>
<a href="">Портфолио</a>
<a href="">Цена</a>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="jquery-css-transform.js" type="text/javascript"></script>
<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.ritem').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.rlink',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'268px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.rlink',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>
<script type="text/javascript" src="/templates/pcv/js/pcvector.js"></script>
Проверить работу скрипта можно в РЕДАКТОРЕ
Обмен визитами — бесплатная раскрутка сайта.
Самый простой способ, это по старинке, обмен визитами через ввод адреса сайта в форму:
Ссылка не должна превышать 200 символов и должна обязательно являться URL адресом. Без пробелов.
***
Трейн-чекс Уроки WEB программирования.
- ПОДДЕРЖАТЬ ПРОЕКТ на WebMoney
- WEST-HOSTER
- ПОРТАЛ СООБЩЕСТВА 🕶️
- HTML JS CSS РЕДАКТОР
- ШРИФТЫ ДЛЯ САЙТОВ
- ПРОМПТЫ ДЛЯ ШЕДЕВРУМА
- Символ неразрывного пробела
- Скрипт считывания клавиш
- Файлы куки
- AJAX счётчик кликов
- Запрет кэширования JS и PHP
- Координаты курсора JS
- Числа от 1 до 10 на JS
- Перевести двоичный код в кратный на JS
- CSS на JavaScript
- Новые теги HTML
- Может ли HTML 6 заменить JavaScript
- HTML форма без перезагрузки страницы
- Смайлы эмоджи — ГЕНЕРАТОР
- Форматы изображений
- Скрипт AJAX лайков и дизлайков
- Горячие клавиши
- Скачать изображение в CANVAS
- Какими будут сайты будущего?
- Что делает администратор сайта
- Девушка фурри Милка Маус
- CMS движки для сайтов
Мануалы PHP
- Мануалы PHP — Фильтры
- Мануалы PHP — Узнать IP адрес
- Мануалы PHP — Файлы папки директории
- Мануалы PHP — Вывод файлов scandir()
- Мануалы PHP — Отправка данных из формы
- Мануалы PHP — Запись данных в файл
- Мануалы PHP — Запрет повторной отправки формы
- Мануалы PHP — Дата и время
- Мануалы PHP — Отправка E-mail
- Мануалы PHP — Работа с изображениями
- Мануалы PHP — Вход по паролю
- Отправка формы AJAX
- Геолокация на PHP, узнать город
- Выполнение PHP скрипта по клику
- Маскировка ссылок
- Таблица умножения
Анимация JS
- Шифровка текста на JS
- Безумный текст
- Компрессор кода
- Уведомления на рабочий стол
- Перезагрузка на JS и PHP
- Рейтинг на JS и PHP
- Виджет комментариев на PHP
- Рекламный баннер на CSS
- Запрет копирования
- Узнать код клавиш
- Скрипт кода клавиш
- Конвертер кода в спецсимволы
- Бесконечный алерт
- Вывод случайных фраз
- Откуда пришёл посетитель на JS
- CSS type radio checkbox
- Эффекты с текстом
- Посетители онлайн на PHP
- Cookie счётчик посещений
- Анимация текста
- Type — range
- Лабиринт на JS
- Дата и время на JS
- CSS меню блокнот
- CSS меню книжная полка
- CSS вращающийся баннер
- JavaScript азбука морзе
- JavaScript копирайт
- JavaScript анимация текста
- JavaScript звуки
- Кнопка вверх
- Подсчёт символов на JavaScript
- Работа с куками на PHP
AXAJ -JS
- AJAX счётчик кликов
- Генератор случайных чисел
- PHP счётчик страниц
- PHP запись файлов
- Дата посещения страницы на PHP
- Счётчик лайков на PHP
- Дата изменения страницы
- Игра JS — угадай число
- Круговое меню для сайта
- Навигатор
- Запрет копирования
- Вычислить дату на JS
- Кнопка на CSS
- view-source: исходный код
- Анимация JS
- Время проведённое на сайте
- Календарь JS
- Снег для сайта
- Анимация волны
- Добавить в избранное
- Срок жизни сайта
- Таймер на JS
- Блокировка мыши и клавиатуры
- Приветствие по времени суток
- JS время
- Яндекс поиск