ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Прозрачное горизонтальное меню Bully для uCoz

Прозрачное горизонтальное меню Bully для uCoz

Прозрачное горизонтальное меню Bully для uCoz
Очень простое по своим функциям и самим стилям Прозрачное горизонтальное меню для uCoz которое подойдет отлично на игровые или на кино онлайн портал. Так как можно заметить оно будет на самом верху и не ниже, это так задумано. Есть сайты, где очень большой верх сайта или шапка с картинкой основном идет как фон. И вот для такого будет отличный вариант навигаций. Создано почти на чистом CSS, только одна ссылка, это когда при клике или наведение на рубрику, появляется внизу как подчеркнуто, только в своем оригинале.

Чтоб понять, сделал две демонстраций, просто отлично настраивается по своему оттенку. По умолчанию будет светлым, что можно посмотреть ниже.





Отвечать за смену гаммы или прозрачности будет в стилях.

Код
background-color:rgba(0,0,0,0.05);


Находим и меняем если вам нужно, к примеру как здесь.



Теперь поставил совершенно другой фон, скажем так по темнее, где красок по больше и немного затемнил и так смотрим.



Установка каркаса:

Код
<div class="topMp" style="display: block;">
<div class="topM">
<a href="http://zornet.ru/">Главная</a>
<a href="/news/">Новости</a>
<a href="/forum/">Форум</a>
<a href="/blog/">Блог</a>
<a href="http://zornet.ru">ZORNET.RU</a>
<a href="/">Торрент</a>
<a href="/">Баннеры</a>
<a href="/">Клан</a>
<a href="/">Магазин</a>
<a href="/">F.A.Q.</a>
</div></div>


CSS:

Код
.topMp {
position:fixed;
margin:0 auto;
top:10px;
height:50px;
width:100%;
background-color:rgba(0,0,0,0.05);
padding-top:25px;
margin-bottom:20px;
z-index:500;
}

.topM a {
font-size: 26px;
color: #EEEEEE;
font: 18px 'BebasNeueRegular';
padding: 12px 20px;
text-transform: uppercase;
text-decoration: none;

}

.topM a:hover {
background: url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-bg.png) bottom center no-repeat;
height: 36px;
color:red;
}

.buttonTopDiv a {
margin-top:20px;

}
.buttonTopDiv:hover{
opacity:1;
cursor:pointer;
}

Под каждой рубрикой есть как уже говорил, типа подчеркивает и цвет там можно только поменять на программе, типа фотошоп, так как идет ссылкой. Не стал наброски делать, чтоб просто не запутать, если нужно, думаю создадите как вам нужно, если красный оттенок не в масть.
19 Мая 2015 Просмотров: 1823 Комментариев: (3)

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

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

Оставь свой отзыв

Комментарии: 3
Kosten
Kosten 19 Мая 2015 10:341
0
Как вам такая навигация, под игры и кино онлайн отлично можно поставить и подойдет по теме своей.
kredit-oformi
kredit-oformi 19 Мая 2015 13:352
0
вроде неплохо выглядеть вот только надо попробовать и интересно на белом фоне или на любом будет прозрачно а меняется только текст
Kosten
Kosten 19 Мая 2015 14:363
0
kredit-oformi, я прописал стиль на фон, который можно менять как вам нужно, хоть прозрачно или на половину прозрачный был.
avatar