Красивое горизонтальное меню 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;} | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
