CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David Stančík
David Stančík

Reputation: 350

When click on menu, it opens, when click again it close

I have very basic:

        // jQuery Document
  var main = function() {
  /* Push the body and the nav over by 285px over */
  $('#share').click(function() {
    $('.menu').animate({
      right: "0px"
    }, 200);

    $('body').animate({
      right: "285px"
    }, 200);
  });

  /* Then push them back */
  $('html').click(function() {
    $('.menu').animate({
      right: "-285px"
    }, 200);

    $('body').animate({
      right: "0px"
    }, 200);
  });
};


$(document).ready(main);

And, I want to do something like this.. If user clicks on menu icon (#share), menu will appear, if menu is visible and user clicks again, it will disappear..How to SIMPLY do it?? i want to do it just as simple as possible... please help me :)

And yeah... I wrote something like if html. click.. then close the menu.. There should be the name of the menu icon (#share)

there is menus css:

.menu {
  background-color: #373737;
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
}

and html:

<!DOCTYPE html>
<html>
    <head>
        <title>Minecraft</title>
        <link href="styles_m.css" rel="stylesheet" type="text/css">

    </head


    <body>
    <div class="menu">

    </div>

        <div id="header">
        <div id="main">
            <a href="minecraft.html"><img src="my_logo.png"></a>
        </div>
        <div id="share">
            <img name="menu" src="my_menu.png">
        </div>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js">

        </script>
    </body
</html>

Upvotes: 3

Views: 5339

Answers (5)

Cara Leitheiser
Cara Leitheiser

Reputation: 1

You could use the fadeToggle function:

$(document).ready(function() {
    $('icon').click(function() {
        $('dropdown element').fadeToggle(400);
    });
});

An example can be found here: https://www.w3schools.com/jquery/eff_fadetoggle.asp

Upvotes: 0

imGaurav
imGaurav

Reputation: 1053

$('button').click(function() {

  $('.menu').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="menu" style="display:none;">
  <ul>
    <li>menu 1</li>
    <li>menu1</li>
    <li>menu 3</li>
    <li>menu 4</li>
  </ul>
</div>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Just use fadeToggle():

$(function () {
  $(".showMenu").click(function () {
    $(this).next(".menu").fadeToggle(400);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="display: none;">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

Or if you wanna make it slide right, you can use animations:

Just use animate():

$(function () {
  $(".showMenu").click(function () {
    if ($(this).next(".menu").css("left") != "0px")
      $(this).next(".menu").animate({
        left: 0
      }, 1000);
    else
      $(this).next(".menu").animate({
        left: -250
      }, 1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="position: relative; left: -250px;">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

Upvotes: 2

kosmos
kosmos

Reputation: 4288

You can also use a variable control to know when to show/hide the element (jsFiddle):

var control = false;
var main = function() {
    $('#share').click(function() {
        if( control === true ){
            $('.menu').animate({
                right: "-285px"
            }, 200);

            $('body').animate({
                right: "0px"
            }, 200);
            control = false;
            return;
        }
        control = true;
        $('.menu').animate({ right: "0px" }, 200);
        $('body').animate({ right: "285px" }, 200);
    });
};

Upvotes: 1

IlGala
IlGala

Reputation: 3419

HTML 5 data tags can be the solutions. Have a look at my fiddle

$('.showMenu').click(function() {
  var active = $('.menu').data('active');
  
  if(active === 'N') {
    $('.showMenu').html('Hide Menu');
    $('.menu').fadeIn(100);
    $('.menu').data('active', 'Y');
  } else {
    $('.showMenu').html('Show Menu');
    $('.menu').fadeOut(100);
    $('.menu').data('active', 'N');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button class="showMenu">Show Menu</button>
<div class="menu" data-active="N" style="display: none;">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

Upvotes: 0

Related Questions