Скрипт красивого раздвижного меню для сайта
Kosten
Воскресенье, 12 Августа 2012, 00:49 | Сообщение 1
О раздвижном меню: Скрипт красивого раздвижного меню для сайта ucoz, в чем его оригинальность его не надо ставить в блок сайта, просто в первый контейнер в верх прописать код, и меню установлено.Что еще хорошего в этом меню его можно регулировать, и также менять цвет на какой вы захотите.Код
<style> .side-navigation{width:205px;background:url('http://zornet.ru/zornet_ru5/pagebg.jpg') #291C16;box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin-bottom:10px;color:#fff} .side-navigation .block-head{color:#fff;font-size:18px;font-family:arial,tahoma;padding:4px 8px;border-bottom:1px solid #000} .side-navigation .block-inner{padding-bottom:2px} .side-block .block-inner{padding:5px;} .side-block .block-inner.nopadding{padding:0px !important;} .zp-links a{display:block;color:#fff;padding:4px 8px;border-bottom:1px solid #000;border-top:1px solid #3B2D2A;text-shadow:0px 1px 0px #000;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;font-weight:bold;outline:none;text-decoration:none;} .zp-links a:hover{color:#FFB32E;padding-left:14px;background:rgba(0,0,0,0.2)} .zp-links a.w-sub{background:url('http://zornet.ru/zornet_ru5/submenu-btn.png') no-repeat;background-position:190px 7px} .zp-links a.w-sub:hover{background:url('http://zornet.ru/zornet_ru5/submenu-btn.png') no-repeat rgba(0,0,0,0.2);background-position:195px 7px} .zp-links .s-level a.w-sub{font-weight:bold;background-position:182px 7px} .zp-links .s-level a.w-sub:hover{background-position:190px 7px} .zp-links .s-level{padding-left:22px} .zp-links .s-level a{border-left:2px solid #FFB32E;font-weight:normal} .zp-links .s-level a:hover{padding-left:8px;margin-left:-8px} </style> <div class="side-navigation"> <div class="block-head" style="padding:5px 8px 0px 8px;"><img src="http://zornet.ru/zornet_ru5/nav-block-title.png" alt="Навигация"></div> <div class="block-inner"> <div class="zp-links"> <a title="Главная" href="http://zornet.ru/">Главная</a> <a title="Форум игрока" href="http://zornet.ru/forum/">На форум</a> <a title="Новости" href="/news/">Новости</a> <a title="Музыка" href="/blog/">Музыка</a> <a title="Статьи" href="/publ/">Статьи</a> <a title="ФотоZал" href="/photo/" >ФотоZал</a> <a title="КиноZал" href="/stuff/" >КиноZал</a> <a title="Обзор Игр" href="/board" >Обзор Игр</a> <a title="Файловый архив" href="/load" >Файловый архив</a> <a title="Мониторинг серверов" href="/dir" >Мониторинг серверов</a> <a rel="soft-menu" class="w-sub" href="javascript://">uCoz</a> <div class="s-level" id="soft-menu" style="display: none"> <a title="Шаблоны для Ucoz" href="/load/13" >Шаблоны</a> <a title="Скрипты для Ucoz" href="/load/14" >Скрипты</a> <a title="Шапки для Ucoz" href="/load/15" >Шапки</a> <a title="Смайлы и Иконки для Ucoz" href="/load/16" >Смайлы и Иконки</a> <a title="PSD Баннера 468x60 и 88x31" href="/load/47" >PSD Баннера</a> <a title="Часы для Ucoz" href="/load/48" >Часы</a> <a title="Иконки групп для Ucoz" href="/load/50" >Иконки групп </a> </div> <a rel="games-menu" class="w-sub" href="javascript://">Counter-Strike 1.6</a> <div class="s-level" id="games-menu" style="display: none"> <a title="Консольные команды для Counter strike 1.6" href="/load/19" >Консольные команды</a></a> <a title="Готовые Сервера для Counter strike 1.6" href="/load/20" >Готовые Сервера </a> <a title="Модели Игроков для Counter strike 1.6" href="/load/21" >Модели Игроков </a> <a title="Модели Оружия для Counter strike 1.6" href="/load/22" >Модели Оружия</a> <a title="Анти-читы для Counter strike 1.6" href="/load/23" >Анти-читы </a> <a title="Плагины для Counter strike 1.6" href="/load/24" >Плагины </a> <a title="Карты для Counter strike 1.6" href="/load/25" >Карты </a> <a title="Читы для Counter strike 1.6" href="/load/26" >Читы </a> <a title="Боты для Counter strike 1.6" href="/load/44" >Боты</a> <a title="Звуки для Counter strike 1.6" href="/load/45" >Звуки</a> <a title="Моды для Counter strike 1.6" href="/load/46" >Моды</a> <a title="Config.cfg Конфиги для Counter strike 1.6" href="/load/51" >Config.cfg Конфиги</a> </div> <a rel="kino-menu" class="w-sub" href="javascript://">Counter-Strike: Source</a> <div class="s-level" id="kino-menu" style="display: none"> <a title="Скачать Counter-Strike:Source" href="/load/29">Counter-Strike:Source</a> <a title="Скачать Counter-Strike:Source" href="/load/30">Программы</a> <a title="Скачать Counter-Strike:Source" href="/load/32">Плагины</a> <a title="Скачать Counter-Strike:Source" href="/load/33">Античиты</a> <a title="Скачать Counter-Strike:Source" href="/load/34">Карты</a> <a title="Скачать Counter-Strike:Source" href="/load/35">Модели игроков</a> <a title="Скачать Counter-Strike:Source" href="/load/36">Модели оружия</a> <a title="Скачать Counter-Strike:Source" href="/load/56">Готовые сервера</a> </div> <a rel="pers-menu" class="w-sub" href="javascript://">MINECRAFT</a> <div class="s-level" id="pers-menu" style="display: none"> <a title="Моды для minecraft" href="/load/38">Моды</a> <a title="Клиенты для minecraft" href="/load/39">Клиенты</a> <a title="Текстуры для minecraft" href="/load/42">Текстуры</a> <a title="Карты для minecraft" href="/load/43">Карты</a> <a title="Софт для minecraft" href="/load/40">Софт</a> <a title="Разное для minecraft" href="/load/41">Разное</a> </div> <a rel="webmaser-menu" class="w-sub" href="javascript://">Персональный компютер (PC)</a> <div class="s-level" id="webmaser-menu" style="display: none"> <a rel="dle-menu" class="w-sub" href="javascript://">Программы</a> <div class="s-level" id="dle-menu" style="display: none"> <a title="Релизы" href="/webmaster/dle/releases/">Релизы</a> <a title="Шаблоны" href="/webmaster/dle/dle-tempalates/">Шаблоны</a> <a title="Модули" href="/webmaster/dle/modules/">Модули</a> <a title="Скрипты" href="/webmaster/dle/dle-scripts/">Скрипты</a> </div> <a rel="ipb-menu" class="w-sub" href="javascript://">Игры</a> <div class="s-level" id="ipb-menu" style="display: none"> <a title="Скины" href="/webmaster/ipb/skins/">Скины</a> <a title="Модификации" href="/webmaster/ipb/modifications/">Модификации</a> <a title="Модули" href="/webmaster/ipb/ipb-modules/">Модули</a> </div> </div> </div> </div> </div> <script type="text/javascript"> $(function(){ $(".s-level").hide(); $(".zp-links a.w-sub").click(function(){ var submenu = $(this).attr('rel'); $("#"+submenu+"").toggle('fast'); }); }); </script>
Ссылка:/zornet_ru5/pagebg.jpg, можно ее менять и будит другой цвет меню. Код
.side-navigation{width:205px - менять увеличение, делать уже ну и шире меню.
Сообщение отредактировал -SAM- - Среда, 29 Января 2020, 17:22
Страна: (RU )
Delete
Воскресенье, 12 Августа 2012, 02:53 | Сообщение 2
ты же вылаживал такое же меню...
На случай если буду нужен, то я там же, где и был, когда был не нужен...
Страна: (RU )
Kosten
Воскресенье, 12 Августа 2012, 11:34 | Сообщение 3
Не то с CSS а это без!
Страна: (RU )
Delete
Воскресенье, 12 Августа 2012, 12:15 | Сообщение 4
Kosten, здесь ксс в
На случай если буду нужен, то я там же, где и был, когда был не нужен...
Страна: (RU )
Kosten
Воскресенье, 12 Августа 2012, 13:49 | Сообщение 5
Да хрен с ним, главное рабочее!
Страна: (RU )
-SAM-
Среда, 29 Января 2020, 14:23 | Сообщение 6
Оно частично нерабочее, как понял.
Цитата Kosten (
)
<script type="text/javascript" src="/zornet_ru5/m_color.js"></script>
Доступно только для пользователей //
UPD.: вообще оно лишнее, что просто убрать из кода его (видать, ошибочно захватили довеском функционал с того сайта; скрипт подключает в head стили те, они не нужны - меню не касаются совсем).
P.S.: та же проблема и
здесь была (файл и скрипт
m_color.js довеском - только делает за ненужным содержимым запрос к сайту, где еще и домен нерабочий).
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно. Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Сообщение отредактировал -SAM- - Среда, 29 Января 2020, 17:23
Страна: (UA )
Kosten
Среда, 29 Января 2020, 15:10 | Сообщение 7
Цитата -SAM- (
)
Оно частично нерабочее, как понял.
Ранее работало, что на сайт ставил. Здесь возможно поменять и поставить по функциям схожее? Для тех, кто хочет установить меню, то по сути оно рабочее. Убираем эффект под категорий: Скрипт для навигаций:Код
<style> .side-navigation{width:235px;background:url('http://zornet.ru/zornet_ru5/pagebg.jpg') #291C16;box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin-bottom:10px;color:#fff} .side-navigation .block-head{color:#fff;font-size:18px;font-family:arial,tahoma;padding:5px 8px 0px 8px;border-bottom:1px solid #000} .side-navigation .block-inner{padding-bottom:2px} .zp-links a{display:block;color:#fff;padding:4px 8px;border-bottom:1px solid #000;border-top:1px solid #3B2D2A;text-shadow:0px 1px 0px #000;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;font-weight:bold;outline:none;text-decoration:none;} .zp-links a:hover{color:#FFB32E;padding-left:14px;background:rgba(0,0,0,0.2)} </style> <div class="side-navigation"> <div class="block-head"><img src="http://zornet.ru/zornet_ru5/nav-block-title.png" alt="Навигация"></div> <div class="block-inner"> <div class="zp-links"> <a title="Главная" href="http://zornet.ru/">Главная</a> <a title="Форум игрока" href="http://zornet.ru/forum/">На форум</a> <a title="Новости" href="/news/">Новости</a> <a title="Музыка" href="/blog/">Музыка</a> <a title="Статьи" href="/publ/">Статьи</a> <a title="ФотоZал" href="/photo/">ФотоZал</a> <a title="КиноZал" href="/stuff/">КиноZал</a> <a title="Новости" href="/news/">Новости сайта</a> <a title="Музыка" href="/blog/">Музыка настроение</a> <a title="Статьи" href="/publ/">Тематические статьи</a> </div> </div> </div>
Так получится:See the Pen меню сайта by Kocsten (@kocsten ) on CodePen .
Страна: (RU )
-SAM-
Среда, 29 Января 2020, 15:53 | Сообщение 8
Цитата Kosten (
)
Для тех, кто хочет установить меню, то по сути оно рабочее, только под меню здесь уже не работает, что не устанавливаем скрипт.
Тот скрип не имеет отношения к материалу вообще, я же всё написал.
За подменю там отвечает всё, где идёт s-level.
UPD.: ок, убрали уже файл (и я убрал из кода ссылку на него, чтобы не обращалось к тому, чего более нет).
UPD.2: Цитата Kosten (
)
Возможно, когда у вас будет время, вы все исправите, и закинем на каталог файлов на главную сайта.
В личку просто дал код, чтобы в своё сообщение выше закинули.
Убрал довески (как и написал, что нужно было убрать всё, где s-level + скрипт тот был лишний для разворота, он как спойлер). В конце еще лишние закрывающие div-ы были. По сути, что обычное меню, если нет того функционала, который изначально шёл (без суб-меню теперь).
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно. Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Сообщение отредактировал -SAM- - Пятница, 31 Января 2020, 04:43
Страна: (UA )
Kosten
Среда, 29 Января 2020, 16:00 | Сообщение 9
Но в том скрипте нашел только ссылку на стили. Просто хотел убрать функцию битую и просто оставить меню, а что вы описали, это безусловно познавательно, но здесь не каждый поймет как что делать, так как зашел на сайт, и не понял как не нем работать. Возможно, когда у вас будет время, вы все исправите, и закинем на каталог файлов на главную сайта.
Страна: (RU )