Шаблон слайд панелей
827материалов
228тем на форуме
3004комментария
6160пользователей

Шаблон слайд панелей


Описание:

Сейчас наблюдается интересная тенденция в веб-дизайне. Чем меньше элементов на странице — тем лучше. Но это не значит, что их не должно быть вообще. Большинство блоков, таких как меню навигации по сайту, меню профиля пользователя и т. д. можно скрыть и появляться они будут при нажатии и наведении. Некоторые могут сказать, что от этого страдает юзабилити страницы. Не думаю, так как страница стает чище, а значит легче ориентироваться. Человек не путается в горе ссылок.
Сегодня я подготовил коллекцию слайд-панелей, которые по умолчанию на странице скрыты. Чтоб вызвать меню, требуется нажать или навести мышкой на соответствующую иконку. Этот прием пришел в веб-дизайн из мобильных приложений, где нельзя разметить много элементов на одном экране. Со временем такие панели перекочевали и в веб-сайты.

Установка:

Для начала скачиваете архив с нашего сайта и папку shablonslajd загружаете в свой файловый менеджер

Теперь создаете страницу динамическую (через редактор страниц) или статическую (в файловым менеджере с расширением html) страницу и вставляете в нее данный код:
Код
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="/shablonslajd/my.css" />
<title>Shablon slide paneley</title>
</head>
<body>
<a class="cd-nav-trigger cd-text-replace" href="#primary-nav">Menu<span aria-hidden="true" class="cd-icon"></span></a>   
<div class="cd-projects-container">   
<ul class="cd-projects-previews">   
<li> <a href="#0">   
<div class="cd-project-title"> <h2>Project 1</h2> <p>Brief description of the project here</p> </div> </a>   
</li>   
<li> <a href="#0"> <div class="cd-project-title"> <h2>Project 2</h2> <p>Brief description of the project here</p> </div> </a>   
</li>   
<li> <a href="#0"> <div class="cd-project-title"> <h2>Project 3</h2> <p>Brief description of the project here</p> </div> </a>   
</li>   
<li> <a href="#0"> <div class="cd-project-title"> <h2>Project 4</h2> <p>Brief description of the project here</p> </div> </a> </li> </ul>   
<ul class="cd-projects"> <li> <div class="preview-image"> <div class="cd-project-title"> <h2>Project 1</h2> <p>Brief description of the project here</p> </div> </div> <div class="cd-project-info"> <p> Агентство предлагает полный комплекс услуг для проектов любого уровня и любой стадии готовности — от начальной, когда есть лишь идея, нуждающаяся в разработке, создании инструментов и продвижении, до заключительной, когда ресурсу необходима только поддержка. Вы так же можете заказать разработку индивидуальных баннеров, иконок и оформление своей группы В Контакте. </p> </div></li>   
<li> <div class="preview-image"> <div class="cd-project-title"> <h2>Project 2</h2> <p>Brief description of the project here</p> </div> </div> <div class="cd-project-info"> <p> Работа над проектами — это возможность поделиться своими мыслями и взглядами, рассказать нечто новое или напомнить о забытом. Я верю в то, что эти проекты приносят пользу — об этом же говорит и не утихающий интерес к ним самой широкой аудитории. </p> </div></li>   
<li> <div class="preview-image"> <div class="cd-project-title"> <h2>Project 3</h2> <p>Brief description of the project here</p> </div> </div> <div class="cd-project-info"> <p>Наше агентство предоставляет услуги по разработке и поддержке персональных сайтов, интернет-магазинов, порталов и лендингов. Так же у нас Вы можете заказать нейминг, разработку мелких графических элементов, фирменный стиль и некоторые другие услуги. </p> </div> </li>   
<li> <div class="preview-image"> <div class="cd-project-title"> <h2>Project 4</h2> <p>Brief description of the project here</p> </div> </div> <div class="cd-project-info"> <p>Приятно, когда качество выполненных работ высоко оценивают не только клиенты, но и коллеги. Наше агентство стремительно двигается в списки ключевых рейтингов Рунета чтобы стать призером престижных российских и международных конкурсов в области веб-разработки и дизайна. </p> </div></li>   
</ul>   
<button class="scroll cd-text-replace">Scroll</button> </div>   
<nav class="cd-primary-nav" id="primary-nav"> <ul> <li class="cd-label">Navigation</li> <li> <a href="/">← Previous demo</a> </li> <li> <a href="/">go to the article</a> </li> <li> <a href="javascript:history.back()">back →</a></li> </ul> </nav>
<script type="text/javascript" src="/shablonslajd/my.js"></script>
</body>
</html>

P.S при создании динамической страница не забудьте добавить код $POWERED_BY$, а то система не даст сохранить шаблон.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Шаблон опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о шаблоне:
Дата добавления материала: 14.10.2016 в 18:30
Материал просмотрен: 876 раз
Категория материала: Шаблоны для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта