Навигатор

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

Круглое меню для сайта

Круглое меню для сайта
Необычное меню для сайта ucoz, выполненное в синих и серых тонах. Меню имеет интересный функционал, тестим.
Шаг-1 Установка HTML

Вставляем в нужно для Вас место на сайт.

Code
<div id="menuContainer">
  <ul id="menu">
  <li id="home" class="first"><a href="https://wallaby.ucoz.ru"><b>Home</b></a></li>
  <li id="single"><a href="single.html"><b>Single Level</b></a></li>
  <li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
  <li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
  <li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
  <li id="support"><a href="support.html"><b>Support</b></a></li>
  <li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
  </ul>
  </div>
Шаг-2 Установка CSS

Заходим в П.У - Дизайн - Упр. Дизайном(CSS):

Code
#menuContainer {float:left; left:250px; width:176px; height:176px; position:relative;}

#menu {padding:0; margin:0; width:176px; height:176px; list-style:none; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/grid.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/grid.png', sizingMethod='scale');
}

#menu li a {display:block; width:42px; height:42px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/trans.gif); position:absolute; left:0; top:0; color:#000; font-family:arial, sans-serif; font-size:11px; text-decoration:none;}
#menu li a b {display:block; width:80px; height:80px; position:absolute; left:-9999px; text-align:center;}

#menu li#home a {left:67px; top:0;}
#menu li#single a {left:120px; top:28px;}
#menu li#dropdown a {left:134px; top:86px;}
#menu li#dropline a {left:96px; top:131px;}
#menu li#flyout a {left:38px; top:131px;}
#menu li#support a {left:0; top:85px;}
#menu li#contact a {left:13px; top:28px;}

#menu li a:hover {white-space:nowrap;}

#menu li#home a:hover b {height:50px; left:-19px; top:50px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/chome.png); padding-top:30px;}
#menu li#single a:hover b {height:50px; left:-72px; top:22px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/csingle.png); padding-top:30px;}
#menu li#dropdown a:hover b {height:50px; left:-86px; top:-36px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/cdropdown.png); padding-top:30px;}
#menu li#dropline a:hover b {height:50px; left:-48px; top:-81px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/cdropline.png); padding-top:30px;}
#menu li#flyout a:hover b {height:50px; left:10px; top:-81px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/cflyout.png); padding-top:30px;}
#menu li#support a:hover b {height:50px; left:48px; top:-35px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/csupport.png); padding-top:30px;}
#menu li#contact a:hover b {height:50px; left:35px; top:22px; background:url(https://wallaby.ucoz.ru/menu_templates/menu1/ccontact.png); padding-top:30px;}

* html #menu li#home a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/chome.png', sizingMethod='scale');}
* html #menu li#single a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/csingle.png', sizingMethod='scale');}
* html #menu li#dropdown a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/cdropdown.png', sizingMethod='scale');}
* html #menu li#dropline a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/cdropline.png', sizingMethod='scale');}
* html #menu li#flyout a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/cflyout.png', sizingMethod='scale');}
* html #menu li#support a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/csupport.png', sizingMethod='scale');}
* html #menu li#contact a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/ccontact.png', sizingMethod='scale');}
Категория Меню для ucoz | Добавил: Wallaby | Просмотров: 9139 |

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

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