Multi Level Navigation Menu with Search Filter

<input id="Search" type="text" />
<div class="menu">
    <ul>
        <li class="active">
            <a href="" style="display: list-item;">
                <i class="zmdi zmdi-home"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>CRM</span>
            </a>
            <ul class="ml-menu core_ml-menu">
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Accounts</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Contacts</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Accounts Listing Test</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Projects</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Custom Report</span>
                    </a>
                </li>

            </ul>
        </li>
        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>Leads</span>
            </a>
            <ul class="ml-menu core_ml-menu">
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Unqualified Leads</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>In-process Leads</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Qualified Leads</span>
                    </a>
                </li>
            </ul>
        </li>

        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>Tools</span>
            </a>





            <ul class="ml-menu core_ml-menu">

                <li class="active">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>Approval</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>SO PO Approval</span>
                            </a>
                        </li>



                    </ul>
                </li>

                <li class="active">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>CC Program</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile CC Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve CC Charges</span>
                            </a>
                        </li>

                    </ul>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Calendar</span>
                    </a>
                </li>

                <li class="active">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <i class="zmdi zmdi-assignment"></i>
                        <span>Art Request</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>My Art Request</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Closed Art Requests</span>
                            </a>
                        </li>

                    </ul>
                </li>
                <li class="">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>UPS</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">


                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile UPS Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile FedEx Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Reconcile Sfexpress Charges</span>
                            </a>
                        </li>

                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve UPS Charges</span>
                            </a>
                        </li>
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve FedEx Charges</span>
                            </a>
                        </li>
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Approve Sfexpress Charges</span>
                            </a>
                        </li>
                    </ul>
                </li>



                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Tasks/Events</span>
                    </a>
                </li>
                <!-- Bug Tracker Navaigation link added in tools-->
                <li class="">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>Bug Tracker</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>My Issues Lists</span>
                            </a>
                        </li>
                    </ul>
                </li>


                <li class="">
                    <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                        <span>Legal</span>
                    </a>
                    <ul class="ml-menu core_ml-menu">
                        <li>
                            <a href="" style="display: list-item;">
                                <span>Terms and Conditions</span>
                            </a>
                        </li>
                    </ul>
                </li>

            </ul>
        </li>
        <li class="">
            <a href="javascript:void(0);" class="menu-toggle" style="display: list-item;">
                <i class="zmdi zmdi-assignment"></i>
                <span>User Management</span>
            </a>
            <ul class="ml-menu core_ml-menu">
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Departments</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Categories</span>
                    </a>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Modules</span>
                    </a>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Permission Pages </span>
                    </a>
                </li>


                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Department Permission </span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Subsidiary</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Users</span>
                    </a>
                </li>

                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Manage Teams</span>
                    </a>
                </li>
                <li>
                    <a href="" style="display: list-item;">
                        <i class="zmdi"></i>
                        <span>Add Cards</span>
                    </a>
                </li>
            </ul>
        </li>


    </ul>
</div>

<script>
document.querySelector("#Search").addEventListener("keyup", function(e) {
  var filter = this.value.toLowerCase();
  document.querySelectorAll(".menu ul > li").forEach(function(li) {
    if (filter == "") {
       li.style.display = "list-item";
    } else if (!li.textContent.toLowerCase().match(filter)) {
      li.style.display = "none";
    } else {
      li.style.display = "list-item";
    }
  });
});
2
</script>


Demo

CCSU LLB 3 YEAR QUESTIONS PAPER(constitutional law of india)

CCSU LLB 3 YEAR QUESTION PAPER(jurisprudence)

स्वार्थी कुँआ

 गए थे कुँए के पास, प्यास बुझाने को

क्योकि कुँआ ही था एक जरिया प्यास बुझाने का

लेकिन कुँआ तो  प्यासा था

सोचा  जो खुद ही प्यासा हो वह दूसरों की प्यास क्या बुझायेगा ।

लेकिन बात ऐसे कुँए की है , जो प्यासा था बस अपने मतलब के लिए ।

मतलब उसका पूरा होता तो मुझको वो पानी देता ।

लेकिन पहले पानी का झांसा देकर, उसने मुझको प्यासा छोड़ दिया ।

प्यासा हूँ लेकिन प्यास से बेहाल नहीं,

सोचता हूँ कभी कुँआ  भी बेहाल हुआ होगा, इसलिए उसने मुझे प्यासा छोड़ दिया होगा ।

लेकिन ऐसा न था , कुँए  के पास पानी था ।

बस दिखने के लिए ही प्यासा था वह ।

इसलिए कहता हूँ दोस्तों, ऐसे कुओं से दूर ही रहना ।

क्योकि ये दिखाने के लिए ही कुँए हैं ।

बात  तो यह सच है कि इनका कोई अस्तित्व ही नहीं ।

खुद को महान समझते हैं यही इनकी बड़ी भूल है ।

दोस्तों इनसे दूर रहोगे तो कुछ बन जाओगे, नहीं तो ये तुमको खुद में ही मिलाकर

अपने  जैसा ही एक कुँआ  बना देंगे ।

जो बस प्यासे को पानी देता है बस अपनी प्यास बुझाने के लिए ।

दोस्तों ऐसे कुँओं  की कमी नहीं इस संसार में ।

इसलिए इन कुओं की  संख्या में बढ़ोत्तरी मत करना ।

लेकिन तुम्हे भी एक कुँआ बनना है,  ऐसा कुँआ जो निस्वार्थ प्यासों कि प्यास बुझाता है ।

• पंकज कुलश्रेष्ठ
  सन २००१ 

दिल का दर्द

धरती को समुद्र की चाह नहीं थी

फूलों को काँटों की चाह नहीं थी

दिल इस कदर  टूट गया इस इश्क के बाजार में

 जैसे मोहब्बत को  बेवफाई की चाह नहीं थी 

दिल में प्यार का एहसास नहीं हुआ

लवों पे हँसी का एहसास नहीं हुआ 

 आँखों को नमी का एहसास नहीं हुआ 

तेरे दिल ने ऐसी बेवफाई की मेरे दिल से

जिन्दगी को मौत का एहसास नहीं हुआ 

दर्द इस कदर बढ़ गया कि आँखें पथरा सी  गयी

जिन्दगी इस कदर उलझ  गयी कि  साँस थम सी गई

ख़ुशी को आने का रास्ता न मिल सका

लवों की हँसी इस कदर थम सी गयी 

गम के  साये में कब तक  मातम मनाते रहें 

झूठ के साये में कब तक जिन्दगी बिताते रहें

जिंदगी को भी मौत का इंतजार नहीं रहा

 फिर किस आस पे ख़ुशी को अपना बनाते रहें

                                                    अराधना कुलश्रेष्ठ