Установленное адаптивное меню влияет на элементы сайта,как исключить влияние?

usergeyv

Пользователь
Регистрация
09.10.14
Сообщения
17
Реакции
0
Баллы
1
Подключил к сайту адаптивное меню(разные пробовал),сайт отображается коряво,как исключить влияния меню на остальные элементы сайта .Я новичок в этом деле,прошу понятного ответа,заранее спасибо.
index.html

Код:
<!doctype html>
<html lang="ru" class="no-js">
<head>	<meta charset="UTF-8">	<meta name="viewport" content="width=device-width, initial-scale=1">	<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->	<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>	<header>	<nav class="cd-main-nav-wrapper">	<ul class="cd-main-nav">	<li><a href="#0">О нас</a></li>	<li><a href="#0">Проекты</a></li>	<li><a href="#0">Блог</a></li>	<li><a href="#0">Контакты</a></li>	<li>	<a href="#0" class="cd-subnav-trigger"><span>Категории</span></a>	<ul>	<li class="go-back"><a href="#0">Меню</a></li>	<li><a href="#0">Категория 1</a></li>	<li><a href="#0">Категория 2</a></li>	<li><a href="#0">Категория 3</a></li>	<li><a href="#0">Категория 4</a></li>	<li><a href="#0">Категория 5</a></li>	<li><a href="#0" class="placeholder">Placeholder</a></li>	</ul>	</li>	</ul> <!-- .cd-main-nav -->	</nav> <!-- .cd-main-nav-wrapper -->	<a href="#0" class="cd-nav-trigger">Menu<span></span></a>	</header>	<main class="cd-main-content">	<!-- main content here -->	</main>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

css

reset.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-size: 100%;	font: inherit;	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {	display: block;
}
body {	line-height: 1;
}
ol, ul {	list-style: none;
}
blockquote, q {	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';	content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;
}
 

usergeyv

Пользователь
Регистрация
09.10.14
Сообщения
17
Реакции
0
Баллы
1
style.css
Код:
 *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { font-size: 1.6rem; font-family: "PT Sans", sans-serif; color: #33414a; background-color: #f2f2f2;
}
a { color: #7e4d7e; text-decoration: none;
}

header { position: fixed; z-index: 3; height: 50px; width: 100%; top: 0; left: 0; background-color: #33414a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;
}
header.nav-is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px);
}
header::before {  display: none; content: 'mobile';
}
@media only screen and (min-width: 1024px) { header { height: 80px; } header.nav-is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } header::before { content: 'desktop'; }
}
.cd-logo { display: inline-block; height: 100%; margin-left: 15px;  -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cd-logo img { display: block; max-width: 100%; margin-top: 14px;
}
@media only screen and (min-width: 1024px) { .cd-logo { position: absolute; z-index: 2; margin-left: 5%; } .cd-logo img { margin-top: 29px; }
}
.cd-nav-trigger { display: block; position: absolute; right: 0; top: 0; height: 100%; width: 50px;  overflow: hidden; white-space: nowrap; color: transparent;
}
.cd-nav-trigger span {  position: absolute; height: 2px; width: 20px; top: 50%; margin-top: -1px; left: 50%; margin-left: -10px; -webkit-transition: background-color 0.3s 0.3s; -moz-transition: background-color 0.3s 0.3s; transition: background-color 0.3s 0.3s; background-color: #ffffff;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {  content: ''; position: absolute; width: 100%; height: 100%; background-color: #ffffff;  -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; transition: transform 0.3s 0.3s;
}
.cd-nav-trigger span::before { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px);
}
.cd-nav-trigger span::after { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px);
}
.nav-is-visible .cd-nav-trigger span { background-color: rgba(255, 255, 255, 0);
}
.nav-is-visible .cd-nav-trigger span::before { -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after { -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg);
}
@media only screen and (min-width: 1024px) { .cd-nav-trigger { display: none; }
}
.cd-main-nav { position: fixed; z-index: 1; top: 0; right: 0; width: 260px; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; visibility: hidden; background: #1e262c; -webkit-transition: visibility 0s 0.3s; -moz-transition: visibility 0s 0.3s; transition: visibility 0s 0.3s;
}
.cd-main-nav a { display: block; font-size: 1.8rem; padding: .9em 2em .9em 1em; border-bottom: 1px solid #33414a; color: #ffffff; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
}
.cd-main-nav li ul { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px);
}
.cd-main-nav.nav-is-visible { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s;
}
.cd-main-nav.moves-out > li > a {  -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0;
}
.cd-main-nav.moves-out > li > ul { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);
}
.cd-main-nav .cd-subnav-trigger, .cd-main-nav .go-back a { position: relative;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {  content: ''; position: absolute; top: 50%; margin-top: -1px; display: inline-block; height: 2px; width: 10px; background: #485c68; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .go-back a::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
 

usergeyv

Пользователь
Регистрация
09.10.14
Сообщения
17
Реакции
0
Баллы
1
Продолжения style.css
Код:
.cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {  right: 20px; -webkit-transform-origin: 9px 50%; -moz-transform-origin: 9px 50%; -ms-transform-origin: 9px 50%; -o-transform-origin: 9px 50%; transform-origin: 9px 50%;
}
.cd-main-nav .go-back a { padding-left: 2em;
}
.cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {  left: 20px; -webkit-transform-origin: 1px 50%; -moz-transform-origin: 1px 50%; -ms-transform-origin: 1px 50%; -o-transform-origin: 1px 50%; transform-origin: 1px 50%;
}
.cd-main-nav .placeholder {  display: none;
}
@media only screen and (min-width: 1024px) { .cd-main-nav { position: static; visibility: visible; width: 100%; height: 80px; line-height: 80px;  padding: 0 5% 0 calc(5% + 124px); background: transparent; text-align: right; } .cd-main-nav li { display: inline-block; height: 100%; padding: 0 .4em; } .cd-main-nav li a { display: inline-block; padding: .8em; line-height: 1; font-size: 1.6rem; border-bottom: none;  -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s; } .cd-main-nav li a:not(.cd-subnav-trigger):hover { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .6; } .cd-main-nav .go-back { display: none; } .cd-main-nav .cd-subnav-trigger { z-index: 1; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5em; -webkit-transition: border 0.3s; -moz-transition: border 0.3s; transition: border 0.3s; } .cd-main-nav .cd-subnav-trigger:hover { border-color: rgba(255, 255, 255, 0.4); } .cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after { top: 22px; right: 17px; background-color: #ffffff;  -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: -webkit-transform 0.3s, width 0.3s, right 0.3s; -moz-transition: -moz-transform 0.3s, width 0.3s, right 0.3s; transition: transform 0.3s, width 0.3s, right 0.3s; } .cd-main-nav .cd-subnav-trigger::before { right: 23px; } .cd-main-nav .cd-subnav-trigger, .cd-main-nav .placeholder { padding-right: 2.4em; padding-left: 1.1em; } .cd-main-nav li ul { height: 80px; background-color: #7e4d7e;  padding: 0 5% 0 calc(5% + 124px); -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -o-transform: translateY(-80px); transform: translateY(-80px); -webkit-transition: -webkit-transform 0.3s 0.2s; -moz-transition: -moz-transform 0.3s 0.2s; transition: transform 0.3s 0.2s; } .cd-main-nav li ul li { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); -webkit-transition: -webkit-transform 0.3s 0s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, opacity 0.3s 0s; transition: transform 0.3s 0s, opacity 0.3s 0s; } .cd-main-nav .placeholder {  display: block; visibility: hidden; opacity: 0; pointer-event: none; } .cd-main-nav.moves-out > li > a { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .cd-main-nav.moves-out > li > ul { -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-main-nav.moves-out > li ul li { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.3s 0.2s, opacity 0.3s 0.2s; -moz-transition: -moz-transform 0.3s 0.2s, opacity 0.3s 0.2s; transition: transform 0.3s 0.2s, opacity 0.3s 0.2s; } .cd-main-nav.moves-out .cd-subnav-trigger::before, .cd-main-nav.moves-out .cd-subnav-trigger::after { width: 14px; right: 17px; } .cd-main-nav.moves-out .cd-subnav-trigger::before { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } .cd-main-nav.moves-out .cd-subnav-trigger::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
}
.cd-main-content::before {  display: none; content: 'mobile';
}
@media only screen and (min-width: 1024px) { .cd-main-content::before { content: 'desktop'; }
}
.cd-main-content { position: relative; z-index: 2; min-height: 100vh; padding-top: 50px; background-color: #f2f2f2; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;
}
.cd-main-content.nav-is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px);
}
@media only screen and (min-width: 1024px) { .cd-main-content { padding-top: 80px; } .cd-main-content.nav-is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
.no-js .cd-nav-trigger, .no-js .cd-subnav-trigger { display: none;
}
.no-js header { position: relative; height: auto;
}
.no-js .cd-logo img { margin-bottom: 14px;
}
.no-js .cd-main-nav { position: static; width: 100%; height: auto; visibility: visible; overflow: visible;
}
.no-js .cd-main-nav li { display: inline-block;
}
.no-js .cd-main-nav li:last-child { display: block;
}
.no-js .cd-main-nav .go-back { display: none;
}
.no-js .cd-main-nav li ul { position: static; width: 100%; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);
}
@media only screen and (min-width: 1024px) { .no-js .cd-main-nav { height: 80px; } .no-js .cd-main-nav li ul { position: absolute; top: 80px; } .no-js .cd-main-nav li ul li { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .no-js .cd-main-nav li ul li:last-child { display: none; }
}
.no-js .cd-main-content { padding-top: 0;
}
@media only screen and (min-width: 1024px) { .no-js .cd-main-content { padding-top: 80px; }
}

Добавлено через 4 минуты
js и оригинальные файлы

https://yadi.sk/d/SuxiRi3wpYhL2
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Судя по всему вордпресс?
А как оно влияет и откуда брали коды этого меню?
 

Статистика форума

Темы
200.635
Сообщения
380.523
Пользователи
327.876
Новый пользователь
pm1199
Сверху Снизу