Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Уважаемые, подскажите новичку, как сделать меню!

Автор: Бархат 6.1.2005, 01:59

подскажите, как сделать меню навигации следующего вида: Сначала есть несколько ссылок(картинкакми). Например,
О Нас
О Проекте
Пишите нам

Как сделать так, чтобы, к примеру, при нажатии на ссылку "О проекте" меню принимало след.вид: под ссылкой "О проекте" открывались ссылки на подразделы данного раздела.
например, так...

О Нас
О Проекте

1)проект 1
2)Проект 2
3)Проект 3

Пишите нам

То есть суть в том, как сделать раскрывающееся такое меню. И желательно, чтоб главная ссылка(for ex. "О проекте") была картинкой, а то что раскроется, было текстом?

Заранее спасибо, а то очень нужно!!!! Не бросьте в беде!

Автор: Рыжий 6.1.2005, 02:05

поищи в яндексе "скрипты"
А дальше на любом сайте в разделе java scripts (а скорее всего это сделается на яве) ищи свой smile

скрипт, все очень просто

Автор: Bangladesh 6.1.2005, 03:53

Код


<HTML>
<HEAD>
<TITLE>Пример выпадающего меню</TITLE>

<!--ОПИСАНИЕ ОБЪЕКТОВ В СКРИПТЕ-->
<style>
.hidden {position: absolute; visibility: hidden;}
.visible {position: absolute; visibility: visible; z-index: 2; bgcolor:red;}
</style>

<!--САМ СКРИПТ-->
<script language="JavaScript">
function showObject(obj) {
obj.className = "visible"
}
function hideObject(obj) {
obj.className = "hidden"
}
</script>
</HEAD>

<body topmargin=0 leftmargin=0>


<!--В ЭТИ ДВА <div> ЗАКЛЮЧАЕШЬ ТОТ ОБЪЕКТ КОТОРЫЙ ВИДЕН ВСЕГДА, Т.Е. ГЛАВНЫЙ РАЗДЕЛ-->
<div style="position: absolute; top: 20px; left: 20px;"
onmouseover="javascript:showObject(Nav1)" 
onmouseout="javascript:hideObject(Nav1)">
<font>НАВЕДИ МЫШЬ :)</font>
</div>

<!--В ЭТИ ДВА <div> ЗАКЛЮЧАЕШЬ, ЧТО ВЫВОДИТСЯ ПОД ОБЪЕКТОМ-->
<div id="Nav1" class="hidden" 
style="position: absolute; top: 40px; left: 20px;"
onmouseover="javascript:showObject(Nav1)"
onmouseout="javascript:hideObject(Nav1)">
<br>
<font>Гы!</font>
<br>
<font>Гхы!</font>
<br>
<font>Гм...</font>
</div>

</body>
</HTML>

только помни, что если главных разделов несколько надо nav1 менять на nav2, nav3, nav4 и так далее в зависимости от номера раздела...

Автор: Бархат 6.1.2005, 07:42

Спасибо вам огромное! Очень благодарен!

Автор: Се ля ви 6.1.2005, 12:58

Этот вопрос должен был быть задан в раздел JavaScript...

Автор: vio 6.1.2005, 14:26

Интересно, а как сделать так что бы если таких выпадающих меню много и они расположены вертикально, то при выпадении подменю, остальные пункты сдвигались ниже. А когда мышь убирается, то все возвращается на место?

Автор: Бархат 7.1.2005, 00:53

И вот еще: подсскажите, как сделать, чтобы первый пункт(раздел) был картинкой, а подразделы- ссылками текстом?

Автор: Bangladesh 7.1.2005, 03:37

Цитата(vio @ 6.1.2005, 13:26)

дык мой скрипт именно это и делает smile

Добавлено @ 03:40

Цитата

И вот еще: подсскажите, как сделать, чтобы первый пункт(раздел) был картинкой, а подразделы- ссылками текстом?

млин... ну я же объяснил в скрипте. все, что в  - это комментарии. между первыми <div> любое на что наводится, а между вторыми <div> любое, что выдвегается.

Автор: vio 9.1.2005, 13:08

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

Автор: vio 9.1.2005, 13:52

В принципе, понятно что должно измениться, но может быть просто позицию нужно сделать относительной???
Подскажи пожалуйста как это сделать.

Код


style="position: [align=left][b]absolute[/b][/align]; top: 60px; left: 20px;"