Breaking News: Grepper is joining You.com. Read the official announcement!

Search Menu (HTML, CSS, JS)

Astra Logical answered on April 25, 2022 Popularity 6/10 Helpfulness 3/10

answer Search Menu (HTML, CSS, JS)

Search Menu (HTML, CSS, JS)

Comment

<!-- html section -->

<input type = "text" id = "mySearch" onkeyup = "myFunction()" placeholder = "Search..." title = "Type in a category">

<ul id = "myMenu">
	<li><a href = "#"> HTML </a></li>
	<li><a href = "#"> CSS </a></li>
    <li><a href = "#"> JS </a></li>
    <li><a href = "#"> Python </a></li>
</ul>

<!-- css section -->

<style>

  #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border: 1px solid #ddd;
  }

  #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
  }

  #myMenu li a {
      padding: 12px;
      text-decoration: none;
      color: black;
      display: block;
  }

  #myMenu li a:hover {
      background-color: #eee;
  }
</style>

<!-- JS section -->

<script>
	function myFunction() {
    	var input, filter, ul, li, a, i;
        input = document.getElementById("mySearch");
        filter = input.value.toUpperCase();
        ul = document.getEllementById("myMenu");
        li = ul.getElementsByTagName("li");
        
        for (i = 0; i < li.length; i++) {
        	a = li[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            	li[i].style.display = "";
            } else {
            	li[i].style.display = "none";
            }
        }
   	}
</script>

Popularity 6/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: menu search whatever

Link to this answer
Share Copy Link

Contributed on Apr 25 2022

Astra Logical

0 Answers Avg Quality 2/10

Search Menu (HTML, CSS, JS)

Contents

More Related Answers

Search Menu (HTML, CSS, JS)

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.