» »

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


Это очень прекрасная навигация, где можно выставить разделы и под них категорий. Так как оно раздвижное, то возможно вся информация сайта разместится в нем. Очень красиво смотрится на светлом дизайне и также под свою гамму оттенка. В нем также есть кнопки, которые располагаются тематически, что облегчает пользователю найти тот раздел, который ему нужен. Если у вас нет той кнопки, то вы можете найти или поменять, так как они на ссылках или поставить свою.

Установка:

Сам код на меню:

Код
<div id="sidebar" class="lcol">  
  <div class="block leftmenu">  
  <ul class="lmenu reset">  
  <li><a href="/"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177435_home.png"> Главная</span></a></li>  
  <li><a href="/"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177488_forum.png"> Форум</span></a></li>  
  <li><a href="/"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177431_comment.png"> Последние комментарии</span></a></li>  
  <li><a href="http://mixlip.ru"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177477_search.png"> Поиск</span></a></li>  
  <li><a href="/"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177456_unread.png"> Непрочитанное</span></a></li>  
  <li><a href="/ucoz/" onclick="$('#ucoz-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177627_ucoz.png"> Всё для uCoz <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
  <div class="dcont" id="ucoz-menu" style="display:none">  
  <ul class="reset">  
  <li><a href="/"><span>- Скрипты для uCoz</span></a></li>  
  <li><a href="/"><span>- Шаблоны для uCoz</span></a></li>  
  <li><a href="/"><span>- Кнопки для форума</span></a></li>  
  <li><a href="/"><span>- Иконки для форума</span></a></li>  
  <li><a href="/"><span>- Иконки групп</span></a></li>  
  <li><a href="/"><span>- Ранги</span></a></li>  
  <li><a href="/"><span>- Остальное</span></a></li>  
  <li><a href="/"><span>- Видео уроки по uCoz</span></a></li>  
  </ul>  
  </div>  
   
   
  <ul class="lmenu reset">  
  <li><a href="/dle/" onclick="$('#dle-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177746_dle.png"> Всё для DLE <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
  <div class="dcont" id="dle-menu" style="display:none">  
  <ul class="reset">  
   
  <li><a href="/">- Релизы</a></li>  
  <li><a href="/">- Шаблоны</a></li>  
  <li><a href="/">- Модули</a></li>  
  <li><a href="/">- Хаки</a></li>  
  </ul>  
  </div>  
   
   
   
  <ul class="lmenu reset">  
  <li><a href="/ipb/" onclick="$('#ipb-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177706_ipb.png"> Всё для IP.Board <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
  <div class="dcont" id="ipb-menu" style="display:none">  
  <ul class="reset">  
   
  <li><a href="/">- Релизы</a></li>  
  <li><a href="/">- Скины</a></li>  
  <li><a href="/">- Модификации</a></li>  
  <li><a href="/">- Хуки</a></li>  
  </ul>  
  </div>  
   
   
   
   
  <ul class="lmenu reset">  
  <li><a href="/photoshop/" onclick="$('#ps-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177750_photoshop.png"> Всё для Photoshop <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
  <div class="dcont" id="ps-menu" style="display:none">  
  <ul class="reset">  
  <li><a href="/"><span>- Кисти</span></a></li>  
  <li><a href="/"><span>- Стили</span></a></li>  
  <li><a href="/"><span>- Psd исходники</span></a></li>  
  <li><a href="/"><span>- Градиенты</span></a></li>  
  <li><a href="/"><span>- Плагины</span></a></li>  
  <li><a href="/"><span>- Уроки</span></a></li>  
  </ul>  
  </div>  
   
   
   
   
   
   
  <ul class="lmenu reset">  
  <li><a href="/pay/" onclick="$('#pay-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177856_pay.png"> Платное <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
  <div class="dcont" id="pay-menu" style="display:none">  
  <ul class="reset">  
   
  <li><a href="/">- Шаблоны</a></li>  
  <li><a href="/">- Модули и скрипты</a></li>  
  <li><a href="/">- Графика и PSD</a></li>  
  </ul>  
  </div>  
   
   
  <ul class="lmenu reset">  
  <li><a href="http://mixlip.ru//articles/" onclick="$('#articles-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177861_article.png"> Статьи <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
   
   
   
  <div class="dcont" id="articles-menu" style="display:none">  
  <ul class="reset">  
  <li><a href="/"><span>- Статьи веб-мастеру </span></a></li>  
  <li><a href="/"><span>- Статьи по uCoz </span></a></li>  
  <li><a href="/"><span>- Раскрутка сайта</span></a></li>  
  <li><a href="/"><span>- Статьи по HTML</span></a></li>  
  <li><a href="/"><span>- Статьи по CSS</span></a></li>  
  <li><a href="/"><span>- Статьи по javascript</span></a></li>  
  </ul>  
  </div>  
   
  <ul class="lmenu reset">  
  <li><a href="http://mixlip.ru/" onclick="$('#news-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177847_news.png"> Новости <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
  <div class="dcont" id="news-menu" style="display:none">  
  <ul class="reset">  
  <li><a href="/"><span>- Новости сайта </span></a></li>  
  <li><a href="/"><span>- Новости Интернета </span></a></li>  
  </ul>  
  </div>  
   
  <ul class="lmenu reset">  
  <li><a href="#" rel="nofollow" onclick="$('#serv-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177864_service.png"> Сервис <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>  
  <div class="dcont" id="serv-menu" style="display:none">  
  <ul class="reset">  
  <li><a href="/"><span>- Словарь веб-мастера <sup><b>Beta</b></sup></span></a></li>  
  <li><a href="/"><span>- Все цвета Рунета</span></a></li>  
  </ul>  
  </div>  
   
   
  <ul class="lmenu reset">  
  <li><a href="javascript://" onclick="$('#site-menu').slideToggle('slow');return false;"><span><img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/1364177962_info.png"> Мы <img src="http://zornet.ru/CSS-ZORNET/ND/ZRET/arrow-down.png" alt="" align="absmiddle"></span></a></li>  
  </ul>


CSS:

Код
13px;font-size:1.3em}.block  
  .dcont{background:url("http://zornet.ru/CSS-ZORNET/ND/ZRET/greytop.png") repeat-x 0 2px;padding:13px}.leftmenu{background-color:#3a3a3a}.leftmenu  
  a{color:#fff}.lmenu a, .lmenu a  
  span{cursor:pointer;display:block}.lmenu  
  a{text-shadow:0 1px 0 #000;text-decoration:none;background:url("http://zornet.ru/CSS-ZORNET/ND/ZRET/lmenuhov.png") no-repeat 0 -999px;padding:7px  
  0 8px 0;width:100%;border-top:1px solid #404040;border-bottom:1px solid #1e1e1e}.lmenu a  
  span{padding:0  
  13px}.lmenu a:hover{text-shadow:0 1px 0 #B25803;border-top:1px solid #FFE207;border-bottom:1px solid #211200;background:url("http://zornet.ru/CSS-ZORNET/ND/ZRET/lmenuhov.png") repeat}.leftmenu  
  .dcont{background:#505050 url("http://zornet.ru/CSS-ZORNET/ND/ZRET/1364178224_lmenucont.jpg") no-repeat}#bvote .btl  
  h4{margin-top:12px;float:left;font-size:1em}#bvote .btl  
  .vresult{margin-top:11px;float:right}.vtitle{margin-top: -20px;padding:10px  
  0 0 0;display:block;color:#fff;text-shadow:0px 0px 1px #B25803;position:relative;background:#FFCC05 url("http://zornet.ru/CSS-ZORNET/ND/ZRET/1364178176_vtitle.png") no-repeat}.vtitle  
  b{width:194px;padding:0  
  10px 24px 10px;display:block;background:url("http://zornet.ru/CSS-ZORNET/ND/ZRET/1364178176_vtitle.png") no-repeat -214px 100%}.vresult{width:31px;height:25px;padding:0;background:url("http://zornet.ru/CSS-ZORNET/ND/ZRET/1364178204_vresult.png") no-repeat 100% 0}.vresult:hover{background-position:0 -25px}.votefoot{text-align:center;padding:11px  
  13px;border-top:1px solid #d7d7d7;background:#f7f7f7 url("http://zornet.ru/CSS-ZORNET/ND/ZRET/votefoot.png") repeat-x 0 -1px}.vote, #dle-poll-list  
  div{clear:both;padding:2px

22.01.2016 Просмотров: 527 Комментарий: (22)

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

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

Комментарий: 22
ucozmental
ucozmental 22.01.2016 19:131
0
Меню так не чего, но сколько там ссылок, в первые такое вижу.
Kosten
Kosten 22.01.2016 19:162
0
Вот чего, чего, этого добра хватает, но основном идут на кнопки и дизайн, нужно понимать, что оно еще раздвижное и вы можете сами выстраивать, какой раздел будет таким.
Tergran
Tergran 22.01.2016 19:293
0
Не очень такие виды меню нравятся, но все же их можно часто увидеть на сайте.
ТОРНАДО
ТОРНАДО 22.01.2016 19:364
0
Костен а источник где?
Kosten
Kosten 22.01.2016 19:495
0
Не знаю кто это меню создавал.
ТОРНАДО
ТОРНАДО 22.01.2016 19:536
0
костен ты взрослый чел давай сэтого исходить
Kosten
Kosten 22.01.2016 20:008
0
ТОРНАДО, ты о чем, ставлю только реальные источники, если ты его делал, и создал, нет проблем поставлю.
Tergran
Tergran 22.01.2016 19:577
0
Костен я точно не уверен, но оно первое появилось на этом сайте mixlip.ru, думаю он тоже не источник, это просто с DLE взято.
Kosten
Kosten 22.01.2016 20:019
0
Да, мне тоже показалось что это адаптация, просто на одном сайте который на ДЛЕ видел эту навигацию.
ТОРНАДО
ТОРНАДО 22.01.2016 20:0110
0
ну да я промолчу!
Tergran
Tergran 22.01.2016 20:0311
0
Оно появилось в 2013, ТОРНАДО вы про какой сайт говорите.
ТОРНАДО
ТОРНАДО 22.01.2016 20:0512
0
Кто оно вы про че пока я его не вывел в свет ни кто бы его и неузнал на нынешний день че вы тут делегу развели зайди ко мне на сайт сам все увидиш!
Kosten
Kosten 22.01.2016 20:1413
0
Ты хоть на других ресурсах так не требуй. Напишу, что предоставил, думаю нормально будет, источник дело тонкое, если нет своего материала, не чего требовать, а что ты вывел его, так я на сайте mixlip.ru/ucoz/menu_sait/357-temnoe-vertikalnoe-razdvizhnoe-menyu-dlya-sayta.html взял скрипт, а изображение на твоем сайте, но на изображение не когда не просили источник. Ладно ставлю что предоставил.
Tergran
Tergran 22.01.2016 20:2514
0
Это не правильно, хотя тебе видней.
ТОРНАДО
ТОРНАДО 22.01.2016 20:2615
0
Костен Ты не прав!
Kosten
Kosten 22.01.2016 20:2916
0
Хватить разводить бардак, если найдется реально кто его делал, там и будет источник.
Tergran
Tergran 22.01.2016 20:3317
0
ТОРНАДО, ты очень странный молодой человек, по твоему, видать везде твой источник должен стоять или только на этом сайте.
kredit-oformi
kredit-oformi 22.01.2016 20:3718
0
Блин да какая разница кто где что это код взял?? ну давайте будем каждый свое творчество подписывать и сертификацию делать, а тем кто скопировал сразу в суд подавать начнемм.....
Имхо мое мнение взяли твое творчество скопировали, надо наоборот радоваться значит понравилось и не жалко пусть пользуются люди biggrin
Kosten
Kosten 22.01.2016 20:4919
0
kredit-oformi, вообще не любитель терки вести в интернете, другое дело реал, в свое время хлебом не корми, дай только порамсить, наверно старею б...я.)
kredit-oformi
kredit-oformi 22.01.2016 20:5320
0
Цитата Kosten
терки вести в интернете

проще головой о стену чем в интернете набить кому то лицо)))
1 2 »
avatar