Создание и продвижение сайтов, материалы веб-мастеру!
Способы заработка, свой бизнес в интернете!

Подписка на обновления сайта с помощью RSS

Подписка с помощью RSS
(читателей: 955)

Мой LiveJournal Мой Я.ру Мой FaceBook Мой Twitter

Читать в соц. сетях:

Способы заработка в интернетеОбновляемый сборник Способы заработка в интернете

Свой бизнес на файлообменникахУчебное пособие
Свой бизнес на файлах (пошагово)

Вход | Регистрация | Напомнить пароль

Коллекция плагинов для WordPressКоллекция плагинов для WordPress

Язык запросов поиска ЯндексаЯзык запросов поиска Яндекса

Что делать если украли деньги с WebMoneyЧто делать если украли деньги с WebMoney

Куда вложить деньги - инвестирование в ПАММ-счетаПассивный доход за счёт инвестирования Куда сегодня можно вложить деньги

Главная » Инструкции и методы » Приёмы web-дизайна

Инструкции и методы решения различных задач

Раздел "Инструкции и методы"

Основа данного раздела - это пошаговые описания решений определённых задач в сайтостроении (вёрстка, web-дизайн, программирование и прочее), примеры решения различных трудностей с помощью полезного софта, а также некоторые другие интересные материалы

Все инструкции и методы одним списком

Выезжающая панель на Mootools

Mootools

Здравствуйте. Данный урок мы посвятим созданию всплывающих панелей для сайта. Для разработки панели нам потребуется малейшее представление о Mootools и, конечно же, знание CSS-стилей, необходимых для создания её дизайна. Прежде чем начать, скачайте файл-архив с исходниками, там же вы найдете пример получившейся панели (index.html). Если вы скачали и все просмотрели, приступим к реализации этого элемента.

Шаг 1. Пишем HTML - код панели

В готовую HTML-конструкцию, приведенную внизу, вместо
“Содержимое панели” напишите свой текст.



<div id="top-panel">
<!-- Содержимое панели -->
</div>
<div id="sub-panel">
<a href="#" id="toggle">
<span>Об авторе</span>
</a>
</div>

Шаг 2. Подключаем библиотеку Mootools

Вторым этапом этого урока будет подключение библиотеки Mootools. Возможно, многие из вас не знают, как это делается, поэтому объясню: копируем нижеприведенный код и вставляем его между тегами <head> и </head>:



<link rel="stylesheet" type="text/css" media="screen, print"

href="slickmap.css" />

Шаг 3. Создаем стиль для панели

Берем код, находящийся внизу и вставляем его тоже между тегами <head> и </head>:



<style type="text/css">
body{
border:0;
padding:0;
margin:0;
font-family:"Lucida Grande", "Lucida Sans Unicode",

Verdana, Arial, Helvetica, sans-serif;

font-size:12px;
color:#555555;
}
a:link, a:visited{color:#0066CC;}
#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;

}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:200px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;

 

}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}
</style>

Шаг 4. JavaScript

Вставляем приведенный мной Java-скрипт перед тегом </head>:



<script type="text/javascript">

window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
mySlide.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
});
});

</script>

На этом урок закончен. Проверяем результат проделанной работы и окончательно подстраиваем всплывающую панель под себя. Если будут вопросы, пишите в комментариях.

Электронные издания с перелистыванием страниц, электронные журналы, каталоги и отчёты, а также многое другое можно купить на сайте LuxEdition.

ВложениеРазмер
panelslide.zip21.66 кб

Если Вам понравился данный материал, Вы можете подписаться на получение новых публикаций сайта с помощью RSS-ленты или E-mail-рассылки:

Подписка на обновления сайта с помощью RSS

Введите свой e-mail:

RSS-подписчиков: 955 | E-mail-подписчиков: 691

Спасибо Вам за добавление данной страницы в социальные сервисы:

Ещё инструкции и методы...
Как поставить favicon.ico на сайт
Создаем отдельный дизайн для каждой страницы в CMS Joomla
Создаем форму в Zend Framwork
Преимущества облачного хостинга
Новая cms MODx
Как создать стену Facebook
Активная фильтрация данных в PHP
CMS LiveStreet
Создание формы
Создаем динамические закладки на jQuery

Задать вопрос или оставить комментарий

Вы можете поделиться своим мнением по теме или задать возникшие вопросы ниже в комментариях. Спасибо!

Чтобы получить подробный ответ на ряд возникших вопросов или если требуется детальная помощь в решении какой-либо задачи, можно воспользоваться данной формой. Ответы на вопросы, заданные через указанную форму, публикуются в разделе "Вопросы пользователей".

Отправить комментарий
Содержание этого поля является приватным и не предназначено к показу.
КАПЧА
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
4 + 1 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.

Copyright © 2007-2012 Николай Мурашкин | Хостинг сайта

Копирование, а также любое другое подобное использование материалов без ссылки на сайт NikMurashkin.RU строго запрещено!

тИЦ и Page Rank сайта