CODEWITHSUNDEEP
javascripthtmlcss
Jonqueststack
Jonqueststack

Reputation: 1

How to hide submenu with addEventListener by clicking anywhere in webpage using javascript?

I'm trying to code toggle function but i can't think of it, my submenu can show and hide by clicking at Topics.

But i also want submenu to hide by clicking anywhere in webpage.

I'm very new to javacsript, i wish i could have some simple code or idea that easily for me to understand. If any one can give me some advices i would very appreciate it thank you.

(Just only javascript not Jquery)

var toggleMenu = (function () {
    var mainTopics = document.getElementById("maintopics");

    mainTopics.addEventListener("click", function (e) {
        e.preventDefault();
        mainTopics.classList.toggle("show");
    });

    return {
        toggleMenu: toggleMenu()
    }
})();
body {
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}

/*main-menu*/
#mainmenu {
    position: relative;
}

#mainmenu ul {
    margin: 0;
    padding: 0;
}

#mainmenu li {
    display: inline-block;
}

#mainmenu a {
    display: block;
    width: 100px;
    padding: 10px;
    border: 1px solid;
    text-align: center;
}

/*sub-topics*/
#subtopics {
    position: absolute;
    display: none;
    margin-top: 10px;
    width: 100%;
    left: 0;
}

#maintopics.show #subtopics {
    display: block;
}

#maintopics.hide #subtopics {
    display: none;
}


#subtopics ul {
    margin: 0;
    padding: 0;
}

#subtopics li {
    display: block;
}

#subTopics a {
    text-align: left;
}

/*columns*/
#column1, #column2, #column3 {
    position: relative;
    float: left;
    left: 125px;
    margin: 0px 5px 0px 0px;
}

/*hover underline*/
#mainmenu li:hover {
    text-decoration: underline;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
    <div id="mainmenu">
        <ul>
            <li><a href="">Logo</a></li>
            <li><a href="">Home</a></li>
            <li id="maintopics"><a href="">Topics</a>
                <div id="subtopics">
                    <div id="column1" class="columns">
                        <ul>
                            <li><a href="">Test1</a></li>
                            <li><a href="">Test2</a></li>
                            <li><a href="">Test3</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <script src="index2.js"></script>
</body>
</html>

Upvotes: 0

Views: 172

Answers (3)

Janaka Dissanayake
Janaka Dissanayake

Reputation: 547

var toggleMenu = (function () {
    var mainTopics = document.getElementById("maintopics");

    mainTopics.addEventListener("click", function (e) {
        e.preventDefault();
        mainTopics.classList.toggle("show");
    });

     document.addEventListener("click", function (e) {
        e.preventDefault();
        mainTopics.classList.toggle("hide");
    });
    
})();
body {
    margin: 0;
}

li, a{
    text-decoration: none;
    list-style-type: none;
    text-decoration-line: none;
    color: black;
}

/*main-menu*/
#mainmenu {
    position: relative;
}

#mainmenu ul {
    margin: 0;
    padding: 0;
}

#mainmenu li {
    display: inline-block;
}

#mainmenu a {
    display: block;
    width: 100px;
    padding: 10px;
    border: 1px solid;
    text-align: center;
}

/*sub-topics*/
#subtopics {
    position: absolute;
    display: none;
    margin-top: 10px;
    width: 100%;
    left: 0;
}

#maintopics.show #subtopics {
    display: block;
}

#maintopics.hide #subtopics {
    display: none;
}


#subtopics ul {
    margin: 0;
    padding: 0;
}

#subtopics li {
    display: block;
}

#subTopics a {
    text-align: left;
}

/*columns*/
#column1, #column2, #column3 {
    position: relative;
    float: left;
    left: 125px;
    margin: 0px 5px 0px 0px;
}

/*hover underline*/
#mainmenu li:hover {
    text-decoration: underline;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
    <div id="mainmenu">
        <ul>
            <li><a href=''>Logo</a></li>
            <li><a href=''>Home</a></li>
            <li id="maintopics"><a href=''>Topics</a>
                <div id="subtopics">
                    <div id="column1" class="columns">
                        <ul>
                            <li><a href="">Test1</a></li>
                            <li><a href="">Test2</a></li>
                            <li><a href="">Test3</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <script src="index2.js"></script>
</body>
</html>

Upvotes: 0

user2575725
user2575725

Reputation:

How about just using CSS?

body {
  margin: 0;
}

li,
a {
  text-decoration: none;
  list-style-type: none;
  text-decoration-line: none;
  color: black;
}


/*main-menu*/

#mainmenu {
  position: relative;
}

#mainmenu ul {
  margin: 0;
  padding: 0;
}

#mainmenu li {
  display: inline-block;
}

#mainmenu a {
  display: block;
  width: 100px;
  padding: 10px;
  border: 1px solid;
  text-align: center;
}


/*sub-topics*/

#subtopics {
  position: absolute;
  display: none;
  /*margin-top: 10px;*/
  top: 41px;
  width: 100%;
  /*left: 0;*/
}

#maintopics.show #subtopics {
  display: block;
}

#subtopics ul {
  margin: 0;
  padding: 0;
}

#subtopics li {
  display: block;
}

#subTopics a {
  text-align: left;
}


/*columns*/

#column1,
#column2,
#column3 {
  position: relative;
  /*float: left;
  left: 125px;*/
  margin: 0px 5px 0px 0px;
}


/*hover underline*/

#mainmenu li:hover {
  text-decoration: underline;
}

#mainmenu li:hover #subtopics {
  display: block;
}
<body>
  <div id="mainmenu">
    <ul>
      <li><a href="">Logo</a></li>
      <li><a href="">Home</a></li>
      <li id="maintopics"><a href="">Topics</a>
        <div id="subtopics">
          <div id="column1" class="columns">
            <ul>
              <li><a href="">Test1</a></li>
              <li><a href="">Test2</a></li>
              <li><a href="">Test3</a></li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</body>

Upvotes: 1

Deepesh kumar Gupta
Deepesh kumar Gupta

Reputation: 896

1) Create a method say toggleHtml();. 2) Put your logic in it. 3) call it from html body tag like below.

<body onClick="toggleHtml();">

Upvotes: 0

Related Questions