How to Create a Search Menu which Filters Hyperlinks using CSS and JavaScript
Menu Search Bar
How To, for Web Applications
By: Chrysanthus Date Published: 26 Mar 2025
This tutorial explains How to Create a Search Menu to Filter Hyperlinks with CSS and JavaScript. The main view is a panel consisting two panes: one on the left and the other on the right, and both covering a horizontal width of the screen. The pane on the left has the vertical menu, while the pane on the right has the main document content. At the top of the menu in the left pane, is the search field; and just below the search field, is a submit button. The user can either click the hyperlink or submit the content of what is typed into the search field.
Normally, as the user starts typing into the search field, the number of hyperlink options in the menu is reducing. The user can click a hyperlink that he/she might have been looking for. Otherwise the user would click the submit button for whatever he/she has typed into the search field.
At the end of this tutorial, is the complete webpage code. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file into the browser. Test the webpage by clicking a hyperlink; or typing something into the search field, and then clicking the submit button. If the submit button is clicked, the feedback will be "File not found", because the destination URL is fake (intensionally, and meant only for teaching). If a hyperlink is also clicked, there will be no action because each URL of the hyperlink is just #. If the web developer replaces this with a full URL, there will be action. The reader is advised to do that before continuing to read this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage is:
<!DOCTYPE html>
<html>
<head>
<title>Search Menu</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern webpage has the first four tags in the HTML head element. The style element will have enough code for the presentation of the important elements in the HTML body. The script element will have some code for filtering.
The HTML body Element
The body element has the following content:
<h2>Search Menu</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<div class="row">
<div class="left" style="background-color:#bbb;">
<h2>Menu</h2>
<form action="/acton_page.php"> <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category" autocomplete="off"> <button type="submit" style="float:right">Submit</button></form>
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</div>
<div class="right" style="background-color:#ddd;">
<h2>Page Content</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some text..</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div>
More content can go here, below the row div, thanks to the "overflow: hidden;" property - - -
</div>
There is the principal div container with class-name, "row" . This div should be considered as the panel div. It has two smaller divs for the panes. The first inner div with class-name, "left" is for the left pane. It will be floated left in its parent div. It has the HTML Form (search field and submit button) and a list of hyperlinks (anchor elements). All that will form the vertical menu within its vertical bar (left div).
The second inner div with class-name, "right" is for the main document for the webpage. This div is floated right within its parent div.
With this scheme, as the user is typing into the search field, the number of Hyperlinks below the search field is reducing. If there is no match in the list below the search field, the number of hyperlinks will reduce to zero. The user will then have no choice other than to submit what he/she has typed into the search field. If there was a match while the user was typing into the search field, and the number of hyperlinks was greater than zero, then the user could click the appropriate hyperlink.
In the code, the hyperlink is an anchor (a) element.
The "autocomplete='off'" attribute in the Form element, prevents drop-down-list of previously typed search strings, which are not in the given list.
The HTML Style Element
Apart from the background colors of the inner divs (left and right) and the style attribute of the submit button, the rest of the styles for presentation of the important elements of the panel, are in the HTML style element, in the head element.
The box-sizing Property
At the top within the style element content, is the CSS rule:
* {
box-sizing: border-box;
}
This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the form element and the div elements. The box-sizing property means that the width of each element is measured from the left edge of the left border, to the right edge of the opposite border, instead of from the left edge of the element's left content, to the right edge of the element's right content. The box-sizing property also means that the height of each element is measured from the top edge of the top border, to the bottom edge of the opposite border, instead of from the top edge of the element's top content, to the bottom edge of the element's bottom content. The box-sizing property makes coding convenient for projects like this one.
CSS Rule for the HTML Body Element
The CSS rule for the HTML body element is:
body {
font-family: Arial, Helvetica, sans-serif;
}
If the browser does not have the font, Arial, it likely has the font, Helvetica. If it happens that the browser does not have the font, Helvetica, then it most likely has the font, sans-serif.
CSS Rule for the div.row
The div element with class-name, "row" is the container for the inner left and inner right divs. Its CSS rule is:
/* Create a row */
div.row {
overflow: hidden;
}
There is only one property here, which is: "overflow: hidden;" . If this particular property is not there, the inner left and inner right divs will not be contained within the row div. Also, if it is not there, the next element typed after the row div, will not appear below the row div; it will appear either below the inner left div or below the inner right div. This reasoning does not sound logical, but it works; it works with all the major browsers.
CSS Rule for Inner Left Div
The CSS rule for the inner left div is:
/* Left column (menu) */
div.left {
float:left;
width: 35%;
padding: 15px 0;
}
The inner left div is floated left; its width is 35% of the width of its row div container. Its top and bottom padding is 15px. Its left and right padding is 0px.
CSS Rule for div.left h2
The CSS rule for "div.left h2" is:
div.left h2 {
padding-left: 8px;
}
Overall, the H2 element is shifted from the left edge of the page by at least 8px.
CSS Rule for Inner Right Div
The inner right div has the main document content for the webpage. Its CSS rule is:
/* Right column (page content) */
div.right {
float: right;
width: 65%;
padding: 15px;
}
The inner right div is floated right; its width is 65% of the width of its row div container. Remember that because of the "box-sizing: border-box;" property, each width is measured from the left edge of the left border to the right edge of the right border. The width of the left inner div is 35%. Adding the two inner widths, makes 100%. The "box-sizing: border-box;" property is applicable to all container elements in the webpage. The padding all round is 15px.
CSS Rule for the Search Field
The search field is an HTML input-text element, within a form element. Its CSS rule is:
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
This rule is identified in the style element using the ID of the HTML input-text element in the HTML body element. The ID of the input-text element is "mySearch". Its width is 100% of its containing element, which is the form element. So, the submit button has to go down below the input-text element, within the form element, when displayed at the browser. The form element itself is not given any width, so the form takes 100% width of its containing element, which is the inner left div. At this point, it is assumed that the reader knows the use of the other CSS properties within the #mySearch CSS rule.
Styling the Navigation Menu
The navigation menu refers to the list items in the ul (unordered list) element, below the form element, in the left inner div. The word, "navigation" is used in the naming, because each list item has a hyperlink. The CSS rule is:
/* Style the navigation menu inside the left column */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
This rule is identified in the style element using the ID of the HTML ul element in the HTML body. The ID of the ul element is "myMenu". The property, "list-style-type: none;" means that the list items should not have markers or bullets.
Styling the Hyperlinks
The code for the hyperlink is the anchor element. The CSS rule for the anchor elements in the ul element is:
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
There may be anchor elements elsewhere (such as in the right inner div) in the webpage. So, to refer to the anchor elements in the ul element, the ID of the ul element is used. The property, "text-decoration: none;" means that the anchor element should not be underlined at the browser. The display of each anchor element is block, so that the padding of 12px (at the four sides) should be applicable.
Hyperlink On-hover
The CSS rule for this is:
#myMenu li a:hover {
background-color: #eee;
}
When the mouse pointer goes over an anchor element, its background color becomes #eee (light gray).
JavaScript
There is one function in the JavaScript, in the head element. The JavaScript code is:
<script type="text/javascript">
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("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>
The function, myFunction() is called for each on-key-up, as the user types into the search field. The given list is always shown (dropped-down) at the start. On-key-up, this function compares the sub-string of characters that have just been typed, with each anchor element content string. If the sub-string occurs as a continuous sequence of characters, within an anchor element content string, then that anchor element is maintained, otherwise the list item is removed from the whole given (dropped-down) list.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Search Menu</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Create a row */
div.row {
overflow: hidden;
}
/* Left column (menu) */
div.left {
float:left;
width: 35%;
padding: 15px 0;
}
div.left h2 {
padding-left: 8px;
}
/* Right column (page content) */
div.right {
float: right;
width: 65%;
padding: 15px;
}
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation menu inside the left column */
#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>
<script type="text/javascript">
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("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>
</head>
<body>
<h2>Search Menu</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<div class="row">
<div class="left" style="background-color:#bbb;">
<h2>Menu</h2>
<form action="/acton_page.php"> <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category" autocomplete="off"> <button type="submit" style="float:right">Submit</button></form>
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</div>
<div class="right" style="background-color:#ddd;">
<h2>Page Content</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some text..</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div>
More content can go here, below the row div, thanks to the "overflow: hidden;" property - - -
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file into the browser. Test the webpage by clicking a hyperlink; or typing something into the search field, and then clicking the submit button. If the submit button is clicked, the feedback will be "File not found", because the destination URL is fake (intensionally, and meant only for teaching). If a hyperlink is clicked, there will be no action because each URL of the hyperlink is just #. If the web developer replaces this with a full URL, there will be action.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT