| Не знаю повтор или нет, поправите если да , скрипт сразу говорю не мой, нашел на просторах интернета, так что автор не сердись В общем вот скрин: Установка: 1. Создаем блок, у меня к примеру он называется MENU. Можете ставить следующий код и без создания блока, но с блоком редактировать меню будет на много проще и удобнее. 2. Вставляем в него: Code <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript Dropdown Menu Demo</title> <link rel="stylesheet" href="dropdown.css" type="text/css" /> <script type="text/javascript" src="dropdown.js"></script> </head> <body> <div class="floatleft"> <div class="ddheader" id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Путеводитель</div> <div class="ddcontent" id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> <div class="ddinner"> <ul> <li class="underline"><a class="m" href="ссылка">Название ссылки</a></li> </ul> </div> </div> </div>
<div class="floatleft"> <div class="ddheader" id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Развитие персонажа</div> <div class="ddcontent" id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)"> <div class="ddinner"> <ul> <li class="underline"><a class="m" href="ссылка">Название ссылки</a></li> </ul> </div> </div> </div>
<div class="floatleft"> <div class="ddheader" id="tree-ddheader" onmouseover="ddMenu('tree',1)" onmouseout="ddMenu('tree',-1)">Информация по игре</div> <div class="ddcontent" id="tree-ddcontent" onmouseover="cancelHide('tree')" onmouseout="ddMenu('tree',-1)"> <div class="ddinner"> <ul> <li class="underline"><a class="m" href="ссылка">Название ссылки</a></li> </ul> </div> </div> </div>
<div class="floatleft"> <div class="ddheader" id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">Информация по квестам</div> <div class="ddcontent" id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)"> <div class="ddinner"> <ul> <li class="underline"><a class="m" href="ссылка">Название ссылки</a></li>
</ul> </div> </div> </div> 3. Сохраняем. 4. Идем в таблицу стилей CSS 5. Добавляем: Code body {margin:0px; font:12px Arial, Helvetica, sans-serif} .floatleft {float:left; padding-right:5px} .ddheader {width:188px; border:0px solid #000000; padding:8px; font-weight:bold; margin-top:0px; cursor:pointer; background:url(ССЫЛКА НА КАРТИНКУ)} .ddheader:hover {background:url(ССЫЛКА НА КАРТИНКУ)} .ddcontent {position:absolute; overflow:hidden; width:208px; display:none; background:#000; z-index:200} .ddinner {width:204px; border:2px solid #000000; border-top:none} .ddinner ul {display:block; list-style:none; margin:0; padding:0; background:#000000} .ddinner li {margin:0; padding:5px; cursor:pointer} .ddinner li:hover {background:#000000} .underline {border-bottom:1px solid #000000} 6. Сохраняем. 7. Загружаем этот ява скрипт в файловый менеджер (в корень) - http://dump.ru/file/2544048 8. Идем в конструктор шаблонов, загружаем свой и вставляем блок/код в нужное вам место Внимание! Если Вы используете свой (не стандартный) шаблон, сохранение его каркаса может привести к сбою/удалению различных модификаций. Так что заранее предупреждаю, откройте страницы с редактированием "Общий вид страниц форума" "Вид материалов" (форума) и "Форма добавления сообщения" (форум), скопируйте от туда все свои модификации, и уж потом сохраняйте каркас. Этот скрипт ставьте на свой страх и риск, к потере данных это не приводит, только можете прибавить себе пару минут работы если будете не аккуратны Просьба в модераторам отредактировать пост дабы были видны: скрин и ссылка, мне не доступны такие ББ коды
|