• Страница 1 из 1
  • 1
Раздвижное меню "гармошка"
StranNiKДата: Вторник, 08.01.2013, 18:36 | Сообщение # 1

Группа: Администраторы
Сообщений: 129
Репутация: 12
Статус:
Награды
За создание сайта За хорошую репутацию За 100 Сообщений
Всем доброго времени суток! Вот представляю вашему вниманию меню-гармошку для темных шаблонов например для "EXTRA-LOGO".
Установка:
1. Для начала скачиваете АРХИВ, открываете его и раскладываете файлы по папочкам с таким же названием (в корне сайта), а именно images и js
2. Заходите в "панель управления" --> "Управление дизайном" --> "Глобальные блоки" --> "Первый контейнер" и вставляете блок (т.е. этот код в то место где будет отображаться меню):
Код
<!-- <block5> -->
<table border="0" cellpadding="0" cellspacing="0" class="boxTable">
<tr><td class="boxTitle">Главное меню</td></tr>
       <tr><td class="boxContent"><div class="accordion">
       <h3>Главное меню</h3>
       <p class="linked">
       <a href="/">Главная страница</a><br/>
       <a href="/gb/">Гостевая книга</a><br/>
       <a href="/index/0-3">Обратная связь</a><br/>
       <a href="/board/">Доска объявлений</a><br/>
       <a href="/publ/">Каталог статей</a><br/>
       <a href="/dir/">Каталог сайтов</a><br/>
       <a href="/blog/">Блог</a><br/>
       <a href="/faq/"><font color="#ff8c00">FAQ (вопрос/ответ)</font></a><br/>
       </p>
       <h3>Компьютер</h3>
       <p class="linked">
       <a href="/load/">Каталог файлов</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       </p>
       <h3>Отдохни</h3>
       <p class="linked">
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       </p>
       <h3>Форум</h3>
       <p class="linked">
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       <a href="/">Пусто</a><br/>
       </div>
             
       </td></tr><tr><td class="boxBottom">
</td></tr></table>
<!-- </block5> -->

3. Установим стиль...Заходите в "Панель управления" --> "Управление дизайном" --> "Таблица стилей (CSS)" и в самом низу вставляем это....
Код
/* ACCORDION MENU */

.accordion h3 { font-size : 12px; color : #fff; padding-left : 10px; background : url(../images/accordion.png) no-repeat right 0; line-height :32px; height : 32px; cursor : pointer; margin : 0; text-align : left; font-weight : bold; font-family: Arial, Helvetica, sans-serif; }
.accordion h3:hover { color : #ffa; background-image: url(../images/accordion.png); background-repeat: no-repeat; background-position: right -32px; }
.accordion h3.active { background : url(../images/accordion.png) no-repeat right -64px; }
.accordion h3.active:hover { background : url(../images/accordion.png) no-repeat right -96px; }
.accordion p { display : none; margin : 0; padding : 7px 0 7px 7px; }
.accordion a { font-size : 11px; color : #fff; text-align : left; font-weight : bold; padding-left : 15px; }
.accordion p.linked a { background : url(../images/bull.gif) no-repeat 4px 50%; padding-left: 20px; text-decoration: none; }
.accordion p.linked a:hover { background : url(../images/bulls.gif) no-repeat 8px 50%; text-decoration: none; }
div.accordion a:visited {color:#fff;text-shadow:0px 1px 0px #000000;}
div.accordion a:hover {color:#ccc;text-shadow:0px 1px 0px #000000;}

4. Ну и теперь самое последнее включаем саму "менюху-аккордеон":
Заходите в "Панель управления" --> "Управление дизайном" --> "Быстрая замена" выбираем "Режим замены" "многострочный" в панель "что заменить" вставляем
Код
</body>

а в панель "на что заменить"
Код
</body>
<script language="javascript" type="text/javascript" src="/js/accordion.js"></script>
     
 
  • Страница 1 из 1
  • 1
Поиск: