Меню с исчезающими разделами. Доработанное (с) Toshiro
По сравнению с меню с выдвижными окошками, этот вариант при наведении - выпадают.
Работает и при наведении на картинку и так же при наведении на слова. В отличии от выдвижного меню - не работает с картинками типа банграунд (фоновая картинка) только с чем то определенным
Установка
Код:<style type="text/css"> #part1, #part2,#part3,#part4,#part5,#part6 { z-index: 2; position: absolute; background: url(ссылка на фон); border: 1px dotted #цвет; visibility: hidden} </style>
<script language="JavaScript">
function part1ON() {document.getElementById("part1").style.visibility='visible'}
function part2ON(){document.getElementById("part2").style.visibility='visible'}
function part3ON(){document.getElementById("part3").style.visibility='visible'}
function part4ON(){document.getElementById("part4").style.visibility='visible'}
function part5ON() {document.getElementById("part5").style.visibility='visible'}
function part6ON() {document.getElementById("part6").style.visibility='visible'}
function part1OFF() {document.getElementById("part1").style.visibility='hidden'}
function part2OFF(){document.getElementById("part2").style.visibility='hidden'}
function part3OFF(){document.getElementById("part3").style.visibility='hidden'}
function part4OFF(){document.getElementById("part4").style.visibility='hidden'}
function part5OFF(){document.getElementById("part5").style.visibility='hidden'}
function part6OFF(){document.getElementById("part6").style.visibility='hidden'}
</script>
<a href="" onMouseOver="part1ON()" onMouseOut="part1OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part1" style="height: auto; width:200px" onMouseOver="part1ON()" onMouseOut="part1OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part2ON()" onMouseOut="part2OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part2" style="height: auto; width:200px" onMouseOver="part2ON()" onMouseOut="part2OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part3ON()" onMouseOut="part3OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part3" style="height: auto; width:200px" onMouseOver="part3ON()" onMouseOut="part3OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part4ON()" onMouseOut="part4OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part4" style="height: auto; width:200px" onMouseOver="part4ON()" onMouseOut="part4OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part5ON()" onMouseOut="part5OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part5" style="height: auto; width:200px" onMouseOver="part5ON()" onMouseOut="part5OFF()">
Текст в выпадающем окне</div>
<a href="" onMouseOver="part6ON()" onMouseOut="part6OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part6" style="height: auto; width:200px" onMouseOver="part6ON()" onMouseOut="part6OFF()">
Текст в выпадающем окне</div>
Описание/Заполнение меню
Данный вариант меню рассчитано на 6 блоков.
Если вам понадобится дополнительный блок тогда в следующей части продублируйте последний эллемент с изменением на один то есть ,#part7 (если понадобится далее - то также)
#part1, #part2,#part3,#part4,#part5,#part6 {
Если вы добавляете ячейку, то конечно в части что вы вставляете вниз вы тоже должны добавить по строке
function part7ON() {document.getElementById("part7").style.visibility='visible'}
(в части ON)
function part7OFF(){document.getElementById("part7").style.visibility='hidden'}
(в части OFF)
Ничего не спутайте! Если вы вставите что то не туда или пронумеруйте неправильно - то скрипт сработает на предыдущую ячейку с наложением.
Ну и при добавлении очередной ячейки в объявление так же не забудьте ее добавить
<a href="" onMouseOver="part7ON()" onMouseOut="part7OFF()"><img src="ссылка на картинку при наведении" alt="название при "неактивно" "></a> </div>
<div id="part7" style="height: auto; width:200px" onMouseOver="part7ON()" onMouseOut="part7OFF()">
Текст в выпадающем окне</div>
Выделенные цифры при добавлении очередной ячейки увеличиваются так же на один
Далее, что касается именно заполнения и внешнего вида:
background: url(ссылка на фон);
- если вы хотите поставить в выплывающее окно картинку
background-color: #цвет;
- если же просто цвет
border: 1px dotted #цвет;
- часть отвечающая за обрамление выплывающего окна. Цифра что красным - толщина, далее следует элемент бордюра и далее его основной цвет
<img src="ссылка на картинку при наведении" alt="название при "неактивно" ">
- ставится уже непосредственно в объявление - в случае если вы хотите сделать выплывание окна при наведении на картинку
Если же вам нужен просто текст, тогда в эту часть нужно в место этой части написать наш текст
width:200px"
- ширина выплывающего окна
Текст в выпадающем окне
- сюда вы должны ввести то, что у вас будет находится в окне.
Теги: скрипт, меню, Toshiro,mybb
