Понедельников НЕТ!
Регистрация или вход Регистрация или вход Избранное на этом сайте | Главная | Анкета | Рекомендовать | Обратная связь | В избранное | Сделать домашней
Скачать SSDForums
Скачать SSDForums 1.0.1 Скачать SSDForums 1.0.1
Скачать SSDForums 1.0.1 SP1 Скачать SSDForums 1.0.1 SP1
Скачать SSDForums 1.0.1 SP2 Скачать SSDForums 1.0.1 SP2
SSD Forums 1.0.1 SP3 only Slaed 3.5 Pro SSD Forums 1.0.1 SP3 only Slaed 3.5 Pro
SSD Forums 1.0.1 SP4-beta only Slaed 4.1 Pro SSD Forums 1.0.1 SP4-beta only Slaed 4.1 Pro
Jewelry Сase Team
Скачать Ruby Chat 0.1.1 Скачать Ruby Chat 0.1.1
Меню
Главная
Форум
Магазин цифровых товаров

Новости
Подписка на новости
Темы новостей
Добавить новость

Каталог файлов
Карта файлового архива
Публикации

Опросы
Анкета пользователя
Чат

BestMaker
Викторина
Архив новостей
Карманный оракул
Поиск по сайту с помощью Яндекс
Поиск по сайту с помощью Google
Фото дня
Для души
Погода на 3 дня
IndexCat
IndexTop
Map_Pages
Поиск по сайту









Подписка на новости
Ваше имя:
Ваш E-Mail:*
Секретный код:
Секретный код
Повторить:*
Интересное в сети

Sape — это система купли-продажи ссылок
с главных и внутренних страниц сайтов
Форум -> Полезные решения -> Выезжающее вниз меню
Выезжающее вниз меню
moskmii Дата: 11.02.2009, в 14:23 | Сообщение №1
moskmii
Активный участник
Пользователь №: 96
Сообщений: 184

Прикручиваю выезжающее вниз меню, но не получается...

Может кто подскажет подробную инструкцию...
Serg_pnz Дата: 11.02.2009, в 14:56 | Сообщение №2
Serg_pnz
Администратор
Пользователь №: 1
Сообщений: 2242

moskmii, какое именно?

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
moskmii Дата: 11.02.2009, в 16:39 | Сообщение №3
moskmii
Активный участник
Пользователь №: 96
Сообщений: 184

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей. Но привлечь мало - надо еще сделать все для того, чтобы посетителям наш сайт понравился, чтобы им захотелось остаться, а потом приходить снова и снова. Для этого недостаточно наполнить страницу интересным содержанием, нужно еще сделать ее красивой и, самое главное, удобной в использовании. На Западе для предоставления потребителям максимума удобств существует даже специальная профессия - специалист по usability. Если вас заинтересовало, что это значит, узнать подробности вы можете на страничке Артемия Лебедева _http://www.design.ru/kovodstvo. А в нашей статье речь пойдет несколько о другом - о том, как превратить навигацию по вашему сайту в сплошное удовольствие для посетителя.

Хочу заранее предупредить, что все примеры, приведенные в данной статье, предназначены только для браузеров Internet Explorer версии 4.0 и выше, т.к. цель этой статьи - не научить вас кроссбраузерному DHTML, а лишь показать, каких интересных эффектов можно достичь, манипулируя свойствами CSS при помощи java_!_sctipt. Что касается аналогичных эффектов для браузеров Netscape, которые намного меньше распространены в России, упомяну лишь, что для совместимости с ними нужно будет проделать небольшую дополнительную работу - написать скрипт, определяющий версию браузера при загрузке страницы, и несколько изменить функции, управляющие свойствами CSS.

Также напомню, что некоторые пользователи отключают в своих браузерах графику для ускорения загрузки страниц. Поэтому, если вы делаете меню для навигации по вашему сайту с помощью графических элементов, не забывайте снабдить рисунки подробными описаниями в атрибуте alt. Желательно также создать альтернативное текстовое меню - обычно его делают внизу страницы в виде строчки, содержащей ссылки на основные разделы сайта.

Графическое меню с подразделами, реагирующее на действия пользователя

Итак, давайте попробуем создать красивое навигационное меню, реагирующее на действия посетителя вашей странички (вернее, на действия его мышки). Описываемое здесь меню подойдет вам, если разделов на сайте не слишком много, и каждый из них содержит небольшое число подразделов. Посетитель при загрузке страницы будет видеть картинки с названиями разделов, а если он наведет курсор мышки на одну из этих картинок, из-под нее "выпадет" список доступных в данном разделе подразделов.

Для начала нужно создать картинки для каждого из разделов. В приводимом примере картинка, изображающая название раздела, будет называться nav1.gif, а картинки подразделов будут пронумерованы - 1.gif, 2.gif и т.д. Теперь создадим для нашей страницы таблицу стилей, в которой зададим специальный класс .hidden для "спрятанных" списков подразделов:

КОД
Код
1
<style>
...
.hidden {position: absolute; visibility: hidden;}
...
</style>



Кроме того, нам понадобится класс .visible для "видимого" состояния этих списков:

КОД
Код
1
<style>
...
.visible {position: absolute; visibility: visible; z-index: 3;}
...
</style>



Обратите внимание: слои с нашими картинками должны быть абсолютно позиционированы. Свойство z-index со значением, большим единицы, задано для того, чтобы выпадающие меню оказывались поверх других элементов страницы. Советую разместить навигационное меню на странице так, чтобы списки подразделов, выпадая, оказывались поверх баннера или какого-нибудь другого малозначительного графического элемента. Если посетитель, читая что-то интересное, случайно наведет мышку на название раздела (многие любят, читая, "возить" мышкой по странице) и поверх текста вдруг вывалится список подразделов, ему это вряд ли понравится.

Теперь создадим пример слоя, который покажет нам кусочек нашего меню в действии. Точнее, нам понадобится два разных слоя - видимый и спрятанный, который будет появляться при наведении курсора мышки на видимый. Внутри слоев будут содержаться наши картинки, расположенные точно друг под другом. Для этого следует прибегнуть к абсолютному позиционированию слоев или к простенькой табличке, состоящей из одного столбца и двух строк: в первой содержится видимая кнопка, а во второй - спрятанные. В простейшем случае это будет выглядеть так:

КОД
Код
1
<div style="position: absolute; top: 20px; left: 20px;">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>
<div id="Nav1" class="hidden" style="position: absolute; top: 40px; left: 20px;">
<img src="images/1.gif" width="110" height="20">
<br>
<img src="images/2.gif" width="110" height="20">
<br>
<img src="images/3.gif" width="110" height="20">
<br>
<img src="images/4.gif" width="110" height="20">
</div>



Обратите внимание - для спрятанного слоя обязательно должен быть задан уникальный идентификатор, в нашем случае это - id="Nav1". Идентификатор нужен для того, чтобы программа java_!_sctipt, которую мы напишем чуть позже, могла обратиться к конкретному элементу страницы.

Когда мышка посетителя нашей странички окажется над видимым слоем, для этого слоя произойдет событие MouseOver, а когда курсор вновь уйдет за пределы слоя - произойдет событие MouseOut. Все, что нам осталось теперь сделать, - это создать обработчики для этих событий мышки.

Конечно же, можно записать значения обработчиков событий непосредственно в тэгах слоя, но, во-первых, это удобно лишь до той поры, пока слоев один-два, а если мы собираемся создать полноценную навигационную панель, у нас их будет значительно больше. Во-вторых, правила "хорошего тона" в DHTML предписывают задать программу java_!_sctipt, называемую функцией, в разделе <head> в тэге-контейнере <script>, а в дальнейшем просто вызывать ее из обработчиков событий в теле страницы. Такой подход ускоряет как загрузку страницы в целом, так и обработку конкретных событий, в частности.

Итак, нам понадобится написать две функции - одну для того, чтобы показывать спрятанный список подразделов, и вторую - для того, чтобы вновь его прятать. Так как мы заранее подготовили два класса - .visible и .hidden, то наши функции будут управлять всего лишь сменой одного класса на другой, и, следовательно, состоять всего из одной строчки каждая. При этом раздел <head> нашей страницы будет выглядеть так:

КОД
Код
1
<head>
<title>Пример выпадающего меню</title>
<style>
.hidden {position: absolute; visibility: hidden;}
.visible {position: absolute; visibility: visible; z-index: 2;}
</style>
<script language="JavaScript">
function showObject(obj)
{
    obj.className = "visible"
}
function hideObject(obj)
{
    obj.className = "hidden"
}
</script>
</head>



Атрибут, описывающий язык скрипта, необязателен лишь в том случае, если мы используем язык java_!_sctipt, но те же правила хорошего тона требуют указывать этот атрибут.

Обратите внимание, что при задании функций мы не использовали явных ссылок на уникальный идентификатор слоя, а воспользовались заданием переменной obj. В языке java_!_sctipt можно присваивать значение и тип переменных автоматически, и для каждого нового подменю мы можем использовать новое значение переменной, что позволит нам использовать одни и те же функции для обработки событий в разных слоях.

Добавим теперь атрибуты onmouseover (курсор находится над слоем) и onmouseout (курсор находится вне слоя) в тэг <div>, описывающий видимую часть меню. С помощью onmouseover вызовем функцию showObject для объекта Nav1 (невидимого слоя), а с помощью onmouseout - функцию hideObject для него же. В целом описание видимого слоя теперь будет выглядеть так:

КОД
Код
1
<div style="position: absolute; top: 20px; left: 20px;"
onmouseover="java script:showObject(Nav1)"
onmouseout="java script:hideObject(Nav1)">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>



Но этого недостаточно. Нам нужно еще, чтобы список подразделов оставался видимым, когда наш посетитель захочет нажать на нем одну из ссылок. Для этого нужно прописать невидимому слою абсолютно аналогичные обработчики событий. Вам с первого взгляда может показаться, что при такой постановке вопроса список подразделов может вдруг "возникнуть из ничего", если наш гость случайно заедет курсором в область его расположения, но на самом деле это не так. Логика браузера Internet Explorer такова, что скрытые объекты нечувствительны к событиям мыши, поэтому обработчики событий будут действовать лишь тогда, когда слой станет видимым после наведения курсора на область названия раздела. Окончательная запись кода нашей странички будет выглядеть так:

КОД
Код
1
<HTML>
<HEAD>
<TITLE>Пример выпадающего меню</TITLE>
<style>
.hidden {position: absolute; visibility: hidden;}
.visible {position: absolute; visibility: visible; z-index: 2;}
</style>
<script language="JavaScript">
function showObject(obj) {
    obj.className = "visible"
}
function hideObject(obj) {
    obj.className = "hidden"
}
</script>
</HEAD>
<body topmargin=0 leftmargin=0>
<div style="position: absolute; top: 20px; left: 20px;"
onmouseover="java script:showObject(Nav1)"
onmouseout="java script:hideObject(Nav1)">
<img src="images/nav1.gif" width="110" height="20" border="0">
</div>
<div id="Nav1" class="hidden"
style="position: absolute; top: 40px; left: 20px;"
onmouseover="java script:showObject(Nav1)"
onmouseout="java script:hideObject(Nav1)">
<img src="images/1.gif" width="110" height="20">
<br>
<img src="images/2.gif" width="110" height="20">
<br>
<img src="images/3.gif" width="110" height="20">
<br>
<img src="images/4.gif" width="110" height="20">
</div>
</body>
</HTML>
67890


Осталось только прописать ссылки к картинкам, да еще неплохо было бы для видимого слоя, если он по вашему замыслу не будет являться самостоятельной ссылкой, задать свойство cursor: hand; чтобы посетителю стало ясно, что это не просто картинка, а область управления.

Если теперь добавить абсолютно позиционированный баннер в область невидимого слоя и задать ему z-index равным единице, то наше меню будет выпадать поверх баннера.

Вот и все, теперь для создания полноценной навигационной панели вам осталось только добавить нужное количество видимых и невидимых слоев, не забывая прописывать каждому невидимому слою свой уникальный идентификатор и обращаться именно к нему в соответствующих обработчиках событий. Если вам лень высчитывать значения top и left для абсолютного позиционирования элементов страницы, вы можете с успехом поместить слои внутрь ячеек таблицы, но свойство position: absolute; (без значений top и left) должно остаться, иначе ваша табличка расползется![/php]
Serg_pnz Дата: 11.02.2009, в 17:38 | Сообщение №4
Serg_pnz
Администратор
Пользователь №: 1
Сообщений: 2242

moskmii, ты что-нить юзаешь на mootools? Типа мой календарь или Мои фавориты?... Посмотрел - календарь. Будет тебе менюшка выезжающе-заезжающая... Напиши только принцип работы. как по кликам смена должна идти?
В конце-концов от чата можно оторвать.

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
moskmii Дата: 11.02.2009, в 18:14 | Сообщение №5
moskmii
Активный участник
Пользователь №: 96
Сообщений: 184

Да на этом сайте как раз стоит твой календарь!

Нужно также как здесь http://kprfnsk.ru/ горизонтальное меню вверху-поцентру.

Т.е. при наведении на одну область (картинку) появлялся столбик (список) подменю при на жатии на ссылки которого происходил переход на нужную страницу!
shadow Дата: 11.02.2009, в 22:30 | Сообщение №6
shadow
Активный участник
Пользователь №: 520
Сообщений: 100

Serg_pnz, не буду плодить еще тему, вопрос (точнее просьба похожая)
- может и мне поможешь, нужен рататор картинок (превьюшек) без перезагрузки страници. требования просты возможность задать ширину превьюшки, возможность генерить список картинок в пхп и ссылок так чтоб каждая картинка куда неть вела. тоесть выводится одна картинка и согласно сгенренному списку подменяется (или прокручивается) через интервал времени,
вот в принципе в помощь кое что нарыл...
Код
1
http://www.efectorelativo.net/laboratory/noobSlide/
http://www.phatfusion.net/slideshow/
http://lifedraft.de/projekte/dhonishow/
http://www.blogbuka.ru/ajax-flash-php.html


ротатор по первой ссылке вполне утроил если бы просто в автомате прокручивал картинку без всяких кнопо плей - стоп, и картинки были бы ссылками.....

ну и соотвнтственно запихнуть это в боковой блок....

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно shadow 11.02.2009 г. в 22:34:23
moskmii Дата: 13.02.2009, в 09:06 | Сообщение №7
moskmii
Активный участник
Пользователь №: 96
Сообщений: 184

У меня табличная верстка, т.е. рисунок при наводе на который должен появлятся скрытый слой находится в ячейке, при добовлении вышеописанного кода у меня изображение съезжает и весь дизайн шапки тоже...
Serg_pnz Дата: 13.02.2009, в 15:06 | Сообщение №8
Serg_pnz
Администратор
Пользователь №: 1
Сообщений: 2242

shadow, подумаю...

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
Serg_pnz Дата: 13.02.2009, в 15:20 | Сообщение №9
Serg_pnz
Администратор
Пользователь №: 1
Сообщений: 2242

Установка выезжаещего меню (на mootools) (для тех, кто уже использует эту библиотеку)
Написано по 2.5 (не принципиально)

1. Качаем архив и распаковываем его в папку ajaxscripts

2. В config_header.php после
Код
1
echo      "<script type=\"text/javascript\" src=\"ajaxscripts/mootools.js\"></script>";
вставляем
Код
1
echo      "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"ajaxscripts/MenuMooToo/MenuMooToo.css\">";
echo      "<script type=\"text/javascript\" src=\"ajaxscripts/MenuMooToo/MenuMooToo.js\"></script>";


3. В template.php в function themeheader($head) вствляем
Код
1
$menu001 = "<span id=\"menu001\">menu001</span><div id=\"menu001log\">001</div> | ";
$menu002 = "<span id=\"menu002\">menu002</span><div id=\"menu002log\">002</div> | ";


4. В index.html там, где надо, вставляем $menu001 и $menu002


Преимущество такого подхода: подменю в пункте 3 можно набирать динамически, скриптом, например, если это разделы модуля или статьи или что еще, что часто меняется.

Прикрепленные файлы:

Скачать: 967 Bytes

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
patriot Дата: 13.02.2009, в 16:32 | Сообщение №10
patriot
Участник
Пользователь №: 349
Сообщений: 92

shadow, http://onlinews.ru/index.php верхний блок справа устроит?
shadow Дата: 13.02.2009, в 17:50 | Сообщение №11
shadow
Активный участник
Пользователь №: 520
Сообщений: 100

patriot, да вполне....
но если он смагет еще и пару текстовых слов с картинкой выводить, и с картинкой прокручивать, вообще супер будет, но и так уже хорошо...

Serg_pnz, или если кто то еще менюшку поставит, дайте линк где пример посмотреть.....

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно shadow 13.02.2009 г. в 17:54:10
Serg_pnz Дата: 14.02.2009, в 09:56 | Сообщение №12
Serg_pnz
Администратор
Пользователь №: 1
Сообщений: 2242

shadow, да чего там смотреть? я без эффектов сделал. просто есть/нет.

Ротатор подобный стоял у меня - там было место для текста.

Кстати, patriot, у тебя 1,2, а у shadow 1.1 не забудь.

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
shadow Дата: 14.02.2009, в 20:42 | Сообщение №13
shadow
Активный участник
Пользователь №: 520
Сообщений: 100

пипл, эт конечно все здорово - что у патриота есть и сергей что то сделал, и то что у кого то с ифектама а у когото нет, и то что у кого то что то там 1.2, да мне все это без разници..........
- но может кто неть что то выложит уже???
shadow Дата: 14.02.2009, в 20:45 | Сообщение №14
shadow
Активный участник
Пользователь №: 520
Сообщений: 100

Serg_pnz, а ты о чем "patriot, у тебя 1,2, а у shadow 1.1 не забудь" это вы о чем? если про mootools и блок колендаря, то на этом сайте его нет....
moskmii Дата: 14.02.2009, в 21:36 | Сообщение №15
moskmii
Активный участник
Пользователь №: 96
Сообщений: 184

Цитата
4. В index.html там, где надо, вставляем $menu001 и $menu002


Можно пример не очень понятно куда эту переменную девать...
moskmii Дата: 14.02.2009, в 22:28 | Сообщение №16
moskmii
Активный участник
Пользователь №: 96
Сообщений: 184

PHP - Код
1
2
3
<?php
$menu001
= "<span id=\"menu001\">[b]menu001[/b]</span><div id=\"menu001log\">001</div> | ";
?>


Вобщем вставляю вместо этого menu001 картинку с сылкой или же просто картинку, а в индекс темы переменную (константу) $menu001, результат белая страница

Если просто текст то он отображается, но с ним отображается и  подкатегория, а должна тиолько при наведении мыши...наверно...

и какая должна быть "граматика" написания подразделов так верно?

PHP - Код
1
2
3
<?php
$menu001
= "<span id=\"menu001\">[b]menu001[/b]</span><div id=\"menu001log\">001</div> | <div id=\"menu001log\">002</div> | <div id=\"menu001log\">003</div> | ";
?>


и можноли вместо  001,002... вставлять картинки и ссылки?
Serg_pnz Дата: 15.02.2009, в 11:31 | Сообщение №17
Serg_pnz
Администратор
Пользователь №: 1
Сообщений: 2242

Цитата
Можно пример не очень понятно куда эту переменную девать...

Фтыкай в индекс темы та, куда нужно.


Это неправильно. В данном случае id должны быть уникальны
Цитата
$menu001 = "<span id=\"menu001\">menu001</span><div id=\"menu001log\">001</div> | <div id=\"menu001log\">002</div> | <div id=\"menu001log\">003</div> | ";



Спан и див должны идти парами.
Код
1
<span id=\"menu001\">[b]menu001[/b]</span><div id=\"menu001log\">001</div> |

Код
1
<span id=\"menu002\">[b]menu002[/b]</span><div id=\"menu002log\">002 тут подпункты должны быть</div> |


_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно Serg_pnz 15.02.2009 г. в 11:32:55

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот
patriot Дата: 16.02.2009, в 01:30 | Сообщение №18
patriot
Участник
Пользователь №: 349
Сообщений: 92

Serg_pnz, спасибо, что внимание обратил.
shadow, да, об этой библиотеке.

у меня это не просто блок - модуль целый. и выводить можно что угодно. выкладывать я не стану..
может Serg_pnz, если пожелает
moskmii Дата: 16.02.2009, в 10:43 | Сообщение №19
moskmii
Активный участник
Пользователь №: 96
Сообщений: 184

Так а картинки и ссылки можно втыкать вместо текста (названия катигории, подкатегории)?

вот так:

PHP - Код
1
2
3
<?php
$glavnaya
= "<span id=\"menu001\"><a href="http://www.mkkprf.ru/"><img src="images/glavnaea.gif" width="61" height="10" border="0" align="absmiddle"></a></span><div id=\"menu001log\">001</div> | <div id=\"menu001log\">002</div> | <div id=\"menu001log\">003</div>";
?>


_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно moskmii 16.02.2009 г. в 10:47:28
Serg_pnz Дата: 16.02.2009, в 11:13 | Сообщение №20
Serg_pnz
Администратор
Пользователь №: 1
Сообщений: 2242

moskmii, да, только кавычки заслешь.
И убери наконец дивы с одним и тем же id - не будет так работать!

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно Serg_pnz 16.02.2009 г. в 11:14:30

Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот

Вы не можете ответить в тему анонимно, пожалуйста, войдите или зарегистрируйтесь!


Реклама
Главная | Форум | Новости | Подписка на новости | Темы новостей | Добавить новость | Каталог файлов | Карта файлового архива | Публикации | Опросы | Анкета пользователя | Чат | BestMaker | Викторина | Архив новостей | Карманный оракул | Поиск по сайту с помощью Яндекс | Поиск по сайту с помощью Google | Фото дня | Для души | Погода на 3 дня | IndexCat | IndexTop | Map_Pages | Весь Оракул

Rambler's Top100

Генерация страницы: 0.274 сек. и 17 запросов к базе данных за 0.026 сек.
Web site engine code is Copyright © 2006 by SLAED CMS. All rights reserved.