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

usergeyv · 26 фев 2016

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

index.html

Спойлер

<!doctype html>
<htmllang="ru"class="no-js">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1">

<linkhref='http://fonts.googlea...PT Sans:400,700'rel='stylesheet'type='text/css'>

<linkrel="stylesheet"href="css/reset.css">
<linkrel="stylesheet"href="css/style.css">
<scriptsrc="js/modernizr.js"></script>

</head>
<body>
<header>
<navclass="cd-main-nav-wrapper">
<ulclass="cd-main-nav">
<li><ahref="#0">О нас</a></li>
<li><ahref="#0">Проекты</a></li>
<li><ahref="#0">Блог</a></li>
<li><ahref="#0">Контакты</a></li>
<li>
<ahref="#0"class="cd-subnav-trigger"><span>Категории</span></a>
<ul>
<liclass="go-back"><ahref="#0">Меню</a></li>
<li><ahref="#0">Категория 1</a></li>
<li><ahref="#0">Категория 2</a></li>
<li><ahref="#0">Категория 3</a></li>
<li><ahref="#0">Категория 4</a></li>
<li><ahref="#0">Категория 5</a></li>
<li><ahref="#0"class="placeholder">Placeholder</a></li>
</ul>
</li>
</ul>
</nav>
<ahref="#0"class="cd-nav-trigger">Menu<span></span></a>
</header>

<mainclass="cd-main-content">

</main>
<scriptsrc="js/jquery-2.1.1.js"></script>
<scriptsrc="js/main.js"></script>
</body>
</html>

reset.css

Спойлер

/* http:_eric/tools/css/reset/

v2.0 | 20110126
License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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;
}

style.css

Спойлер

/* --------------------------------

Primary style

-------------------------------- */
*, *::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;
}

/* --------------------------------

Main Components

-------------------------------- */
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;
/* Force Hardware Acceleration */
-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 {
/* never visible - this is used in jQuery to check the current MQ */
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;
/* remove jump on iOS devices - when we fire the navigation */
-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;
/* hide text */
overflow: hidden;
white-space: nowrap;
color: transparent;
}
.cd-nav-trigger span {
/* hamburger icon created in CSS */
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 {
/* upper and lower lines of the menu icon */
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #ffffff;
/* Force Hardware Acceleration */
-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 {
/* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
-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 {
/* arrow icon in CSS */
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);
}
.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 {
/* arrow goes on the right side - children navigation */
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 {
/* arrow goes on the left side - go back button */
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 {
/* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
display: none;
}
@media only screen and (min-width: 1024px) {
.cd-main-nav {
position: static;
visibility: visible;
width: 100%;
height: 80px;
line-height: 80px;
/* padding left = logo size + logo left position*/
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;
/* Prevent .cd-subnav-trigger flicker is Safari */
-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;
/* change transform-origin to rotate the arrow */
-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 left = logo size + logo left position*/
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 {
/* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
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 {
/* never visible - this is used in jQuery to check the current MQ */
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;
}
}

js и оригинальные файлы

https://yadi.sk/d/SuxiRi3wpYhL2

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

usergeyv