» »

Раздвижное меню для сайта без CSS


Представляю меню без стилей CSS, так как стили идут сразу с кодом который если будите устанавливать то не в блок сайта. Дизайн создан на высоте, но его можно поменять, первая ссылка, эта ссылка на цвет, можете создать свой цвет под свой дизайн сайта вот эта ссылка. Очень разнообразное меню которое может подойти под любую тематику и на разделы поставить иконки, что очень стильно будит. но это на ваш выбор.
http://zornet.ru/zornet_ru5/pagebg.jpg
А здесь вы можете расширять или уменьшать меню, располагается она в самом начале кода.
Код
.side-navigation{width:205px

Код
<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>  

<script type="text/javascript" src="http://zornet.ru/zornet_ru5/m_color.js"></script>
12.08.2012 Просмотров: 1716 Комментарий: (15)

Поделиться в социальных сетях

Материал разместил

Комментарий: 13
Kosten
Kosten 12.08.2012 13:321
+1
Да, это меню не надо вставлять в блок сайта!
viksTazZz
viksTazZz 15.09.2012 14:342
0
Оно с КСС просто в тег <style> поставлен biggrin
Kosten
Kosten 15.09.2012 14:403
0
viksTazZz, истину говоришь
usenok2908
usenok2908 15.12.2012 18:494
0
а как поменять цвет шрифта????
Kosten
Kosten 15.12.2012 22:035
0
Не видел не одного меню такого с другим шрифтом cool
usenok2908
usenok2908 15.12.2012 22:256
0
не я имею ввиду цвет букв как поменять не белый а другой?????? biggrin
Kosten
Kosten 15.12.2012 23:247
0
Нет не как!
usenok2908
usenok2908 15.12.2012 23:428
0
жаль(((((((((((99
Kosten
Kosten 16.12.2012 00:159
0
usenok2908, точно не скажу, думаю можно что придумать, но ща по коду вижу что нэд!
Kosten
Kosten 16.12.2012 01:0610
0
usenok2908, тут точно не скажешь, дай хоть глянуть сайт!
1 2 »
avatar