Whenever a sub-menu is activated, only the current sub-menu should be open while the others remain closed.
I need the search function to be enabled on the text box and display all items containing the specified value while also changing the color of <a>
This is the code I came up with:
$(document).ready(function(){
$("#navigation").click(function () {
$(this).next().slideToggle();
});
$("#main-menu>ul>li a ").click(function () {
$(".submenu").slideUp();
$(this).next().slideToggle();
});
$("#main-menu>ul>li>a ").click(function(){
//$(this).toggleClass("current");
});
});@font-face {
font-family: 'casa';
src: url('Fonts/Mj_Casablanca.eot?#') format('eot'), url('Fonts/Mj_Casablanca.woff') format('woff'), url('Fonts/Mj_Casablanca.ttf') format('truetype');
}
body
{
background:#eee;
font:normal 12px casa;
}
a
{
text-decoration:none;
}
li
{
list-style:none;
}
#main-menu li
{
text-align:right;
direction:rtl;
padding:0 2%;
}
#main-menu>ul>li >a:hover
{
background:#575757 url("../img/arrow.png") no-repeat 10px 10px;
}
#menu-search
{
background-color: transparent;
border:none;
width:80%;
text-align:right;
direction:rtl;
color: #eee;
line-height: 30px;
padding: 5px 10%;
}
input[type="text"]
{
font:normal 12px tahoma;
}
.submenu
{
display:none;
}
.current
{
color:orange !important;
}
.submenu li a
{
color:#eee !important;
padding-right:10% !important;
}
#main-menu>ul> li >a
{
border-top: 1px solid #5C5C5C !important;
}
#main-menu
{
width:230px;
background:#303030;
height:auto;
float:right;
/*max-height:400px;*/
overflow: visible !important;
padding:5px 0;
}
#main-menu>ul
{
display:block !important;
}
#main-menu>ul>li >a
{
background: url("../img/arrow.png") no-repeat 10px 10px;
}
#main-menu li a {
color:#fff;
display: block;
padding: 10px 10%;
}
#navigation
{
display:none;
}
.submenu
{
display:none;
}
#footer
{
min-height: 40px;
width: 100%;
clear: both;
background: #5C5C5C;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="main-menu">
<a href="#" id="navigation">Menu</a>
<ul>
<li>
<input type="text" name="txt" id="menu-search" placeholder="Search..."/>
</li>
<li><a href="#">Items 1</a>
<ul class="submenu">
<li><a href="#">Item1</a>
<ul class="submenu">
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
<li><a href="#">Items 4</a>
</ul>
</li>
<li><a href="#">Items2</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
<li><a href="#">Items 4</a>
</ul>
</li>
<li><a href="#">Items3</a></li>
</ul>
</li>
<li><a href="#">Items4</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
</ul>
</li>
<li><a href="#">Items5</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<ul class="submenu">
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
</ul>
</li>
<li><a href="#">Items 1</a>
<li><a href="#">Items 2</a>
<li><a href="#">Items 3</a>
</ul>
</li>
</ul>
<div>
<div id="footer">
</div>