Вообщем, легкая тема, должно вроде все работать, но менюшечка не выпадает из кнопки на маленьких экранах. Использовал функцию slidetoggle. Я новичок в js , поэтому не все понимаю еще. Код;
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/media.css">
<title>Future site fucked up</title>
</head>
<body>
<header class = "fuckheader">
<div class = "container1">
<div class="row">
<div class="col-md-3">
<div class="fucklogo">
<img src="img/ETS.png">
</div>
</div>
<div class="col-md-6">
<div class = "fuckmenue">
<button class = "pirozhok"><img src = "img/if_th-menu-outline_216423.png"></button>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS media
/*========== Desktop First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.fuckmenue ul {
position:absolute;
display: none;
width:100%
}
.fuckmenue ul li {
display:block;
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.pirozhok {
display: none;
}
.fuckmenue ul {
display: inline-block !important;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.pirozhok {
display: none;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.pirozhok {
display: none;
}
}
and JS
$(document).ready(function() {
$(".pirozhok").click(function() {
$(this).next().slideToggle();
});
заранее спасибо
