» »

Прозрачное горизонтальное меню 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.05.2015 Просмотров: 701 Комментарий: (3)

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

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

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