Меню в стиле телефона IPhone - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Меню для сайта uCoz » Меню в стиле телефона IPhone

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Меню в стиле телефона IPhone

Меню в виде смартфона IPhone компании Apple




Необычное и функциональное меню в виде телефона смартфона корпорации Apple - IPhone работает без применения скриптов, весь функционал показывает возможности применения свойств CSS3. Размеры меню строго позиционированы и без минимальных знаний будет сложно внести изменения в его конструкцию. В любом случае мне понятен сценарий его работы и если у Вас появятся вопросы по изменению параметров можно будет их рассмотреть в стандартной форме для комментариев. Предложения и все остальные темы не технического характера излагайте в форме комментариев ВКонтакте. Для установки можно помещать весь код из примера, измените названия в навигации пунктов меню IPhone и адреса к страницам на требуемые. Для проверки и гипотетических изменений в меню используйте панель инструменов, задействовать которую можно нажав на кнопку в левом нижнем углу страницы сайта. Для проверки кода на работоспособность нужно использовать "Редактор HTML" скопировав в него демонстративный код из примера.





Пример кода для установки меню IPhone


<style>
.phone {
width:420px;
height:808px;
background:url(http://delaisait.ucoz.ru/demo/img/2013/iphone.png);
position:relative;
margin:50px auto;
}
.screen {
width:320px;
height:468px;
background:#444;
position:absolute;
left:30px;
top:170px;
overflow:hidden;
}
.page {
position:absolute;
left:0;
top:0;
width:320px;
height:470px;
background:url(http://delaisait.ucoz.ru/demo/img/2013/mishka.jpg);
z-index:100;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
}
.page h3 {
padding:280px 0 0 0;
margin:0;
font:normal 28px/32px georgia, serif;
color:#fff;
text-align:center;
}
.screen input {position:absolute; display:none;}
.m-open {
width:50px;
height:50px;
position:relative;
margin:10px auto;
border:1px solid #ddd;
border-radius:5px;
}
.m-open label {
display:block;
width:50px;
height:50px;
cursor:pointer;
position:relative;
}
.m-open label:before {
content:"";
display:block;
width:30px;
height:15px;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
position:absolute;
left:10px;
top:12px;
}
.m-open label:after {
content:"";
display:block;
width:30px;
height:5px;
background:#fff;
position:absolute;
left:10px;
top:22px;
}
.menu li.m-close {position:relative; background:#505050;}
.menu li.m-close label {
display:block;
width:40px;
height:40px;
position:absolute;
left:145px;
top:8px;
cursor:pointer;
}
.menu li.m-close label:before {
content:"";
display:block;
width:30px;
height:15px;
border-top:3px solid #eee;
border-bottom:3px solid #eee;
}
.menu li.m-close label:after {
content:"";
display:block;
width:30px;
height:3px;
background:#eee;
position:absolute;
left:0;
top:9px;
}
.menu {position:absolute; left:320px; top:0; width:320px; z-index:50;
-webkit-transition: left 0s 0.5s;
-moz-transition: left 0s 0.5s;
-o-transition: left 0s 0.5s;
transition: left 0s 0.5s;
}
.menu ul {
padding:0;
margin:0;
list-style:none;
position:absolute;
left:0;
top:0;
height:400px;
background:#444;
}
.menu ul li {
display:block;
width:320px;
float:left;
height:40px;
line-height:40px;
background:#444;
border-top:1px solid #666;
border-bottom:1px solid #222;
}
.menu ul li a {
display:block;
color:#fff;
text-decoration:none;
font:normal 16px/40px arial, sans-serif;
padding-left:30px;
}
.menu ul li a:hover {color:#6cf;}
.menu ul ul {left:640px; z-index:100; opacity:0;
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
-webkit-transform-origin: 50% 25%;
-moz-transform-origin: 50% 25%;
-o-transform-origin: 50% 25%;
transform-origin: 50% 25%;
-webkit-transition: opacity 0.5s, left 0s 0.5s, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s, left 0s 0.5s, -moz-transform 0.5s;
-o-transition: opacity 0.5s, left 0s 0.5, -o-transform 0.5s;
transition: opacity 0.5s, left 0s 0.5s, transform 0.5s;
}
.menu div {
width:40px;
height:40px;
position:relative;
float:right;
}
.menu div label {
display:block;
width:40px;
height:40px;
position:absolute;
background:#505050;
left:0;
top:0;
cursor:pointer;
border-left:2px groove #666;
}
.menu div label:before {
display:block;
width:12px;
height:12px;
content:"";
border-top:2px solid #fff;
border-right:2px solid #fff;
position:absolute;
top:14px;
left:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menu li.close {position:relative;}
.menu li.close label {
display:block;
width:320px;
height:40px;
position:absolute;
left:0;
top:0;
cursor:pointer;
background:#505050;
}
.menu li.close label:before {
display:block;
width:12px;
height:12px;
content:"";
border-bottom:2px solid #fff;
border-left:2px solid #fff;
position:absolute;
top:14px;
left:154px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
#menu-open:checked ~ .page {left:320px;}
#menu-open:checked ~ .menu {
left:0;
transition: left 0s;
}
#sub1a-open:checked ~ .menu ul.sub1a,
#sub1b-open:checked ~ .menu ul.sub1b,
#sub1c-open:checked ~ .menu ul.sub1c,
#sub1d-open:checked ~ .menu ul.sub1d,
#sub2a-open:checked ~ .menu ul.sub2a,
#sub2b-open:checked ~ .menu ul.sub2b,
#sub2c-open:checked ~ .menu ul.sub2c,
#sub2d-open:checked ~ .menu ul.sub2d,
#sub2e-open:checked ~ .menu ul.sub2e,
#sub3a-open:checked ~ .menu ul.sub3a,
#sub3b-open:checked ~ .menu ul.sub3b {
left:0; opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
-webkit-transition: opacity 0.5s, left 0s, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s, left 0s, -moz-transform 0.5s;
-o-transition: opacity 0.5s, left 0s, -o-transform 0.5s;
transition: opacity 0.5s, left 0s, transform 0.5s;
}
</style>
<div class="phone">
<div class="screen">
<input class="hidden" type="radio" name="m1" id="menu-open" />
<input class="hidden" type="radio" name="m1" id="menu-close" />
<input class="hidden" type="radio" name="s1" id="sub1a-open" />
<input class="hidden" type="radio" name="s1" id="sub1b-open" />
<input class="hidden" type="radio" name="s1" id="sub1c-open" />
<input class="hidden" type="radio" name="s1" id="sub1d-open" />
<input class="hidden" type="radio" name="s1" id="sub1-close" />
<input class="hidden" type="radio" name="s2" id="sub2a-open" />
<input class="hidden" type="radio" name="s2" id="sub2b-open" />
<input class="hidden" type="radio" name="s2" id="sub2c-open" />
<input class="hidden" type="radio" name="s2" id="sub2d-open" />
<input class="hidden" type="radio" name="s2" id="sub2e-open" />
<input class="hidden" type="radio" name="s2" id="sub2-close" />
<input class="hidden" type="radio" name="s3" id="sub3a-open" />
<input class="hidden" type="radio" name="s3" id="sub3b-open" />
<input class="hidden" type="radio" name="s3" id="sub3-close" />
<div class="menu">
<ul>
<li class="m-close">
<label for="menu-close" title="Close Menu"></label></li>
<li><a href="#">Home</a></li>
<li><a href="#">Privacy</a></li>
<li><div><label class="open" for="sub1a-open"></label></div>
<a href="#">Contact Us</a>
<ul class="sub1a">
<li class="close"><label for="sub1-close"></label></li>
<li><a href="#">Email</a></li>
<li><a href="#">Telephone</a></li>
<li><a href="#">Online Form</a></li>
<li><a href="#">Snail Mail Address</a></li>
</ul>
</li>
<li><div><label class="open" for="sub1b-open"></label></div>
<a href="#">Resort</a>
<ul class="sub1b">
<li class="close"><label for="sub1-close"></label></li>
<li><a href="#">Ski Hire Facilities</a></li>
<li><a href="#">Night Life</a></li>
<li><div><label class="open" for="sub2a-open"></label></div>
<a href="#">Main Ski Slopes</a>
<ul class="sub2a">
<li class="close"><label for="sub2-close"></label></li>
<li><a href="#">Beginners Slopes</a></li>
<li><a href="#">Intermediate Slopes</a></li>
<li><div><label class="open" for="sub3a-open"></label></div>
<a href="#">Advanced Skill Levels</a>
<ul class="sub3a">
<li class="close"><label for="sub3-close"></label></li>
<li><a href="#">Local</a></li>
<li><a href="#">Nearby</a></li>
<li><a href="#">With instructor</a></li>
<li><a href="#">Snow boarding</a></li>
</ul>
</li>
<li><a href="#">Expert</a></li>
</ul>
</li>
<li><div><label class="open" for="sub2b-open"></label></div>
<a href="#">Restaurants</a>
<ul class="sub2b">
<li class="close"><label for="sub2-close"></label></li>
<li><a href="#">Snow Hotel</a></li>
<li><a href="#">The Snowman</a></li>
<li><a href="#">Ice Cavern</a></li>
<li><a href="#">Ski Inn</a></li>
</ul>
</li>
<li><div><label class="open" for="sub2c-open"></label></div>
<a href="#">Car Hire</a>
<ul class="sub2c">
<li class="close"><label for="sub2-close"></label></li>
<li><a href="#">From Airport</a></li>
<li><a href="#">In Resort</a></li>
<li><a href="#">Multiple Resorts</a></li>
</ul>
</li>
</ul>
</li>
<li><div><label class="open" for="sub1c-open"></label></div>
<a href="#">Information</a>
<ul class="sub1c">
<li class="close"><label for="sub1-close"></label></li>
<li><a href="#">Money Exchange</a></li>
<li><a href="#">Short Breaks</a></li>
<li><div><label class="open" for="sub2d-open"></label></div>
<a href="#">Resort Essential Information</a>
<ul class="sub2d">
<li class="close"><label for="sub2-close"></label></li>
<li><a href="#">Lift Passes</a></li>
<li><a href="#">Insurance</a></li>
<li><div><label class="open" for="sub3b-open"></label></div>
<a href="#">Gear Rental</a>
<ul class="sub3b">
<li class="close"><label for="sub3-close"></label></li>
<li><a href="#">Boots</a></li>
<li><a href="#">Skis</a></li>
<li><a href="#">Ski Wear</a></li>
<li><a href="#">Goggles</a></li>
</ul>
</li>
<li><a href="#">Ski Schools</a></li>
<li><a href="#">Snow Report</a></li>
</ul>
</li>
<li><div><label class="open" for="sub2e-open"></label></div>
<a href="#">Language</a>
<ul class="sub2e">
<li class="close"><label for="sub2-close"></label></li>
<li><a href="#">Austrian</a></li>
<li><a href="#">German</a></li>
<li><a href="#">French</a></li>
<li><a href="#">English</a></li>
</ul>
</li>
</ul>
</li>
<li>
<div><label class="open" for="sub1d-open"></label></div>
<a href="#">Surrounding Area</a>
<ul class="sub1d">
<li class="close"><label for="sub1-close"></label></li>
<li><a href="#">Where to go</a></li>
<li><a href="#">What to do</a></li>
<li><a href="#">Places of interest</a></li>
<li><a href="#">National parks &amp; Museums</a></li>
</ul>
</li>
</ul>
</div>
<div class="page">
<div class="m-open">
<label for="menu-open" title="Open Menu"></label>
</div>
<h3>Делай сайт</h3>
</div>
</div>
</div>



Меню IPhone в подключенном состоянии









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1396 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: menu smartphones, меню телефон, меню смартфон, tablets

    Всего комментариев: 1
    0   Спам
    1 vitekot   (20.03.2014 05:14)
    Аватар vitekot Да ты ссупер реализую для создания мобильных приложений

    cry cry


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