нужна кнопка, чтобы показать и скрыть наложение навигации

Я делаю меню. У меня есть кнопка, которая откроет ее, мне также понравится эта кнопка, чтобы закрыть ее. У меня есть еще одна кнопка, чтобы закрыть его, но это не то, что мне нужно. Может ли кто-нибудь обучить меня тому, как это делается? Вот мой JSBIN нужна кнопка, чтобы показать и скрыть наложение навигации

вот как я открываю его

<div class="burgerburger" onclick="openNav()">&#9776; open</div>

и это Javascript Я использую

function openNav() { 
    document.getElementById("myNav").style.width = "100%"; 
} 

function closeNav() { 
    document.getElementById("myNav").style.width = "0%"; 
}

Спасибо за вашу помощь!

источник

2016-11-03 ScreamQueen

Вы имеете в виду вы хотите, чтобы переключить меню на кнопку мыши. правильно? – Sasikumar

должно быть что-то простое, как это, но до вас, как определить «navOpened»

<div class="burgerburger" onclick="toggleNav('myNav')">&#9776; open</div>

function toggleNav(selector) { 
    if(navOpened(selector)) { 
     closeNav(selector); 
    } else { 
     openNav(selector); 
    } 
}  

function navOpened(selector) { 
    var elWidth = document.getElementById(selector).style.width; 
    if(elWidth == "100%") { 
     return true; 
    } else { 
     return false; 
    } 
} 

function openNav(selector) { 
    document.getElementById(selector).style.width = "100%"; 
} 

function closeNav(selector) { 
    document.getElementById(selector).style.width = "0%"; 
}

источник

2016-11-03 12:00:33 Bimbonkens

Спасибо! Не могли бы вы рассказать мне, как я могу сделать этот слайд сверху? Я попытался заменить ширину с высотой, но это, похоже, не сработало. – ScreamQueen

Используйте функцию jQuery .animate() для всех ваших скользящих потребностей. С его помощью вы можете анимировать любое свойство css, которое можно анимировать с помощью css-переходов и многое другое. – Bimbonkens

-1

я надеюсь, что это один помогает вам PLS попробовать этот jsfiddle код

<div class="burgerburger" onclick="myFunction()" id="nav" >&#9776; </div> 
<div id="menu"> 
<ul> 
<li>home</li> 
<li>about</li> 
<li>our team</li> 
<li>contact</li> 
</ul> 
</div> 


$("#menu").hide(); 
$("#nav").click(function() { 
    $("#menu").toggle(); 
});

https://jsfiddle.net/jr3myojp/

источник

2016-11-03 12:04:40

Попробуйте этот код

$(function(){ 
 
\t var is_open = 0; 
 
    $(".burgerburger").click(function(){ 
 
    if (is_open == 0) {  \t 
 
     openNav();  
 
    } else {  
 
     closeNav();  
 
    } 
 
    }); 
 
    $(".closebtn").click(function(){ 
 
    \t closeNav(); 
 
    }); 
 
    
 
    function openNav() { 
 
    document.getElementById("myNav").style.width = "100%"; 
 
    $(".burgerburger").html('&#9776; Close'); 
 
    is_open = 1; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.width = "0%"; 
 
    \t $(".burgerburger").html('&#9776; Open'); 
 
     is_open = 0; 
 
} 
 

 
});

body { 
 
    margin: 0; 
 
    background-color: black; 
 
    font-family: 'Lato', sans-serif; 
 
    
 
} 
 

 
.burgerburger { 
 
    font-size:30px; 
 
    cursor:pointer; 
 
    color: white; 
 
    z-index: 999999999; 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<div class="burgerburger" >&#9776; Open</div>

Демо здесь https://jsfiddle.net/rnjradmu/

источник

2016-11-03 12:10:48 Sasikumar

Попробуйте это: -

function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
}

body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-y: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay {overflow-y: auto;} 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
}

<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 

 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

или

function openNav() { 
 
    document.getElementById("mySidenav").style.display = "block"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.display = "none"; 
 
}

body { 
 
    font-family: "Lato", sans-serif; 
 
} 
 

 
.sidenav { 
 
    display: none; 
 
    height: 100%; 
 
    width: 250px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
</div> 
 

 

 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

источник

2016-11-03 12:15:35

нужна кнопка, чтобы показать и скрыть наложение навигации

ответ

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