| Форум -> Полезные решения -> Выезжающее вниз меню | | Выезжающее вниз меню |
|---|
| moskmii | Дата: 11.02.2009, в 14:23 | Сообщение №1 |  
Активный участникПользователь №: 96
Сообщений: 184
 | Прикручиваю выезжающее вниз меню, но не получается...
Может кто подскажет подробную инструкцию... |
| | | Serg_pnz | Дата: 11.02.2009, в 14:56 | Сообщение №2 |  
АдминистраторПользователь №: 1
Сообщений: 2243
| | moskmii, какое именно? |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
| | | moskmii | Дата: 11.02.2009, в 16:39 | Сообщение №3 |
Активный участникПользователь №: 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> |
Осталось только прописать ссылки к картинкам, да еще неплохо было бы для видимого слоя, если он по вашему замыслу не будет являться самостоятельной ссылкой, задать свойство cursor: hand; чтобы посетителю стало ясно, что это не просто картинка, а область управления.
Если теперь добавить абсолютно позиционированный баннер в область невидимого слоя и задать ему z-index равным единице, то наше меню будет выпадать поверх баннера.
Вот и все, теперь для создания полноценной навигационной панели вам осталось только добавить нужное количество видимых и невидимых слоев, не забывая прописывать каждому невидимому слою свой уникальный идентификатор и обращаться именно к нему в соответствующих обработчиках событий. Если вам лень высчитывать значения top и left для абсолютного позиционирования элементов страницы, вы можете с успехом поместить слои внутрь ячеек таблицы, но свойство position: absolute; (без значений top и left) должно остаться, иначе ваша табличка расползется![/php] |
| | | Serg_pnz | Дата: 11.02.2009, в 17:38 | Сообщение №4 |
АдминистраторПользователь №: 1
Сообщений: 2243
| moskmii, ты что-нить юзаешь на mootools? Типа мой календарь или Мои фавориты?... Посмотрел - календарь. Будет тебе менюшка выезжающе-заезжающая... Напиши только принцип работы. как по кликам смена должна идти?
В конце-концов от чата можно оторвать. |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
| | | moskmii | Дата: 11.02.2009, в 18:14 | Сообщение №5 |
Активный участникПользователь №: 96
Сообщений: 184
| Да на этом сайте как раз стоит твой календарь!
Нужно также как здесь http://kprfnsk.ru/ горизонтальное меню вверху-поцентру.
Т.е. при наведении на одну область (картинку) появлялся столбик (список) подменю при на жатии на ссылки которого происходил переход на нужную страницу! |
| | | shadow | Дата: 11.02.2009, в 22:30 | Сообщение №6 | 
Активный участникПользователь №: 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 |
Активный участникПользователь №: 96
Сообщений: 184
| | У меня табличная верстка, т.е. рисунок при наводе на который должен появлятся скрытый слой находится в ячейке, при добовлении вышеописанного кода у меня изображение съезжает и весь дизайн шапки тоже... |
| | | Serg_pnz | Дата: 13.02.2009, в 15:06 | Сообщение №8 |
АдминистраторПользователь №: 1
Сообщений: 2243
| | shadow, подумаю... |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
| | | Serg_pnz | Дата: 13.02.2009, в 15:20 | Сообщение №9 |
АдминистраторПользователь №: 1
Сообщений: 2243
| Установка выезжаещего меню (на 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 |  
УчастникПользователь №: 349
Сообщений: 92
| | shadow, http://onlinews.ru/index.php верхний блок справа устроит? |
| | | shadow | Дата: 13.02.2009, в 17:50 | Сообщение №11 |
Активный участникПользователь №: 520
Сообщений: 100
| patriot, да вполне....
но если он смагет еще и пару текстовых слов с картинкой выводить, и с картинкой прокручивать, вообще супер будет, но и так уже хорошо...
Serg_pnz, или если кто то еще менюшку поставит, дайте линк где пример посмотреть.....
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно shadow 13.02.2009 г. в 17:54:10 |
| | | Serg_pnz | Дата: 14.02.2009, в 09:56 | Сообщение №12 |
АдминистраторПользователь №: 1
Сообщений: 2243
| shadow, да чего там смотреть? я без эффектов сделал. просто есть/нет.
Ротатор подобный стоял у меня - там было место для текста.
Кстати, patriot, у тебя 1,2, а у shadow 1.1 не забудь. |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
| | | shadow | Дата: 14.02.2009, в 20:42 | Сообщение №13 |
Активный участникПользователь №: 520
Сообщений: 100
| пипл, эт конечно все здорово - что у патриота есть и сергей что то сделал, и то что у кого то с ифектама а у когото нет, и то что у кого то что то там 1.2, да мне все это без разници..........
- но может кто неть что то выложит уже??? |
| | | shadow | Дата: 14.02.2009, в 20:45 | Сообщение №14 |
Активный участникПользователь №: 520
Сообщений: 100
| | Serg_pnz, а ты о чем "patriot, у тебя 1,2, а у shadow 1.1 не забудь" это вы о чем? если про mootools и блок колендаря, то на этом сайте его нет.... |
| | | moskmii | Дата: 14.02.2009, в 21:36 | Сообщение №15 |
Активный участникПользователь №: 96
Сообщений: 184
| | Цитата | | 4. В index.html там, где надо, вставляем $menu001 и $menu002 |
Можно пример не очень понятно куда эту переменную девать... |
| | | moskmii | Дата: 14.02.2009, в 22:28 | Сообщение №16 |
Активный участникПользователь №: 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 |
АдминистраторПользователь №: 1
Сообщений: 2243
| | Цитата | | Можно пример не очень понятно куда эту переменную девать... |
Фтыкай в индекс темы та, куда нужно.
Это неправильно. В данном случае 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 |
УчастникПользователь №: 349
Сообщений: 92
| Serg_pnz, спасибо, что внимание обратил.
shadow, да, об этой библиотеке.
у меня это не просто блок - модуль целый. и выводить можно что угодно. выкладывать я не стану..
может Serg_pnz, если пожелает  |
| | | moskmii | Дата: 16.02.2009, в 10:43 | Сообщение №19 |
Активный участникПользователь №: 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 |
АдминистраторПользователь №: 1
Сообщений: 2243
| moskmii, да, только кавычки заслешь.
И убери наконец дивы с одним и тем же id - не будет так работать!
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Отредактированно Serg_pnz 16.02.2009 г. в 11:14:30 |
Не все кальсоны с оторванными пуговицами - брюки. © Serg_pnz
"...даме водки? Это чистый спирт!" © кот Бегемот |
| | |
Вы не можете ответить в тему анонимно, пожалуйста, войдите или зарегистрируйтесь!
|
|
