CSS menu s vyhledáváním
Nabídka s vyhledáváním
Obsah stránky
Začněte psát konkrétní kategorii do vyhledávacího pole, abyste „filtrovali“ možnosti vyhledávání.
Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..
Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..
Dál se mě nechce psát :) ..
Kód:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.side {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
/* rozvržení sloupcú pomocí Flexbox */
.row {
display: flex;
}
/* Levý sloupec (menu) */
.left {
flex: 25%;
padding: 15px 0;
}
.left h3 {
padding-left: 8px;
color: black;
font-size: 19px;
}
/* Pravý sloupec */
.right {
flex: 75%;
padding: 15px;
}
/* Styl vyhledávače */
#mySearch {
width: 100%;
font-size: 16px;
padding: 5px;
border: 1px solid #fff;
background: #fff;
}
/* Styl levého sloupce */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
#myMenu li a {
display: block;
margin: 0!important;
padding: 4px 8px 8px;
font-weight: 400;
color: black;
min-width: 110px;
width: auto;
height: 26px;
font-size: 16px;
white-space: nowrap;
overflow: visible;
text-decoration: none;
background: #eee;
border-bottom: solid 1px #fff;
border-left: solid 1px #fff;
border-right: solid 1px #fff;
}
#myMenu li a:hover {
background-color: #d1ffb3;
width: 100%;
color: #338000;
border-bottom: solid 1px #fff;
border-left: solid 1px #fff;
border-right: solid 1px #fff;
}
</style>
<div class="side">
<div class="row">
<div class="left" style="background-color:#f7f7f7;">
<h3>Nabídka</h3>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Hledat.." title="Napište kategorii">
<ul id="myMenu">
<li><a href="#no">HTML</a></li>
<li><a href="#no">CSS</a></li>
<li><a href="#no">JavaScript</a></li>
<li><a href="#no">PHP</a></li>
<li><a href="#no">Python</a></li>
<li><a href="#no">jQuery</a></li>
<li><a href="#no">SQL</a></li>
<li><a href="#no">Bootstrap</a></li>
<li><a href="#no">Node.js</a></li>
</ul>
</div>
<div class="right" style="background-color:#f7f7f7;">
<h3>Obsah stránky</h3>
<p>Začněte psát konkrétní kategorii do vyhledávacího pole, abyste „filtrovali“ možnosti vyhledávání.</p>
<p>Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..</p>
<p>Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..</p>
<p>Dál se mě nechce psát :) ..</p>
</div>
</div>
<script>
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>
</div>