Регистрация    Войти
Авторизация

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

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

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

Установка:
Для начала скачиваете архив с нашего сайта и папку 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 manucoz.ru</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="/">&#8592; Previous demo</a> </li> <li> <a href="/">go to the article</a> </li> <li> <a href="javascript:history.back()">back &#8594;</a></li> </ul> </nav> 
<script type="text/javascript" src="/shablonslajd/my.js"></script> 
</body> 
</html>


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

Скачать: 943_shablonslajd.rar [5,53 Kb] (cкачиваний: 32)


Так же вы можете посмотреть демо этого шаблона на http://madeas.ru/demo/templates/shablon-slide-paneley#primary-nav

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  15-10-2016, 11:03   Просмотров: 860   
слайд панелей uCoz, слайд, слайд ucoz, шаблон слайд ucoz, Шаблон слайд
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.