А я так старался)
1 вопрос: А иконки шрифта font-family: 'Socialico'; -подходят?
2 вопрос: (nav.ph-lift1 > ul > li ) допустимо свойство display: inline-block; ?
Честно говоря не знал о свойстве content: attr(data-title);! Но меня удивляет почему нет display: inline-block; ? мой знакомый говорил что его надо использовать везде -это эстетичнее или я ошибаюсь?
попробуй это может поможет:
нужно в проекте добавить паку fonts
<!DOCTYPE html>
<html>
<head>
<title>Layout Sheet</title>
<link rel="stylesheet" href="main.css">
<!-- <meta http-equiv="refresh" content="1; URL=http://zxc-1projekt-work-flru.e/" /> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<nav class="ph-lift1">
<ul>
<li class="active"><a href="#home" data-title="Головна"><div data-title="Головна"><i class="fa fa-home"></i>
<div class="new1">
<p>E</p>
</div>
Головна</div></a></li>
<li class="active"><a href="#pronas" data-title="Про нас"><div data-title="Про нас">
<div class="new1">
<p>G</p>
</div>
Про нас</div></a> </li>
<li class="active"><a href="#Novini" data-title="Новини"><div data-title="Новини">
<div class="new1">
<p>K</p>
</div>
Новини</div></a> </li>
<li class="active"><a href="#galerea" data-title="Документи"><div data-title="Документи">
<div class="new1">
<p>L</p>
</div>
Документи</div></a> </li>
<li class="active"><a href="#Document" data-title="Галерея"><div data-title="Галерея">
<div class="new1">
<p>X</p>
</div>
Галерея</div></a></li>
<li class="active"><a href="#Ozdorov" data-title="Оздоровлення"><div data-title="Оздоровлення">
<div class="new1">
<p>R</p>
</div>
Оздоровлення</div></a> </li>
<li class="active"><a href="#Pravo" data-title="Правовий захист"><div data-title="Правовий захист">
<div class="new1">
<p>F</p>
</div>
Правовий захист</div></a> </li>
<li class="active"><a href="#Contact" data-title="Контакти"><span data-title="Контакти">
<div class="new1">
<p>Y</p>
</div>
Контакти</span></a> </li>
<ul>
</nav>
</body>
</html>
/*new-css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
ol, ul {
list-style: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
body {
color: #3e3831;
background: #f2f2f2 url("bg.jpg") repeat;
font-family: AgoraSansProRegular;
line-height: 1.5em;
}
nav {
min-width: 800px;}
nav ul {
position: relative; }
nav > ul:after {
content: "";
position: absolute;
width: 50%;
border-radius: 40%;
height: 40px;
bottom: 0;
left: 20%;
box-shadow: 0 0 10px rgba(28, 110, 126, 0.5);
z-index: -1; }
nav > ul:hover:after {
bottom: 5px; }
nav.ph-lift {
text-align: center; }
nav.ph-lift > ul {
display: inline-block;
position: relative; }
nav.ph-lift > ul:after {
box-shadow: 0 0 10px rgba(0, 128, 128, 0.5); }
nav.ph-lift ul li {
/*float: left;*/
display: inline-block;
height: 90px;
line-height: 90px;
background: white;
overflow: hidden;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;}
nav.ph-lift ul li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
background: teal; }
nav.ph-lift ul li a {
display: block;
text-decoration: none;
color: #007e7e;
padding: 0 45px;
margin-top: 0;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease; }
nav.ph-lift ul li:hover a {
margin-top: -90px;
color: white;
text-shadow: 0 1px 2px black; }
nav.ph-lift ul li a:after {
content: attr(data-title);
display: block; }
nav.ph-lift1 {
text-align: center; }
nav.ph-lift1 ul {
display: inline-block; }
nav.ph-lift1 ul:after {
box-shadow: 0 0 10px rgba(85, 107, 47, 0.5); }
nav.ph-lift1 > ul > li {
/*float: left; */
display: inline-block;
}
nav.ph-lift1 ul li {
height: 80px;
line-height: 80px;
background: white;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;}
nav.ph-lift1 ul li ul {
max-height: 0;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
overflow: hidden;
display: block; }
nav.ph-lift1 ul li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
background: darkolivegreen; }
nav.ph-lift1 ul li:hover ul {
max-height: 300px; }
nav.ph-lift1 ul li a {
display: block;
overflow: hidden;
text-decoration: none;
color: #546a2f;
height: 80px; }
nav.ph-lift1 ul li ul li a {
color: #7e7e00; }
nav.ph-lift1 ul li ul li:hover {
background: olive; }
nav.ph-lift1 ul li a div {
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;
display: block;
padding: 0 40px; }
nav.ph-lift1 ul li:hover > a div {
margin-top: -80px;
color: white;
text-shadow: 0 1px 2px black; }
nav.ph-lift1 ul li a div:after {
content: attr(data-title);
display: block; }
/**/
/**/
/*ph13_1518_ Oleg*/
@font-face {
font-family: 'Socialico';
src: url('fonts/Socialico.ttf') format('truetype') ;
src: url('fonts/Socialico.ttf') format('truetype') ;
src: url('fonts/Socialico-webfont.ttf') format('truetype') ;
src: url('fonts/Socialico.ttf') format('truetype') ;
src: url('fonts/Socialico.ttf') ;
src: url("fonts/Socialico.eot");
src: url("fonts/Socialico.eot?#iefix") format("embedded-opentype"),
url("fonts/Socialico.woff") format("woff"),
url("fonts/Socialico.ttf") format("truetype"),
url("fonts/Socialico.svg#JournalRegular") format("svg");
}
.new1{
border: 1px solid #4d4d4d;
color: #4d4d4d;
/*padding: 2.25% 0% 2.1% 2.72%;*/
font-size: 1.91em;
/*width: 3%;*/
/*width: 7%;*/
/*width: 15%;*/
/*width: 20%;*/
font-family: 'Socialico';
float: left;
}
/*ph13_1518_ Oleg*/
/**/
/**/