Manajmnt code: HTML

How to keep input value if user change current page in blogger

https://manajmnt-code.blogspot.com/2021/06/how-to-keep-input-value-if-user-change.html

to keep value if user open other link in current page you must be use text area tag to do this, look at this exemple :

write any words in textbox bellow ,

click to button to open other link ,

click to go back of browser.

you will be noted that your input value, it's kept

HTML JavaScript

Mami Mahfoud June 09, 2021

Easy way to Create Autocomplete on an Input Field pure JavaScript

https://manajmnt-code.blogspot.com/2021/05/easy-way-to-create-autocomplete-on.html

In this code we learn how to create input field with autocomplete, we need to do this to Create input tag, datalist tag, and option tags with values from array words

  
   <style>
input{width:250px;border:0 ;border-bottom:1px solid #e00; padding:5px; margin:5px auto }
  input:focus{outline:0;  }
input::-webkit-calendar-picker-indicator {
    display: none !important;
  }
  
</style>
<form id="searchbar" action="/search"></form>




<script>
  window.addEventListener("load", function(){
var mycars = new Array();
mycars = ["html","css","javscript","Jquery", "bootstrap"]
var options = '';

for (var i = 0; i < mycars.length; i++) {
  options += '<option value="' + mycars[i] + '" />';
}
   /*create input tag*/ 
  var inputsrc= document.createElement("INPUT");
  inputsrc.setAttribute("list", "anrede");
    inputsrc.setAttribute("type", "search");
     inputsrc.setAttribute("placeholder", "search...");
    document.getElementById("searchbar").appendChild(inputsrc);
     /*create datalist tag*/
    var datalist= document.createElement("DATALIST");
  datalist.setAttribute("id", "anrede");
 document.getElementById("searchbar").appendChild(datalist);
datalist.innerHTML=options;
 
    
  })
</script>

HTML JavaScript

Mami Mahfoud May 16, 2021

How to get color html code on change color input

https://manajmnt-code.blogspot.com/2021/05/how-to-get-color-html-code-on-change.html

in this code i will show how to get color html code on change color input

  
   <label for="works2">change color and get html code</label> <input type="color" id="works2" value="#bdd40c" onchange="document.body.innerHTML+='<p/><input  value='+ this.value + ' ><input  type=color value='+ this.value + ' >' " />

HTML

Mami Mahfoud May 15, 2021

How to make button with icon from image

https://manajmnt-code.blogspot.com/2021/05/how-to-make-button-with-icon-from-image.html

In this code iwill be share with you how to make button with icon from image, we use CSS background: url() property with <a> & <button>

 <style>
  button.fa-img.gmail {
    background: url(https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_rtl_r2.png);
    width: 76px;
    height: 30px;
}
button.fa-img.gmail {
    background-size: cover;
    background-position-x: 30px;
    border-radius: 6px;
   border: 0;
    box-shadow: 0 0 1px 0;
    margin: 0 5px;
    padding: 0px;
    transition: 0.5s;
    outline: 0;
    cursor: pointer;
}
  
  
</style>

<a href="#"> <button class="fa-img gmail"></button></a>

CSS HTML

Mami Mahfoud May 06, 2021

How-to create new HTML tag or custom HTML tag

https://manajmnt-code.blogspot.com/2021/05/how-to-create-new-html-tag-or.html

In this code, we learn how to create new tags or custom HTML tags. The idea is to create a custom style or function for this tag, because standard HTML tags are defined by browsers that define their own styles and functions. In this exemple we are create new tag <newtag></newtag> with costum style for explain

 <style>
newtag {
    border-radius: 3px;
    color: #505050;
    background: #f7f7f7;
    padding: 2px 4px;
    box-shadow: 0 0 3px 1px;
}

</style>



<newtag contenteditable="true"> this is new tag </newtag>

<br><br><br><br>

  <newtag> write any think </newtag>

HTML

Mami Mahfoud May 04, 2021

building text editor template using html css js

https://manajmnt-code.blogspot.com/2021/05/building-text-editor-template-using.html

To build a text editor we need firstly an HTML template like this one

 <style>
.buttons { width: 100px; display: inline-block; border:0;cursor:pointer}
button { width: 100%; border: 0; cursor: pointer; margin: 2px; }  
  
ul.dropdown { padding-inline-start: 0.2px; display: none; background: #dadada; margin-block-start: 0; width:150px; z-index:99}
  li.item { list-style: none; padding: 4px;cursor:pointer }
   li.item:hover { background: #eee }
  
  .buttons:hover ul.dropdown{display:block; position:absolute}
</style>
<div>
  <div class="buttons" >
    <button>file</button>
    <ul class="dropdown">
  <li class="item">open</li>
     <li class="item">new</li>
     <li class="item">save</li>
 <li class="item">saveas</li>
  </ul>
  </div>
  <div class="buttons">
    <button>edit</button>
    <ul class="dropdown">
  <li class="item">cut</li>
     <li class="item">copy</li>
     <li class="item">paste</li>
 <li class="item">selectAll</li>
  </ul>
  </div>
  <div class="buttons">
    <button>about</button>
    <ul class="dropdown">
  <li class="item">building text editor template using html css js</li>
     
  </ul>
  </div>
<div contenteditable="true" style="border:1px solid #eee; padding:3px; margin:0 2px; height:300px"></div>
</div>

this template content a buttons, dropdowns, div tag editable.
the dropdown also content a command buttons to do something like open file, save, copy, paste, insert image...
to do this, we need: file system accessAPI and clipboard api

CSS HTML JavaScript Wysiwyg-editor

Mami Mahfoud May 01, 2021

How to run JavaScript function when option selected

https://manajmnt-code.blogspot.com/2021/04/how-to-run-javascript-function-when.html

In this example we learn how to run javascript when option selected, we need to do this select and option tag in html, and change event and if condition in Javascript

 <select id="compress" style="padding:3px 5px">
  <option value="select" disabled selected>-- select --</option>
  <option value="HTML">Compress HTML </option>
  <option value="CSS">Compress CSS </option>
  <option value="JS">Compress JavaScript </option>
</select>

<script>
  var select=document.getElementById("compress");
select.addEventListener("change", function(){
  if(select.value == "HTML"){
    alert("HTML")
  }
  if(select.value == "CSS"){
    alert("CSS")
  }
  if(select.value == "JS"){
    alert("JS")
  }
  
  
});

  </script>

HTML JavaScript

Mami Mahfoud April 29, 2021

How-to create search bar like google using material icon

https://manajmnt-code.blogspot.com/2021/04/how-to-create-search-bar-like-google.html

In this example, we learn how to create search bar with icon like google, we use table tag and material icon library to do this.

 <link href="//fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">

<style>
  
  #search-bar { box-shadow: 0 0 2px 0; padding: 3px 10px; border-radius: 22px; color: 	#545454;margin:0 auto }
  input[type="search"] { height: 26px; border: 0; }
  input[type="search"]:focus { outline: 0; }


</style>

<table id="search-bar">
  <tbody>
  <tr><td><span  class="icon-asset material-icons-outlined ng-star-inserted">search</span></td><td><form action="" style="margin-block-end: 0;"><input type="search" placeholder="search..." autocomplete="off"  /></form></td><td><span  class="material-icons-outlined ng-star-inserted" title="Search by voice" style="cursor: pointer;">mic</span></td><td><span  class="material-icons-outlined ng-star-inserted"  style="cursor: pointer;">search</span></td></tr>
  </tbody>
</table>

HTML web_fonts

Mami Mahfoud April 28, 2021

How to inject JavaScript into iframe tag

https://manajmnt-code.blogspot.com/2021/04/how-to-inject-javascript-into-iframe-tag.html

in this example we learn how to isert javascript function inside iframe.

 <p><button id="btn">run js</button></p>
<iframe id="iframe"></iframe>
<script type="text/javascript">
 document.getElementById("btn").addEventListener('click',
  function runcode(){
  var js_code="<script>document.write('hello')</\script>"
   var doc = document.getElementById('iframe').contentWindow.document;
   doc.open();
   doc.write(js_code);
   doc.close();
  });
</script>

HTML JavaScript

Mami Mahfoud April 28, 2021

How-to paste text from clipboard automatically onload page

https://manajmnt-code.blogspot.com/2021/04/how-to-paste-text-from-clipboard.html

<textarea id="pasteArea" cols="50" rows="10"></textarea><br>

<script>

window.addEventListener('load', (event) => {
    let pasteArea = document.getElementById('pasteArea');
  pasteArea.focus();
    pasteArea.value = '';
 
    navigator.clipboard.readText()
    .then((text)=>{
        pasteArea.value = text;
    });
})
 </script>

In this example we'll learn how to paste text from clipboard automatically inside specific textarea on page is loaded, we need textarea tag and clipboard API JavaScript code to do this.
If you copied certain text, it will be pasted automatically in the text box.
in Chrome browser asks for permission

How-to HTML JavaScript JSON_API

Mami Mahfoud April 25, 2021

custom PayPal button html code

https://manajmnt-code.blogspot.com/2021/04/custom-paypal-button-html-code.html

I will share with you a professional PayPal button code in html and CSS with icon (font-awesome). look at this code below:

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button style="font-style: italic;background: white;"><i class="fa fa-paypal" style="color: #012069;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></button>
  <button style="color: white ;background:#012069 ;" ><i class="fa fa-paypal"></i></button>

html code for PayPal button with anchor

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button style="font-style: italic;background: white;"><a href="#" style="text-decoration: none;" target="_blank"><i class="fa fa-paypal" style="color: #012069;vertical-align: middle;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></a></button>

html code for PayPal button with custom style CSS

   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<style>
  #paypalbtn{font-style: italic;background: white;border:0; box-shadow: 0 0 3px;padding: 0 7px 0px 7px;; border-radius:4px}
   i.fa.fa-paypal:hover {transform: rotate(360deg);transition: 0.5s;}
</style>


<button id="paypalbtn" ><a href="#" style="text-decoration: none;" target="_blank"><i class="fa fa-paypal" style="color: #012069;vertical-align: middle;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></a></button>

Donate button PayPal html code

   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button style="font-style: italic;background: white;"><a href="#" style="text-decoration: none;" target="_blank"><i class="fa fa-paypal" style="color: #012069;vertical-align: middle;"></i><span style="color: #012069;"> pay</span><span style="color: #009cde;">pal</span></a></button>

CSS Framework_Front-End HTML web_fonts

Mami Mahfoud April 23, 2021

How-to run HTML, CSS, JS code in iframe from textarea value

https://manajmnt-code.blogspot.com/2021/04/how-to-run-html-css-js-code-in-iframe.html

In this code we will be share with you how to create simple editor with preview for HTML CSS and JavaScript codes, we need textarea to write code and iframe to preview

 <style>
  #editor{padding:5px; outline:0; border:0; border-radius:3px;box-shadow: 0 0 3px 0}
  #editor:focus{border:1px #eee; }
   #editor, #FileFrame{margin-top:5px;margin-bottom:5px}
</style>

<textarea id="editor" style="width:100%; height:200px">
<img src="https://cdn.pixabay.com/photo/2021/04/01/15/37/fruits-6142591__340.jpg" style="width:192px; height:108px"/>
</textarea>
<button onclick="runcode()">Run code</button>
<iframe id="FileFrame" src="about:blank" style="width:100%; height:200px" ></iframe>

<script type="text/javascript">
 
  function runcode(){
  var editor=document.getElementById("editor").value;
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write(editor);
   doc.close();
  }
</script>

How-to HTML JavaScript

Mami Mahfoud April 22, 2021

Many ways to Creating text box in html

https://manajmnt-code.blogspot.com/2021/04/many-ways-to-creating-text-box-in-html.html

There are many ways to creating text box in HTML, here are some tricks for making the text appear inside a box.

Trick 1: Create a text box using only HTML

 <fieldset>
    <legend>title : </legend>
   text..........
  </fieldset>

Trick 2: Create a text box using HTML&CSS

There are two methods, create DIV or any TAG and then add a STYLE to it as follows:

method 1

specific tag:

 <div style="border: 1px solid red; padding:2px">
  write your text here.......
   </div>

or:

 <div style="box-shadow: 0 0 3px 1px; padding:2px">
  write your text here.......
 </div>

methods 2

specific tag:

 <html>
  <head>
    <style>.text-box{border: 1px solid red; padding:2px}</style>
  </head>
  <body>
    <div class="text-box">write your text here.........</div>
    <br>
<p class="text-box">write your scend text here.........</p>
  
  </body>
</html>

Trick 3: Create a text box using HTML & JavaScript

methods 1

 <p>text 1.................</p>

<p>text 2......................</p>

<script>
  //<![CDATA[
  var par = document.getElementsByTagName("p");
    var p;
  for(p=0; p<par.length; p++){
  par[p].setAttribute("style","border: 1px solid red; padding:2px") 
     }
//]]>
 </script>

methods 2

also, can you create style of specific class or tag with JavaScript

 <body>
  
<p>
  text.............
</p>

<div class="text-box">
  text...............
  </div>


<!--by tag-->
<script>
  var sty = document.createElement("style");
sty.innerHTML = "p{border: 1px solid red; padding:2px}";
  document.body.appendChild(sty);
</script>
  <!--by class-->
  <script>
  var sty1 = document.createElement("style");
sty1.innerHTML = ".text-box{border: 1px solid red; padding:2px}";
  document.body.appendChild(sty1);
</script>
  
  </body>

HTML

Mami Mahfoud April 21, 2021

How-to create table scroll to left & right with button in html

https://manajmnt-code.blogspot.com/2021/04/how-to-create-table-scroll-to-left.html

in this example we learn how-to create table scroll to left & right with button in html using CSS and JavaScript

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  #t-output{
    scroll-behavior: smooth;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn2 {
  display: ;
float:right;
}
  #myBtn {
  display: ;
float:left;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>
<div >
  <button onclick="topFunction()" id="myBtn" title="Go to top">right</button>
<button onclick="topFunction2()" id="myBtn2" title="Go to top">left</button>
  </div>

<div id="t-output" >
<style>
tr:first-child {background: white;color: black;}tbody {background: white;color: black;}tr:nth-child(2n+0) {}
#t-output{overflow-x:auto;text-align: center;}#t-output td{padding:5px;white-space:nowrap;cursor:context-menu}#t-output td:hover{background:#383838;color:#fff}
</style>
<table border="1">
<tbody><tr><td>cell 0,0</td><td>cell 1,0</td><td>cell 2,0</td><td>cell 3,0</td><td>cell 4,0</td><td>cell 5,0</td><td>cell 6,0</td><td>cell 7,0</td><td>cell 8,0</td><td>cell 9,0</td><td>cell 10,0</td><td>cell 11,0</td><td>cell 12,0</td><td>cell 13,0</td><td>cell 14,0</td></tr>
<tr><td>cell 0,1</td><td>cell 1,1</td><td>cell 2,1</td><td>cell 3,1</td><td>cell 4,1</td><td>cell 5,1</td><td>cell 6,1</td><td>cell 7,1</td><td>cell 8,1</td><td>cell 9,1</td><td>cell 10,1</td><td>cell 11,1</td><td>cell 12,1</td><td>cell 13,1</td><td>cell 14,1</td></tr>
<tr><td>cell 0,2</td><td>cell 1,2</td><td>cell 2,2</td><td>cell 3,2</td><td>cell 4,2</td><td>cell 5,2</td><td>cell 6,2</td><td>cell 7,2</td><td>cell 8,2</td><td>cell 9,2</td><td>cell 10,2</td><td>cell 11,2</td><td>cell 12,2</td><td>cell 13,2</td><td>cell 14,2</td></tr>
<tr><td>cell 0,3</td><td>cell 1,3</td><td>cell 2,3</td><td>cell 3,3</td><td>cell 4,3</td><td>cell 5,3</td><td>cell 6,3</td><td>cell 7,3</td><td>cell 8,3</td><td>cell 9,3</td><td>cell 10,3</td><td>cell 11,3</td><td>cell 12,3</td><td>cell 13,3</td><td>cell 14,3</td></tr>
<tr><td>cell 0,4</td><td>cell 1,4</td><td>cell 2,4</td><td>cell 3,4</td><td>cell 4,4</td><td>cell 5,4</td><td>cell 6,4</td><td>cell 7,4</td><td>cell 8,4</td><td>cell 9,4</td><td>cell 10,4</td><td>cell 11,4</td><td>cell 12,4</td><td>cell 13,4</td><td>cell 14,4</td></tr>
</tbody></table>
</div>


<script>

function topFunction() {
  document.getElementById("t-output").scrollLeft= 0;

}
  function topFunction2() {
    var ee =document.getElementById("t-output").scrollWidth;
  document.getElementById("t-output").scrollLeft+=ee;
   
};
 
  
</script>
 
  

</body>
</html>

CSS HTML JavaScript

Mami Mahfoud April 21, 2021

How to make input suggestion with html only (without JS or Jquery)

https://manajmnt-code.blogspot.com/2021/04/how-to-make-input-suggestion-with-html.html

In this post, I will be to share with you how to make input autocomplete with html only, without JavaScript, without jQuery, this is html trick you should take advantage of, let's get started

 <label for="browser">Display:</label>
<input list="browsers" name="browser" id="browser" >
<datalist id="browsers"><option value="block"><option value="contents">
<option value="flex"><option value="flow-root"><option value="grid"><option value="inline"><option value="inline-block"><option value="table"><option value="grid">
</datalist><br>

HTML

Mami Mahfoud April 21, 2021

How to make search button in html with icon

https://manajmnt-code.blogspot.com/2021/04/how-to-make-search-button-in-html-with.html

In this lesson, we will share with you How to make search button in html with icon (font-awesome). look at this code below:

   <head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
<form action="search">
	<label >
		<input type="search" name="q"  placeholder="search..." value="" >
		<button ><i class="fa fa-search"></i></button>
	</label>  
</form>
    
    </body>

What will happen when we write something in the search box and then put pressure on the ok or the search button? When you write for example "new York" in the search box, then click OK, the URL will change to: https://www.yourdomine.com/search?q=new+york this is the role of attribute ( action="search" ) in form tag in html.

How to make search button in html for external website (YouTube)

   <head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>

		<form action="https://www.youtube.com/results">
  <input type="search" name="search_query"  placeholder="search..." value="" >
		<button ><i class="fa fa-search"></i></button>
</form>

    
    </body>

output:

How-to HTML web_fonts

Mami Mahfoud April 17, 2021

Display page content of link on hover in popup using JavaScript

https://manajmnt-code.blogspot.com/2021/04/display-page-content-of-link-on-hover.html

on hover mouse show page content of link, in this example can you add many link in your article, will be added automatically frame tag for every link to show the content of page in popup using CSS & JavaScript

     <style>
.tiptext {color:#069; cursor:pointer;}
.tiptext:hover .page-content{transition: height 1s; height:400px;visibility:visible}
.page-content {visibility:hidden;position:absolute;display:block;box-shadow:0 2px 1px 0;width:400px;height:0px;padding: 7px;transition:  0.75s;}
</style>

on hover mouse show content source link <a href="/2021/04/how-to-calculate-number-of-products-and.html">hover me</a>
<br><br>
can you aplied this code for evry anchor (link) in your page or inside spesific class in the page
<a href="/2021/04/create-smart-table-of-contents-with.html">hover me</a>
      <br><br>
 for external link Some website don't allow their site to be shared within an iframe
for exemple W3schools<a href="https://www.w3schools.com/">hover me (refused to connect)</a>
<script>
var anchor=document.getElementsByTagName('a');
  var i;
  for(i=0;i<anchor.length;i++){
    ahref=anchor[i].href;
    
    anchor[i].className="tiptext"
    anchor[i].innerHTML+='<iframe class="page-content" src="'+ahref+'"></iframe>'
  }

</script>

CSS HTML JavaScript

Mami Mahfoud April 17, 2021

Create smart table of contents with HTML and JavaScript

https://manajmnt-code.blogspot.com/2021/04/create-smart-table-of-contents-with.html

This script searches for h2 tags and then extracts links to these headings, the table of contents is generated before these headings

  <div id="category-body">
  <ul id="toc"></ul>
  <h2 >heading 1</h2>
  <h2 >heading 2</h2>
  <h2 >heading 3</h2>
  <h2>heading 4</h2>
</div>

The script must be placed after the headings that you want to appear in the table of contents      
      
<script>
var ss=document.getElementById("category-body");
  var ss2=document.getElementsByTagName("h2");
  var i; var j;
  if(ss2.length > 0){
  document.getElementById("toc").innerHTML+='<p>Contents:</p><style>ul#toc {list-style: none;box-shadow: 0 0 2px 0;width: max-content;min-width: 130px;padding: 1px 1px 13px 8px;}ul#toc li { margin-left: 30px; list-style: decimal;  }#toc li a { text-decoration: none; }<"+"/style>'

  for (i = 0; i < ss2.length ; i++){
    add_id=ss2[i].innerHTML;
    var dd=ss2[i].innerHTML;
    var dd2=ss2[i].id=add_id ;
    document.getElementById("toc").innerHTML+="<li><a href='#"+dd2+"' >"+dd+"</a></li>"
   
    
  }};
  
</script>

HTML JavaScript

Mami Mahfoud April 16, 2021

Simple html responsive layout without using any library or framework

https://manajmnt-code.blogspot.com/2021/04/simple-html-responsive-layout-without.html

This is a simple, responsive, HTML template with different devices, designed with HTML and CSS only, containing the header and body that is divided into wrapper and sidebar and footer.

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple html responsive layout</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>

<style>
  
  html {scroll-behavior: smooth;}
  body { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529;  background-color: #fff; padding: 2px 5px}
  
  /*disktop style*/
  header{width:100%; height:48px; background:#00d0ff69;}

  center {margin: 10px auto;}
  #ads-header{display:inline-block;width: 730px;height: 92px;background: orange;}

  #wrapper{margin:0;overflow:hidden; }
  #content{width:75%; height:400px; background:#ff3b008f; float:right}
  #sidebar-content{width:24%; height:400px; background:yellow; float:left}

  footer {margin-top: 10px;}
  #social-media{ background:#c2de8b}
  #copy-right{ background:#93a971}
  
  #copy-right,#social-media {width;100%;height:48px;text-align: center;padding-top: 20px;}
  
  
  /*mobile style*/
  @media screen and (max-width: 759px) {#ads-header{display: none;}}
  @media screen and (max-width: 850px) {#content{width:100%;float:none} #sidebar-content{width:100%;margin-top: 10px;float:none}


</style>
  
</head>
  
<body>

  <header> nav bar,search bar</header>
<center><div id="ads-header">adsence 728*90 </div></center>
<div id="wrapper">
  <div id="content"></div>
  <div id="sidebar-content"></div>
</div>
<footer>
  <div id="social-media"> facebook, youtube, twitter... </div>
  <div id="copy-right" > your website 2021 ©</div>
</footer>


</body>
</html>

CSS HTML

Mami Mahfoud April 16, 2021

Responsive Multi-level dropdown menu with search bar

https://manajmnt-code.blogspot.com/2021/04/multi-level-dropdown-menu-responsive.html

In this code, I'm going to share with you a responsive multi-level dropdown with search bar, so we need HTML, CSS, and JavaScript.
Source code with preview:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { overflow-x: hidden; height: 100%; } body { background: #fff; padding: 0; margin: 0; font-family: 'Varela Round', sans-serif; }
  /*start header css*/
  .header { display: block; margin: 0 auto; width: 100%; max-width: 100%; box-shadow: 0px 0px 4px 0px; background-color: white; position: fixed; height: 48px!important; overflow: hidden; z-index: 10; } .main { margin: 0 auto; display: block; height: 100%; margin-top: 60px; } .mainInner { display: table; height: 100%; width: 100%; text-align: center; } .mainInner div { display: table-cell; vertical-align: middle; font-size: 3em; font-weight: bold; letter-spacing: 1.25px; } #sideMenu { height: 100%; position: fixed; left: 0; width: 250px; margin-top: 48px; transform: translateX(-250px); transition: transform 250ms ease-in-out; background: #eec902; z-index: 1; } .sideMenuInner { margin: 0; padding: 0; border-top: 1px solid black; } .sideMenuInner li { list-style: none; color: #fff; text-transform: uppercase; font-weight: bold; padding: 20px; cursor: pointer; } .sideMenuInner li:hover {background:#d6b400} .sideMenuInner li span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.50); } .sideMenuInner li a { color: #000; text-transform: uppercase; font-weight: bold; cursor: pointer; text-decoration: none; } input[type="checkbox"]:checked~#sideMenu { transform: translateX(0); } input[type=checkbox] { transition: all 0.3s; box-sizing: border-box; display: none; } .sideIconToggle { transition: all 0.3s; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 16px; left: 15px; height: 22px; width: 22px; } .spinner { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 3px; width: 100%; background-color: #000; } .horizontal { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } .diagonal.part-1 { position: relative; transition: all 0.3s; box-sizing: border-box; float: left; } .diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px; } input[type=checkbox]:checked~.sideIconToggle>.horizontal { transition: all 0.3s; box-sizing: border-box; opacity: 0; } input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 { transition: all 0.3s; box-sizing: border-box; transform: rotate(135deg); margin-top: 8px; } input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; transform: rotate(-135deg); margin-top: -9px; } #sidenav-overlay { position: fixed; top: 0; left: 0; width: 0; height: 100%; background: rgba(0, 0, 0, .1); cursor: pointer; z-index: 1; } #search-input1{;text-align: center; width:100%;position:absolute ;z-index:999; height:48px; width:100%; top:0;background:white;display:block} #search-input{display:none} .fa {font-size: 24px;vertical-align: middle;} i.fa.fa-search{float:right; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; top: 10px; right: 15px; height: 22px; width: 22px;color:#484848}@media only screen and (max-width: 387px) {i.fa.fa-search{ right: 2px}} .header img{width: 130px} i.fa.fa-arrow-left { position: absolute; left: 5px; top: 10px; }
  /*end header css*/
  
.multlevel:after {content: "\f078";font-family: 'FontAwesome';position: absolute;right: 12px;}
 .multlevel, .onelevel { background:#eec902 ; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.9s; } .active, .multlevel:hover { background-color: #d6b401; }
.active, .onelevel:hover { background-color: #d6b401; }.subitem { padding: 0 ; display: none; background-color: white; overflow: hidden; }
  
  button.fa.fa-search {position: absolute;height: 38px;margin-left: 1px;top: 5px;font-size: medium;}
  
  
</style>
<header>
<form id="search-input" action="search">
  <input  type="search" name="q" placeholder="search..." value="" autocomplete="off" style="position: relative; top: 5px; height: 38px; width: 80%;"><i class="fa fa-arrow-left" onclick="document.getElementById('search-input1').id='search-input'" style="float:left"></i><button class="fa fa-search"  style="float:right"></button>
</form>
<div class="header">
  
<i class="fa fa-search" onclick="document.getElementById('search-input').id='search-input1'"></i>
<a href="#" style="position: absolute; top: 3px; right: 43px; text-decoration: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cF9wza5D9zmmLoGW-nVFvU7sUTKqe_I91wqatpJGvF5aKaMusehRrxvRgVQXp4uui-F-RpfXin6bwMy2YtCw5yAoN-nGJaVKZlBMu0jWyX9t4vEf5RIOie4Sg0YQ35GAlc7itO7H8H-2/h111/manajmnt+logo.png"  alt="Manajmnt" title="Manajmnt"/> </a>
</div>

<div id="sidebarContainer">
  <input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
  

  <div id="sideMenu">
    
    
    <ul class="sideMenuInner">
      <!--onelevel-->
      <button class="onelevel"><a onclick="hideSidebar()" href="#" data-toggle="tab">onelevel</a></button>
      <!--onelevel-->
      <!--twolevel-->
      <button class="multlevel">twolevel</button>
<div class="subitem">
<button class="onelevel"><a href="#">section</a></button>
</div>
      <!--twolevel-->
      <!--threelevel-->
      <button class="multlevel">threelevel</button>
<div class="subitem">
<button class="multlevel">threelevel</button>
<div class="subitem">
<button class="onelevel"><a href="#">Section 1.2.1</a></button>
  <button class="onelevel"><a href="#">Section 1.2.1</a></button>
<button class="onelevel"><a href="#">Section 1.2.1</a></button>
  </div>
 <button class="onelevel"><a href="#">section</a></button>
</div>
      <!--threelevel-->
      
    </ul>
  </div>

</div>
<script>
function hideSidebar() {
  document.getElementById('openSideMenu').checked = false;
}

var sideIconToggle = document.getElementById('sidebarContainer');

document.addEventListener('click', function(event) {
  if (!sidebarContainer.contains(event.target))
    hideSidebar();
});
</script>
<script>
var acc = document.getElementsByClassName("multlevel");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var subitem = this.nextElementSibling;
    if (subitem.style.display === "block") {
      subitem.style.display = "none";
    } else {
      subitem.style.display = "block";
    }
  });
}
</script>


  
  
  
</header>

CSS HTML JavaScript

Mami Mahfoud April 16, 2021

How to keep input value if user change current page in blogger

Easy way to Create Autocomplete on an Input Field pure JavaScript

How to get color html code on change color input

How to make button with icon from image

How-to create new HTML tag or custom HTML tag

building text editor template using html css js

How to run JavaScript function when option selected

How-to create search bar like google using material icon

How to inject JavaScript into iframe tag

How-to paste text from clipboard automatically onload page

custom PayPal button html code

How-to run HTML, CSS, JS code in iframe from textarea value

Many ways to Creating text box in html

Trick 1: Create a text box using only HTML

Trick 2: Create a text box using HTML&CSS

method 1

specific tag:

methods 2

Trick 3: Create a text box using HTML & JavaScript

methods 2

How-to create table scroll to left & right with button in html

How to make input suggestion with html only (without JS or Jquery)

How to make search button in html with icon

How to make search button in html for external website (YouTube)

Display page content of link on hover in popup using JavaScript

Create smart table of contents with HTML and JavaScript

Simple html responsive layout without using any library or framework

Responsive Multi-level dropdown menu with search bar

Meta keywords generator tool for Blogger

How to add a quick edit button in Blogger

How-to select & copy code from codemirror editor with button

Getting height and width when resizing two divs at the same time

Create direct download link for google drive file online