» »

Горизонтальное резиновое меню Inspire для uCoz


Выполнено очень красиво и подойдет под любую тему Горизонтальное резиновое меню Inspire для uCoz, так как его оттенок цвета оригинален, что подойдет на любой дизайн. Как можно заметить на одной рубрике расположены углы, и это говорит о том, что на раздел был наведен курсор. Его перекрасили и сделали немного светлее, чтоб не сливался с основной гаммой. По умолчанию, его можно только было растянуть на Photoshop, но ๖ۣۜInspire переделал стили и добавил один файл и теперь вы можете устанавливать на свой ресурс, как с широким так и с узким каркасом. Цвет написанного вы можете поменять на свой, который идет у вас как основа, а остальное просто ставим код и стили закидываем CSS, можно в самый низ.

Код
<ul class="menu">  
  <li><a class="first" href="/">Главная</a></li>  
  <li><a href="/load/skripty_dlja_ucoz/81">Скрипты сайта</a></li>  
  <li><a href="/">ZORNET.RU</a></li>  
<li><a href="/">Блог</a></li>  
  <li><a href="/load/shablony_dlja_ucoz/142">Шаблоны сайта</a></li>  
<li><a href="/load/menju_dlja_ucoz/84">Меню сайта uCoz</a></li>  
  <li><a href="/">Дизайн сайта</a></li>  
<li><a href="/">Обратная Связь</a></li>  
<li><a href="/">О сайте</a></li>
  </ul>


И чтоб приобрел данную форму.

Код
ul.menu {list-style:none;padding:0;margin:0;width: inherit;height:36px;line-height:300%;font-weight:600;background: url('http://zornet.ru/CSS-ZORNET/Grety/Menu-2/left-zr.jpg') no-repeat left, url('http://zornet.ru/CSS-ZORNET/Grety/Menu-2/right-zr.jpg') no-repeat right, url('http://zornet.ru/CSS-ZORNET/Grety/Menu-2/center-zr.jpg'); ;font-size:12px; font-family:Tahoma;  
}  
ul.menu li {float:left;position:relative;height:36px;background:url('http://zornet.ru/CSS-ZORNET/Grety/Menu-2/separator-zr.png') top right no-repeat;}  
ul.menu li a {background:url('http://zornet.ru/CSS-ZORNET/Grety/Menu-2/href-zr.png') top center no-repeat;color:#A8FCFF;text-decoration:none;display:block;height:36px;padding:0 11px;margin-right:3px;overflow:hidden;text-shadow:0 1px 1px #000;}  
ul.menu li a.first {background:none;}  
ul.menu li a:hover {background:url('http://zornet.ru/CSS-ZORNET/Grety/Menu-2/hover-zr.png') top center no-repeat;}


30.05.2015 Просмотров: 700 Комментарий: (7)

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

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

Комментарий: 7
ZruBkul
ZruBkul 21.11.2015 02:101
0
Меню красиво исполнено и не широкое и не слишком узкое, вот только по цвету не подходит и думаю мало кому подойдет.
Kosten
Kosten 21.11.2015 02:152
0
ZruBkul, это не проблема, так как можно перекрасить, но только на фотошоп, так как ссылки на дизайн идут.
Maryges
Maryges 27.01.2016 00:023
0
Красивое меню, раньше его стравил и оно было не на всю ширину, здесь в демонстраций видно на всю идет, что значит на любой сайт подойдет. Это как с фиксированной шириной и без нее.
Kosten
Kosten 27.01.2016 00:084
0
Да, Горыныч со стилями что то помутил и добавил один файл изображение и теперь оно стало на всю ширину.
ucozmental
ucozmental 27.01.2016 00:095
0
Где то видел его, на сайте зеленом и тематика как помню, если не ошибаюсь игровая была.
Kosten
Kosten 27.01.2016 00:136
0
На форуме все о нем написано, что сделано и как делать, но только по этому материалу вообщем.
AnTron
AnTron 27.01.2016 00:147
0
Но видно, что его перекрасили, а так по своему дизайну, может на многие сайты подойти.
avatar