jQuery Меню Не отображается

Я пытаюсь создать меню справа налево, указав ему отрицательное правое положение и из jQuery при нажатии на пробел он должен отредактировать позицию справа до нуля, но когда я нажимаю ничего не происходитjQuery Меню Не отображается

$(document).ready(function() { 
 

 

 

 
    $(".run_menu").click(function() { 
 

 
    $(".menu").animate("right", "0"); 
 
    }); 
 

 

 

 

 

 
});

/* Global*/ 
 

 
.conatianer { 
 
    width: 1026.66px; 
 
} 
 
/*End global*/ 
 

 
/*Start navbar*/ 
 

 
.navbar { 
 
    position: relative; 
 
    background: url(data:image/jpeg;base64,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); 
 
    background-size: cover; 
 
    height: 700.531px; 
 
    overflow: hidden; 
 
} 
 
.navbar .menu { 
 
    position: absolute; 
 
    right: -200px; 
 
    width: 200px; 
 
    height: 700px; 
 
    background-color: gray; 
 
    color: white; 
 
} 
 
.navbar .overlay { 
 
    position: absolute; 
 
    background-color: rgba(0, 0, 0, .2); 
 
    width: 100%; 
 
    height: 700.531px; 
 
    z-index: 1; 
 
} 
 
.navbar .navbar_one, 
 
.navbar .navbar_two { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.navbar .navbar_one h3 { 
 
    float: left; 
 
    margin-top: 0; 
 
    color: #FFF; 
 
    padding: 20px; 
 
    text-transform: capitalize; 
 
} 
 
.navbar .navbar_one div { 
 
    float: right; 
 
    margin-right: 10px; 
 
    color: #FFF; 
 
    padding: 20px; 
 
} 
 
.navbar .navbar_two { 
 
    text-align: center; 
 
    padding-top: 230px; 
 
} 
 
.navbar .navbar_two i { 
 
    color: #FFF 
 
} 
 
.navbar .navbar_two h1 { 
 
    text-transform: capitalize; 
 
    color: #FFF; 
 
} 
 
.navbar .navbar_two h3 { 
 
    text-transform: capitalize; 
 
    color: #FFF 
 
} 
 
.navbar .navbar_two ul { 
 
    list-style: none; 
 
} 
 
.navbar .navbar_two ul li { 
 
    width: 110px; 
 
    background-color: rgba(81, 186, 164, .8); 
 
    -webkit-border-radius: 25px; 
 
    -moz-border-radius: 10px; 
 
    border-radius: 25px; 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-family: Arial; 
 
    font-size: 20px; 
 
    font-weight: 600; 
 
    line-height: 10px; 
 
    cursor: pointer; 
 
    padding: 20px 25px; 
 
    margin-left: 555px; 
 
} 
 
.navbar .navbar_two ul li:hover { 
 
    background-color: #51baa4; 
 
} 
 
.navbar .navbar_two ul li a { 
 
    color: #FFF; 
 
    text-decoration: none 
 
} 
 
/*End navbar*/

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Template retrospect</title> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="css/StyleSheet.css" /> 
 
    <link rel="stylesheet" href="css/font-awesome.min.css" /> 
 
    <link rel="stylesheet" href="css/normalize.css" /> 
 

 
</head> 
 

 
<body> 
 
    <!--Start NavBar--> 
 
    <div class="navbar"> 
 
    <div class="menu"> 
 
     <!--Menu --> 
 
     <i class="fa fa-long-arrow-right"></i> 
 
     <ul> 
 
     <li>home</li> 
 
     <li>generic</li> 
 
     <li>elements</li> 
 
     </ul> 
 
    </div> 
 
    <div class="overlay"></div> 
 
    <div class="navbar_one"> 
 
     <h3>retrospect</h3> 
 
     <div> 
 
     <i class="fa fa-bars fa-lg"></i> 
 
     <span class="runmenu">menu</span> <!--menu should appear when click on it --> 
 
     <!--Open Menu on click--> 
 
     </div> 
 
    </div> 
 
    <div class="navbar_two"> 
 
     <i class="fa fa-soundcloud fa-4x"></i> 
 
     <h1>etiam adipiscing</h1> 
 
     <h3>magna feugiat lorem dolor egetas</h3> 
 
     <ul> 
 
     <li><a href="#">learn more </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 

 

 

 

 

 

 
    <script src="js/jquery-1.11.3.min.js"></script> 
 
    <script src="js/JavaScript.js"></script> 
 
</body> 
 

 
</html>

источник

2015-12-24 LCTS

Таблица стилей, при условии. Нет необходимости в шрифте - awesome/normalize. Можно добавить jQuery. JavaScript, при условии. –

Ваш код не .run_menu. Добавьте кнопку и ваша .animate функция не так:

$(".menu").animate({ 
    "right": 0 
}, 1000);

Ваш <span> на самом деле имеет неправильное имя класса:

<span class="runmenu">menu</span>

Какой должна быть:

<span class="run-menu">menu</span>

Кроме того, в меню недоступен из-за неправильного z-index. Пожалуйста, исправьте это.

Работа выхода: http://output.jsbin.com/salutajuna

Пожалуйста, нажмите на узнать больше.

источник

2015-12-24 19:08:56

Я не понимаю часть z-index, не могли бы вы объяснить это – LCTS

@LCTS Первое, что работает мой код? Нажав кнопку 'learn more'? –

да он отлично работает – LCTS

jQuery Меню Не отображается

ответ

Смежные вопросы