Подключил к сайту адаптивное меню(разные пробовал),сайт отображается коряво,как исключить влияния меню на остальные элементы сайта .Я новичок в этом деле,прошу понятного ответа,заранее спасибо.
index.html
css
reset.css
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;
}