Горизонтальное меню сайта в цвете серебра
Меню сайта горизонтальное, в цветовом оттенке серебра, но а точнее сказать матовой гамме. Что мне в меню понравилось когда его проверял. Код идет сразу со стилями. А это означает вы быстро можете его подогнать под свой дизайн сайта если сам исходник не понравился. Еще у него надписи на стилях, а это значит у них просматривается тень, что очень редко на таком коде увидишь и вы сами можете делать больше и меньше. Идет под меню с разделами и при на видений становиться синем цветом. На этом меню можно много информация разместить и все будит на главной страницы что для портала это не мало важно. Чтоб пользователь или гость мог найти все не искать и не блудит по всему сайту, и как водится просто уходит. Установка: Ставим код где вам нужно, но основном в вверх сайта и идем в самый них и прописываем код. Чтоб меню было под шапкой. Код <style> #menu-bar { /* - Ширина меню установлена в 100% - */ width:100%; margin: 0px 0px 0px 0px; padding: 6px 6px 0px 6px; /* - Высота меню - */ height: 38px; line-height: 100%; /* - Округление краёв - */ border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; /* - Тени - */ box-shadow: 2px 2px 3px #666666; -webkit-box-shadow: 2px 2px 3px #666666; -moz-box-shadow: 2px 2px 3px #666666; /* - Цвет фона - */ background: #8B8B8B; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A); background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A)); background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A); /* - Бордюр,окаёмка - */ border: solid 1px #6D6D6D; } #menu-bar li { margin: 0px 6px 0px 6px; padding: 0px 0px 6px 0px; float: left; position: relative; list-style: none; } #menu-bar a { /* - Величина шрифта - */ font-weight: bold; /* - Семейство шрифта - */ font-family: arial; /* - Стиль шрифта - */ font-style: normal; /* - Размер шрифта - */ font-size: 12px; /* - Цвет шрифта - */ color: #E7E5E5; text-decoration: none; display: block; padding: 8px 20px 8px 20px; margin: 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; text-shadow: 2px 2px 3px #000000; } #menu-bar .current a, #menu-bar li:hover > a { background: #0399D4; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1); background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1)); background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1); color: #444444; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:hover a, #menu-bar li:hover li a { background: none; border: none; color: #666; -box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } #menu-bar ul a:hover { background: #0399D4 !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA); background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important; background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important; color: #FFFFFF !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 2px 2px 2px #FFFFFF; } #menu-bar ul { background: #DDDDDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF); background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF); display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 30px; left: 0; border: solid 1px #B4B4B4; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 3px #222222; -moz-box-shadow: 2px 2px 3px #222222; box-shadow: 2px 2px 3px #222222; } #menu-bar li:hover > ul { display: block; } #menu-bar ul li { float: none; margin: 0; padding: 0; } #menu-bar ul a { padding:10px 0px 10px 15px; color:#424242 !important; font-size:12px; font-style:normal; font-family:arial; font-weight: normal; text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:first-child > a { border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; } #menu-bar ul li:last-child > a { border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; } #menu-bar:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #menu-bar { display: inline-block; } html[xmlns] #menu-bar { display: block; } * html #menu-bar { height: 1%; } </style> <ul id="menu-bar"> <li class="current"><a href="#">Главная страница ZORNET.RU</a></li> <li><a href="#">ZORNET.RU</a> <ul> <li><a href="http://zornet.ru/_ld/2/43968886.jpg">ZORNET.RU</a></li> <li><a href="#">Products Sub Menu 2</a></li> <li><a href="#">Products Sub Menu 3</a></li> <li><a href="#">Products Sub Menu 4</a></li> </ul> </li> <li><a href="#">ZORNET.RU</a> <ul> <li><a href="http://zornet.ru/_ld/35/18535970.jpg">Services Sub Menu 1</a></li> <li><a href="#">Services Sub Menu 2</a></li> <li><a href="#">Services Sub Menu 3</a></li> <li><a href="#">Services Sub Menu 4</a></li> </ul> </li> <li><a href="http://zornet.ru/avatar/12/569149.jpg">ZORNET.RU</a></li> <li><a href="#">ZORNET.RU</a></li> </ul> |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |