[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Ucoz » Скрипты для ucoz » Меню в стиле iOS для ucoz
Меню в стиле iOS для ucoz
Macros
Дата: Вторник, 21.05.2013, 11:46 | Сообщение # 1
Оффлайн
Администраторы
Сообщений: 154
IP: Скрытная информация


Этот сниппет выполнен в стиле iOS, в него входят: блок тултипа, круглые checkbox и стили при наведении. iOS стиль Checkbox – это красивое оформление checkbox на CSS3. Картинка используется только для галочки. В самом коде никакого «чекбокса» нет, это только пример оформления, но никак ни рабочая версия.

Проверено в Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8.

Установка:

1 шаг. Это ставим в Нужное место:
Код
<div class="popover">   
   <ul>   
   <li class="active"><a href="/">Закладки</a></li>   
   <li class="active"><a href="/">Пароли</a></li>   
   <li><a href="/">Избранное</a></li>   
   <li><a href="/">История</a></li>   
   </ul>   
   </div>


2 шаг. Это ставим в CSS:
Код
.popover {   
   position: relative;   
   z-index: 10;   
   width: 200px;   
   padding: 5px;   
   border: 1px solid #000;   
   border-radius: 11px;   
   background-color: #606060;   
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606060), color-stop(100%, #4a4a4a));   
   background-image: -webkit-linear-gradient(top, #606060, #4a4a4a);   
   background-image: -moz-linear-gradient(top, #606060, #4a4a4a);   
   background-image: -ms-linear-gradient(top, #606060, #4a4a4a);   
   background-image: -o-linear-gradient(top, #606060, #4a4a4a);   
   background-image: linear-gradient(top, #606060, #4a4a4a);   
   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);   
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);   
   }   
   .popover:before, .popover:after, .popover ul:before {   
   display: block;   
   content: '';   
   width: 0;   
   height: 0;   
   position: absolute;   
   z-index: 11;   
   left: 22px;   
   border: 7px outset transparent;   
   }   
   .popover:before {   
   border-bottom: 7px solid #000;   
   top: -14px;   
   }   
   .popover:after {   
   border-bottom: 7px solid #888;   
   top: -13px;   
   }   
   .popover ul:before {   
   z-index: 12;   
   border-bottom: 8px solid #666;   
   top: -12px;   
   }   
   .popover ul {   
   overflow: hidden;   
   background: #fff;   
   border: 1px solid #000;   
   border-radius: 7px;   
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);   
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);   
   }   
   .popover li {   
   display: block;   
   }   
   .popover li + li {   
   border-top: 1px solid #eee;   
   }   
   .popover li:first-child a {   
   border-radius: 7px 7px 0 0;   
   }   
   .popover li:last-child a {   
   border-radius: 0 0 7px 7px;   
   }   
   .popover a {   
   position: relative;   
   display: block;   
   line-height: 44px;   
   padding: 0 15px 0 48px;   
   color: #000;   
   font-size: 16px;   
   font-weight: bold;   
   }   
   .popover a:hover {   
   text-decoration: none;   
   background: #fff;   
   -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);   
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);   
   }   
   .popover a:before, .popover a:after {   
   position: absolute;   
   display: block;   
   content: '';   
   }   

   .popover a:before, .popover .active a:active:before {   
   height: 20px;   
   width: 20px;   
   top: 12px;   
   left: 14px;   
   border: 0;   
   border-radius: 11px;   
   background: #f7f7f7;   
   -webkit-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);   
   box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);   
   }   
   .popover a:after, .popover .active a:active:after {   
   display: none;   
   width: 11px;   
   height: 9px;   
   top: 18px;   
   left: 19px;   
   background: url("http://dedicated.3dn.ru/uCoz/images/1/tick.png") center center no-repeat;   
   }   
   .popover .active a:before, .popover a:active:before {   
   top: 11px;   
   left: 13px;   
   border: 1px solid #111;   
   background-color: #555555;   
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #404040));   
   background-image: -webkit-linear-gradient(top, #777777, #404040);   
   background-image: -moz-linear-gradient(top, #777777, #404040);   
   background-image: -ms-linear-gradient(top, #777777, #404040);   
   background-image: -o-linear-gradient(top, #777777, #404040);   
   background-image: linear-gradient(top, #777777, #404040);   
   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);   
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);   
   }   
   .popover .active a:after, .popover a:active:after {   
   display: block;   
   }


100% рабочая)
Прикрепления: 7467808.png(3.0 Kb)


Форум » Ucoz » Скрипты для ucoz » Меню в стиле iOS для ucoz
  • Страница 1 из 1
  • 1
Поиск: