» »

Красивое горизонтальное меню TYRAN для uCoz


Красивое горизонтальное меню TYRAN для uCoz

Пошла тенденция по дизайну а точнее по навигаций, что некоторые веб мастера ее меняют. И вот как раз для таких кто дорабатывает свои ресурсы под оригинальные, этот скрипт Красивое горизонтальное меню TYRAN для uCoz которое оригинально и имеет свой стиль. У него не как у всех навигаций, здесь идет плашка и на ней будет располагаться основной код с двумя ссылками, что грузить совершенно не будет. Взял на себя ответственность и покрасил в синий цвет 2 меню, так как основном можно установить на любой фон. Тематика как можете заметить здесь большая, а точнее можно сказать вся. Есть полоса, коротая идет по низу и в плане дизайна, красивый вид имеет. Вам представлю общий каркас, в вот стили вы по гамме выберите сами, которые будут прописаны под каждой картинкой на ее.

Код:

Код
<div id="main-nav">
  <div id="catmenu">
  <!-- <sblock_menu> -->
<!-- <bc> --><ul class="ut-menu"><li class="home-item"><a href="/"><span></span></a></li>
<li><a href="http://zornet.ru/"><span>Главная </span></a></li>
<li><a href="http://zornet.ru/publ" class="current-item"><span>ZORNET.RU</span></a></li>
<li><a href="http://zornet.ru/0-4"><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></ul><script type="text/javascript">$(function(){_uBuildMenu('#uMenuDiv1',0,document.location.href+'/','uMenuItemA','uMenuArrow',2500);})</script><!-- </bc> -->
<!-- </sblock_menu> -->
   
  </div>
  </div>




CSS:

Код
#main-nav {background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu/nav.jpg);height:50px;border-bottom:3px solid #9a3334;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;border-top-left-radius:5px;border-top-right-radius:5px;}
#catmenu {/* height:50px; */}
#catmenu ul {padding:0;margin:0;list-style:none;}
#catmenu ul li {float:left;padding:0;}
#catmenu ul li a {color:#888;z-index:10;display:block;height:50px;line-height:50px;padding:0 10px;font-size:13px;text-transform:uppercase;text-decoration:none;white-space:nowrap;_width:10px;}
#catmenu ul li a.current-item,#catmenu ul li a.uMenuItemA,#catmenu ul li a:hover,#catmenu ul li.item-hover a {color:#fff;text-decoration:none;background:#9a3334 url(http://zornet.ru/CSS-ZORNET/Grety/Menu/navhov.png);}
#catmenu ul li.home-item a {height:35px;line-height:20px;padding:15px 10px 0 10px;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;}
#catmenu ul li.home-item a span {display:block;height:20px;width:20px;background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu/home.png);}
#catmenu ul li.home-item a:hover span,#catmenu ul li.home-item a.current-item span,#catmenu ul li.home-item a.uMenuItemA span {background-position:0 -20px;}
#catmenu ul ul {margin:0;padding:0;background:#9a3334;border:none;}
#catmenu ul ul ul {margin:0 0 0 180px;}
#catmenu ul ul li {background:none;padding:0;}
#catmenu ul li ul ul {margin:0 0 0 180px;}
#catmenu ul li li a {background:none;border-bottom:1px solid #a63637;color:#fff;line-height:normal;height:auto;font-size:11px;white-space:normal;text-transform:none;font-weight:normal;padding:7px 10px;height:auto;text-shadow:none;_width:auto;}
#catmenu ul li li a:hover,#catmenu ul li.item-hover li a,#catmenu ul li li a.current-item {background:none;color:#fff;text-shadow:none;}
#catmenu ul li li a:hover {background:#b23a3b;color:#fff;text-decoration:none;}


И для полной визуализации вам предлагаю посмотреть DEMO в реальности как будет.



Теперь, которое переделано в гамме синей.



Код
#main-nav {background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu/nav-654.jpg);height:50px;border-bottom:3px solid #33779A;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;border-top-left-radius:5px;border-top-right-radius:5px;}
#catmenu {/* height:50px; */}
#catmenu ul {padding:0;margin:0;list-style:none;}
#catmenu ul li {float:left;padding:0;}
#catmenu ul li a {color:#888;z-index:10;display:block;height:50px;line-height:50px;padding:0 10px;font-size:13px;text-transform:uppercase;text-decoration:none;white-space:nowrap;_width:10px;}
#catmenu ul li a.current-item,#catmenu ul li a.uMenuItemA,#catmenu ul li a:hover,#catmenu ul li.item-hover a {color:#fff;text-decoration:none;background:#9a3334 url(http://zornet.ru/CSS-ZORNET/Grety/Menu/navhov-124.png);}
#catmenu ul li.home-item a {height:35px;line-height:20px;padding:15px 10px 0 10px;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;}
#catmenu ul li.home-item a span {display:block;height:20px;width:20px;background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu/home.png);}
#catmenu ul li.home-item a:hover span,#catmenu ul li.home-item a.current-item span,#catmenu ul li.home-item a.uMenuItemA span {background-position:0 -20px;}
#catmenu ul ul {margin:0;padding:0;background:#9a3334;border:none;}
#catmenu ul ul ul {margin:0 0 0 180px;}
#catmenu ul ul li {background:none;padding:0;}
#catmenu ul li ul ul {margin:0 0 0 180px;}
#catmenu ul li li a {background:none;border-bottom:1px solid #a63637;color:#fff;line-height:normal;height:auto;font-size:11px;white-space:normal;text-transform:none;font-weight:normal;padding:7px 10px;height:auto;text-shadow:none;_width:auto;}
#catmenu ul li li a:hover,#catmenu ul li.item-hover li a,#catmenu ul li li a.current-item {background:none;color:#fff;text-shadow:none;}
#catmenu ul li li a:hover {background:#b23a3b;color:#fff;text-decoration:none;}


06.05.2015 Просмотров: 627 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 06.05.2015 21:381
0
Нашел это меню на заброшенном сайте и выдернул с дизайна. Думаю таких много, а значит что было ретро, становиться актуальным.
avatar