Rambler's Top100
 войти на сайт

вход на сайт

Логин:
Пароль:

  • Забыл пароль Регистрация
    
    Для веб-мастера
    ⇒ Мини-сервисы ⇐
    Витрина ссылок
    Рекомендуем
    Партнеры
    Наша кнопка
    Портал Zagru.Ru Код кнопки
    Онлайн
    
    Всего на сайте: 1
    Пользователей: 0
    
    Я ндекс тИЦ


    18.11.2017
    04.11.2017
    16.08.2017
    Я ндекс выдачи


    17.07.2018
    14.07.2018
    12.07.2018
    Я. Каталога
    16.01.2018
    20.12.2017
    15.12.2017
    G o o g le PR
    26.11.2014
    13.10.2014
    27.05.2014




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


    Раздел: Другие CMS | Опубликовал: admin | Автор: | Дата: 21-04-2012, 21:24


    Необычное меню для сайта ucoz, выполненое в синих и серых тонах. Меню имеет интересный функционал, тестим.
    Шаг-1 Установка HTML
    Вставляем в нужно для Вас место на сайт.
    Получить код
    <div id="menuContainer">
    <ul id="menu">
    <li id="home" class="first"><a href="http://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):
    Получить код
    #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(http://wallaby.ucoz.ru/menu_templates/menu1/grid.png);}
    * html #menu {
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/grid.png', sizingMethod='scale');
    }

    #menu li a {display:block; width:42px; height:42px; background:url(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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='http://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='http://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='http://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='http://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='http://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='http://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='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/ccontact.png', sizingMethod='scale');}
    Понравился пост? Посмотрите эти:
    Поделиться интересной новостью или рекомендовать своим друзьям:
  • Прямая ссылка:
  • BB-code ссылка:
  • HTML ссылка:
  • Соц. сети:
  • Написать комментарий
    Имя:* E-Mail:
    Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
    Введите код: *




    Внимание! Некоторые материалы размещенные на сайте взяты из открытых источников и предоставляются исключительно в ознакомительных целях. Владельцы сайта не могут нести ответственности за выложенные материалы пользователей. Если вы правообладателем материала на нашем сайте и не желаете чтобы оно находилась тут, свяжитесь с нами через обратную связь и мы незамедлительно удалим её.
    Яндекс.Метрика