Меню гамбургера не работает онлайн, но работает в xampp/localhostHtml

Программисты Html
Ответить
Anonymous
 Меню гамбургера не работает онлайн, но работает в xampp/localhost

Сообщение Anonymous »

У меня проблема с адаптивным меню. Пока я на своем автономном сервере, адаптивное меню в мобильном формате работает нормально, но когда оно находится на реальном сервере, оно не работает. Я боролся с этим часами. Вот мой код:
HTML

Код: Выделить всё



[img]design/logo-titol-prova-1.PNG[/img]
[url=#][/url]


[img]design/logo-titol-prova-1.PNG[/img]
[list]
[*][url=about]About[/url]
[*][url=surf-salina-cruz]Surf/Kitesurf[/url]
[*][url=mexico-surf-tour]The Tour[/url]
[*][url=surf-camp-lodging]Lodging[/url]
[*][url=testimonials]Testimonials[/url]
[*][url=book-now]Reserve Now[/url]
[/list]


CSS

Код: Выделить всё

/*Menu*/

.menu{
width: 100%;
position:fixed;
top:0;
margin:0 auto;
padding: 0;
box-sizing: border-box;
font-size: 15px;
text-align: center;
background-color: transparent;
-webkit-transition: background-color .5s;
z-index:1000;
}

.menu nav {
display: table;
max-width:1200px;
max-width:100%;
margin:0 auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
z-index:1000;
-webkit-transition: margin-left .5s;
}

.menu_bar {
display:none;
}

.menu nav ul {
width:100%;
overflow:hidden;
margin: 0;
padding: 0;
display: inline;
list-style:none;
text-align: center;
}

.menu nav ul li {
display: inline;
width:100%;
margin: 0;
padding: 0;
padding-left: 30px;
text-align: center;
background: url(design/list.png) left no-repeat;
}

.menu nav ul li.first {
background:none;
}

.menu nav ul li a {
display: inline-block;
margin:15px 15px 0 15px;
padding:15px 0;
color:#303030;
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-decoration:none;
letter-spacing:1px;
}

.menu nav ul li a:hover {
color:#ffc000;
text-decoration: none;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}

.menu nav ul li a:active {
color:#71e1b0;
}

section {
padding:20px;
}

img#logo{
float:left;
display: block;
margin:0;
padding:0;
-webkit-transition: width .5s;
}

@media screen and (max-width:1100px){

img#logo{
max-width:300px;
margin-left: 10px;
}

.menu{
width: 100%;
padding-top:10px;
padding:0;
font-size:15px;
float:right;
}

.menu nav ul li a {
margin:10px 15px 0 15px;
}

.menu nav {
width:100%;
max-width:100%;
margin:0 auto;
text-align: center;
z-index:1000;
}

@media screen and (max-width:800px){

img#logo{
display:none;
}

.menu nav {
max-width:250px;
height:100%;
right:-100%;
margin:0;
position: fixed;
background: #fff;
}

.menu nav ul li {
display:block;
float:none;
padding:0;
background:none;
}

.menu nav ul li a {
display:block;
padding:20px 20px 20px 0;
margin:0;
color:#303030;
font-family: 'Dosis', sans-serif;
font-size: 15px;
font-weight:400;
text-align: right;
text-transform: uppercase;
background: none;
border-right:4px solid #71e1b0;
}

.menu nav ul li a:hover {
color:#71e1b0;
text-decoration: none;
border-bottom:none;
}

.menu_bar {
display:block;
max-width:100%;
padding:15px;
background:#fff;
}

.menu_bar .bt-menu {
display:block;
padding:20px;
color:#33e873;
text-decoration:none;
text-align:right;
font-weight:bold;
font-size:27px;

}

img#logo-mobile{
float:left;
max-width:200px;
margin: 7px 0 0 10px;
padding:0;
}

menu.js

Код: Выделить всё

$(document).ready(main);

var contador = 1;

function main(){
$('.bt-menu').click(function(){
// $('nav').toggle();

if(contador == 1){
$('nav').animate({
right: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
right: '-100%'
});
}

});

}
script-menu.js

Код: Выделить всё

$(document).ready(function(){

$("#banner").css({"height":$(window).height() + "px"});

var flag = false;
var scroll;

$(window).scroll(function(){
scroll = $(window).scrollTop();

if(scroll > 100){
if(!flag){
$("#logo").css({"width": "200px"});

$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color": "#fff", "box-shadow": "0 1px 1px #71e1b0"});

flag = true;
}
}else{
if(flag){
$("#logo").css({"width": "400px",});

$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color":"transparent", "box-shadow": "none"});
flag = false;
}
}

});

});

Это сайт: http://marsurftours.com/. Я перепробовал все и потратил много часов, пытаясь найти решение. Если вы знаете, как решить эту проблему, буду признателен. Спасибо за помощь!

Подробнее здесь: https://stackoverflow.com/questions/754 ... -localhost
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»