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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Меню "аккордеон"

Меню аккордеон

Здравствуйте, начинающие вебмастеры! Вы, наверное, не раз сталкивались с различными видами меню, каждый из которых имеет свой красивый дизайн и возможности. Сегодня мы рассмотрим выпадающее меню типа "аккордеон". Сначала не забудьте скачать исходники файлов, они пригодятся нам в ходе данного урока.

Скачать файл-архив с исходником

Шаг 1. Конструкция меню в HTML.

Сперва создадим html-каркас, который станет основой для нашего нового меню. Ниже вы увидите пример такого html – каркаса:

HTML:

<div style="float:left" >
<div id="firstpane" class="menu_list">
<p class="menu_head">Меню</p>
<div class="menu_body">
<a href="#">Главная</a>
<a href="#">Форум</a>
<a href="#">Блог</a>
<a href="#">Контакты</a>
<a href="#">О проекте</a>
</div>
<p class="menu_head">Публикации</p>
<div class="menu_body">
<a href="#">Новости</a>
<a href="#">Статьи</a>
<a href="#">Закачки</a>
</div>
<p class="menu_head">Профиль</p>
<div class="menu_body">
<a href="#">Мои друзья</a>
<a href="#">Мои сообщения</a>
<a href="#">Мои файлы</a>
<a href="#">Выйти</a>
</div>
</div>
</div>

Шаг 2. Дизайн меню в CSS:

После того, как создали основу меню, приступим к стилям. CSS-коды для объектов навигации, которые мы к ним привязали, прописываем между тегами <head> и </head> в файле шаблона. Ниже приведен код этих стилей:

CSS:

<style type="text/css">
body {
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #333 url(images/left.png) center right no-repeat;
color:#fff;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#555;
background-color:#999;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #333;
text-decoration:underline;
}
</style>

Шаг 3. Прикручиваем фреймворк jQuery.

А теперь, пожалуй, самое главное – не забыть привязать важнейший фреймворк jQuery между тегами <head> и </head>:

<script type="text/javascript" src="jquery.js"></script>

Шаг 4. Последний момент нашего урока - вставка необходимых JavaScript'ов.

Придадим меню различные эффекты: выпадение разделов по нажатию, улучшение выпадающих элементов. Чтобы получить их, вставляем перед тегом </body> нижеприведенный код:

<script type="text/javascript">
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body")

.slideToggle(300)

.siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(images/left.png)"});
});
});
</script>

Вот и все. Проверяем результат проделанной работы.

Чтобы купить mac pro, вам достаточно перейти на сайт AmosTore, где без труда вы сможете заказать данное чудо техники по вполне приемлемым ценам.

ВложениеРазмер
acc_menu.zip37.97 кб

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

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

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

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

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

Ещё инструкции и методы...
Активная фильтрация данных в PHP
Бесплатные WISIWYG редакторы
CMS LiveStreet
PHP и проблемы со строками в UTF-8
Не игнорируйте :focus
Меню "аккордеон"
Создаем форму в Zend Framwork
Создаем динамические закладки на jQuery
Небольшой рассказ о видах хостинга
Фильтрация вводимых данных в PHP

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

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

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

Изображение пользователя Max.

Меню

Опубликовано Max (не зарегистрирован) в 13 Апрель, 2012 - 01:08.

Меню интересное, только если опять закрыть категорию - значек остается в положении открыто, что смотрится не очень... Как исправить?

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

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

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

тИЦ и Page Rank сайта