How to create menu with Search engine using HTML, CSS and Javascript




Try yourself >>


In this lesson you will learn how to create menu with simple search engine


This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Javascript Instructions

We will add comments inside the example code boxes to explain as much as we can, comments are in grey color.





Part 1


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>


Visit our HTML Forms Guide to learn more about HTML Forms


Visit our CSS Forms Guide to learn more about CSS Forms


Code Example:

             <div class="row">
  <div class="leftside" >
    <h2>Learn Coding</h2>
    <input type="text" id="simplesearch" onkeyup="myFunction()"
     placeholder="Search.." title="Type and search">
    <ul id="menu_options">
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">Coding</a></li>
      <li><a href="#">Tutorials</a></li>
    </ul>
  </div>
  <div class="rightside" >
    <h2>Website heading</h2><br><br>
    <p>your content is here: we teach programming easy 
    and free, anjoy our guides and share to your friends.</p>
  </div>
</div> 
  




Part 2


Add CSS

Add the style sheets:


Code Example:

        <style>
/* font type */
    body {
  font-family: Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
/* style right box  */
.rightside {
  flex: 65%;
  padding: 15px;
  background-color:#FFE1A9;
}
/* style left box  */
.leftside {
  flex: 35%;
  padding: 15px 0;
  background-color:#CCB487;
}
/* style heading */
.leftside h2{
  padding-left: 8px;
}
menu_options {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
simplesearch {
  width: 100%;
  font-size: 20px;
  padding: 11px;
  border: 1px solid #ddd;
}
/* text each link */
menu_options li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block;
}
/* style when you hover with mouse on tab link */
menu_options li a:hover {
  background-color: #eee;
}
</style>  
  
Try yourself >>


Visit our CSS Media Queries tutorial to create responsive mobile friendly navigation menus and more CSS Media Queries tutorial



Where to learn coding in 2020?, you are in the right place, best website to learn python and coding, with us you can easily learn coding classes for adults, our main goal is to allow students to learn computer programming, learn front end development to server side development free

Navigation