Продолжаем публиковать пресс-релизы разработчиков приложений в рамках проводимой акции на W7Phone.ru, на очереди обзор WP8 приложения туристического онлайн-агентства Anywayanyday.
Продолжаем публиковать пресс-релизы разработчиков приложений в рамках проводимой акции на W7Phone.ru, на очереди обзор WP8 приложения туристического онлайн-агентства Anywayanyday.
Олимпиада в Сочи уже началась, и если вы собираетесь следить за этим спортивным мероприятием и быть в курсе всего, что на нём происходит, не забудьте установить на свой смартфон приложение «Зимние игры 2014», выпущенное РИА Новости.
Сегодня покажу как поставить это классное меню на ваш сайт.
1.Скачиваем исходник,распаковываем ...
Сегодня покажу как поставить это классное меню на ваш сайт.
1.Скачиваем исходник,распаковываем и заливаем в папку с шаблоном или прописываем все ручками.
2.Вариант меню 1 ,добавляем этот код в main.tpl туда где вы хотите поставить меню.
Код:
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
3.Стили добавляем в файл стилей вашего шаблона.Подключаем шрифт с иконками, но это необходимо только для нашей демонстрации, у вас иконок может и не быть.
Код:
@font-face {
font-family: 'LigatureSymbols';
src: url('LigatureSymbols-2.05.eot');
src: url('LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
url('LigatureSymbols-2.05.woff') format('woff'),
url('LigatureSymbols-2.05.ttf') format('truetype'),
url('LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
font-weight: normal;
font-style: normal;
}
nav {
font-family: 'LigatureSymbols';
margin : 50px auto;
width : 260px;
}
ul {
border-radius : 3px;
margin:0;
padding:0;
}
ul:after , ul:before {
display : block;
content : '';
}
ul:after {
clear : both;
}
li {
list-style-type : none;
background : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);
float : left;
cursor : pointer;
padding : 3px 10px;
border-top : 2px solid rgba(200,200,255,0.5);
border-bottom : 2px solid rgba(50,50,50,0.4);
}
li:first-child {
border-radius : 5px 0 0 5px;
}
li:last-child {
border-radius : 0 5px 5px 0;
}
li a {
display : block;
padding : 10px 13px;
font-size : 26px;
text-decoration : none;
border-radius : 5px;
position : relative;
top : 0;
color : #FFF;
transition : all .4s;
}
li:hover a {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
li a:after {
display : block;
content : '';
position : absolute;
top : 100%;
left : 42%;
border-style : solid;
border-color : transparent;
border-width : 5px 5px 0 5px;
transition : all .4s;
}
li:hover a:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
4.Вариант 2 ,добавляем этот код в main.tpl туда где вы хотите поставить меню.
Код:
<nav class="menu2">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a class="selected" href="#">Контакты</a></li>
<li><a href="#">Блог</a></li>
</ul>
</nav>
5.Стили.
Код:
.menu2 {
width : 394px;
}
.menu2 a {
font-family : georgia;
font-size : 14px;
font-style : italic;
text-transform : capitalize;
}
.menu2 li {
border-right : 1px solid rgba(200,200,255,0.5);
border-left : 1px solid rgba(40,40,40,0.2);
}
.selected {
top : -20px;
color : #4eacff;
background-color: #fff;
box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
transition : all .4s;
}
.selected:after {
border-color : white transparent transparent transparent;
transition : all .4s;
}
Все сделано на стилях html,без js.Пробуем ,смотрим,пишем
Немного спрятанные изначально иконки, выезжают при наведении на них курсора мыши.
1. ...
Немного спрятанные изначально иконки, выезжают при наведении на них курсора мыши.
1.Скачиваем архив[isnt-logged]
Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам css3_menu_slideup.zip (182.64 Kb)[/is-logged] и заливаем в папку с шаблоном
2.Разметка меню
Код:
<div class="menu">
<i class="icon-cloud-download azul"></i>
<i class="icon-camera-retro verde"></i>
<i class="icon-envelope-alt vermelho"></i>
<i class="icon-truck laranja"></i>
<i class="icon-gift roxa"></i>
<i class="icon-frown azul"></i>
<i class="icon-linux vermelho"></i>
<i class="icon-windows verde"></i>
</div>
3. Стили нашего меню
Иконки, как и в нашем недавнем примере, также заключены в файл шрифта font-awesome.css.
Код:
@import "../css/font-awesome.css";
*, *::before, *::after{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.azul {
color: #0F6698;
}
.verde {
color: #669900;
}
.vermelho {
color: #cc3333;
}
.laranja {
color: #ff6600;
}
.roxa {
color: #663399;
}
.verde-claro {
color: #cccc33;
}
.menu {
border-bottom: 1px solid #000;
text-align: center;
height: 60px;
overflow: hidden;
margin: 20px auto;
width: 480px;
font-size: 3em;
cursor: default;
}
.menu i {
position: relative;
top: 30px;
transition: .2s ease;
}
.menu i:hover {
top: 13px;
}
Все смотрим демо и качаем исходник