» »

Горизонтальное меню с круглыми иконками


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

Для того чтобы именно данное меню отображалось у вас, необходимо скачать сами иконки и залить к себе на сайт через файловый менеджер заменив потом в коде на свои в верхней части сайта и добавить этот код непосредственно на сайт

Код
<div id="menu4">
<ul>
<li class="k84">
<a href="/">
<span class="title"><img src="http://uwebik.ru/css/glavnaja_menju.png"/></span>
<span class="text">Главная</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/katalog_fajlov.png"/></span>
<span class="text">файлы</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/news.png"/></span>
<span class="text">Новости</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/games.png"/></span>
<span class="text">Игры</span>
</a>
</li>
<li class="k84"><a href="">
<span class="title"><img src="http://uwebik.ru/css/forum.png"/></span>
<span class="text">Форум</span>
</a>
</li>
</ul>


затем в стили (css) добавить

Код
#menu4 ul {
list-style:none;

}
#menu4 ul li{
margin-left:20px;
float: left;

}
#menu4 ul li a{
text-decoration:none;
}
#menu4 ul li a span{
display:block;
}

#menu4 ul li a:hover span.title{
color:#00adef;
}
#menu4 ul li a span.text{
padding:0px 20px;
font-family: Georgia, serif;
font-size: 25px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#000;
visibility:hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}

.k84 {font-weight:bold;
cursor:pointer;
opacity:0.7;
background:#fff;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border:0px solid #000;
}
.k84:hover {font-size:30px;
font-weight:bold;
cursor:pointer;
opacity:1;
background:#fff;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border:10px solid #fff;
}


Материал подготовлен ресурсом uwebik и проверить можно посмотрев эту навигацию в реале.

10.08.2015 Загрузок: 6 Просмотров: 1223 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 23.08.2015 03:121
0
Хочу этот скрипт переделать и в шапку поставить с другими картинками, думаю должно получиться.
First
First 23.08.2015 03:422
0
Можно и эти картинки по меньше сделать
Kosten
Kosten 23.08.2015 04:073
0
Пробовал установить, и меньше ставят, можно реально поставить, время нужно.. у меня комп купленный со вчерашнего дня не распечатан, 40 тон за него отдал и пока реально не распечатал. biggrin
kredit-oformi
kredit-oformi 29.08.2015 20:414
0
Kosten, а куды ты хочешь этот поставить?
Kosten
Kosten 29.08.2015 21:285
0
Да пробовал одну фишку сделать. Так получилась, всемя нужно доработать.
ZruBkul
ZruBkul 05.09.2015 19:076
0
Смотря на демо и не могу понять а куда его можно установить.
Kosten
Kosten 05.09.2015 19:297
0
ДА, оно большое, но можно все же переделать и поставить к примеру другое изображение а также покататься в стилях и создать как вам нужно.
avatar