balzss/luxbar

can i close the menu, when I click the menu?

Closed this issue · 6 comments

yajio commented

I used long one page.
So when I click menu, I want close the menu.
How can I this.

balzss commented

If I'm understanding you correctly your problem is that you have a single page app with luxbar and want it to close when a menu item is clicked. This can't be done without javascript so you have to put something like this in your project (this is a JQuery solution so you'll need that as well):

$('.luxbar-item').click(function(event) {
    $('#luxbar-checkbox').prop('checked', false);
}

Does this solves you problem?

yajio commented

Thank you.
So can I use Jquery CDN?
Which version can I use?

<< example >>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $('.luxbar-item').click(function(event) {
    $('#luxbar-checkbox').prop('checked', false);
}

but it doesn't work.

Thank you.

balzss commented

I think it's because you are using JQuery 1 and not the latest version. Try this:

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
yajio commented

Thank you. but it's doesn't work...

My dode is

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/luxbar.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
#d1, #d2, #d3, #d4, #d5 {
	height: 500px;
}
</style>
						
</head>

<body>
<div id="luxbar" class="luxbar-fixed">
    <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox">
    <div class="luxbar-menu luxbar-menu-right luxbar-menu-material-green">
        <ul class="luxbar-navigation">
            <li class="luxbar-header">
                <a class="luxbar-brand" href="#">Brand</a>
                <label class="luxbar-hamburger luxbar-hamburger-doublespin"
                        for="luxbar-checkbox"> <span></span> </label>
            </li>
            
            <li class="luxbar-item"><a href="#d1">1</a></li>
            <li class="luxbar-item"><a href="#d2">2</a></li>
            <li class="luxbar-item"><a href="#d3">3</a></li>
            <li class="luxbar-item"><a href="#d4">4</a></li>
            <li class="luxbar-item"><a href="#d5">5</a></li>
           
        </ul>
    </div>
</div>

    <div id="d1">1</div>
	<div id="d2">2</div>
	<div id="d3">3</div>
	<div id="d4">4</div>
	<div id="d5">5</div>


<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
    $('.luxbar-item').click(function(event) {
    $('#luxbar-checkbox').prop('checked', false);
}
</script>	

</body>
</html>

thank you.

balzss commented

It seems like you are just getting into web development which is really good. When I started out I watched a ton of videos about HTML, CSS and JavaScript on youtube. It may seem a little too much at first but you will understand it eventually and will be able to do exciting things. If you doing so that will save a lot of time for you and for all the people you would asking basic questions from otherwise. I hope you found my advice useful! :) :) :)

(btw. your code is not working because you left out the $(document).ready(function(){ part which has to be included in every jquery project. Here's a working code and next time please do some research before asking basic questions otherwise you'll never learn these things)

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/luxbar.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
#d1, #d2, #d3, #d4, #d5 {
	height: 500px;
}
</style>
						
</head>

<body>
<div id="luxbar" class="luxbar-fixed">
    <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox">
    <div class="luxbar-menu luxbar-menu-right luxbar-menu-material-green">
        <ul class="luxbar-navigation">
            <li class="luxbar-header">
                <a class="luxbar-brand" href="#">Brand</a>
                <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label>
            </li>
            
            <li class="luxbar-item"><a href="#d1">1</a></li>
            <li class="luxbar-item"><a href="#d2">2</a></li>
            <li class="luxbar-item"><a href="#d3">3</a></li>
            <li class="luxbar-item"><a href="#d4">4</a></li>
            <li class="luxbar-item"><a href="#d5">5</a></li>
           
        </ul>
    </div>
</div>

    <div id="d1">1</div>
	<div id="d2">2</div>
	<div id="d3">3</div>
	<div id="d4">4</div>
	<div id="d5">5</div>


<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  $(".luxbar-item").click(function () {
    $('#luxbar-checkbox').prop('checked', false);
  });
});
</script>	



</body></html>
yajio commented

Wow ! It's great!!
Thank you so much.
Maybe someone want this :)
I'll go!