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

  • Автор темы usergeyv
  • 1770
  • Обновлено
  • 26, Feb 2016
  • #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 
 /* 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;


}
usergeyv

usergeyv

Пользователь
Рег
09 Oct, 2014
Тем
13
Постов
17
Баллов
147
  • 26, Feb 2016
  • #2
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);


}
 
usergeyv

usergeyv

Пользователь
Рег
09 Oct, 2014
Тем
13
Постов
17
Баллов
147
  • 26, Feb 2016
  • #3
Продолжения 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 {


/* 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

usergeyv

Пользователь
Рег
09 Oct, 2014
Тем
13
Постов
17
Баллов
147
  • 27, Feb 2016
  • #4
Судя по всему вордпресс? А как оно влияет и откуда брали коды этого меню?
 
Wmboard

Wmboard

Пользователь
Рег
01 Jan, 2011
Тем
522
Постов
7188
Баллов
12408
Похожие темы Дата
SpyNote v2 (RAT для Android'а)
Боты для соцсетей
Толковые Словари
Перехватывание баркода, когда сканер идёт через эмулятор клавиатуры
Ios build number as version
Manually authorize PAServer debugging permissions on MacOS by Matthew Versperman
How to make a PDF from Delphi / C++Builder / Lazarus
My easy way to How to Simulating a PopUp menu using TForm and Show method
[09.01.2014] ДампCShell.dll
Можно-ли программно реализовать градиент на HTML?
Похожие темы
SpyNote v2 (RAT для Android'а)
Боты для соцсетей
Толковые Словари
Перехватывание баркода, когда сканер идёт через эмулятор клавиатуры
Ios build number as version
Manually authorize PAServer debugging permissions on MacOS by Matthew Versperman
How to make a PDF from Delphi / C++Builder / Lazarus
My easy way to How to Simulating a PopUp menu using TForm and Show method
[09.01.2014] ДампCShell.dll
Можно-ли программно реализовать градиент на HTML?
I AM

I AM


Лучший автор
Тем
49554
Комментарии
57426
Опыт
552966

Интересно