How to create category menu list using css and JQuery?

Today, We want to share with you How to create category menu list using css and JQuery?.In this post we will show you Targeting Menu Elements with Submenus in a Navigation Bar, hear for First drop down menu to auto change the options of a second dropdown we will give you demo and example for implement.In this post, we will learn about How to clear previous appended data on change the dropdown menu in JavaScript ? with an example.

How to create category menu list using css and JQuery?

There are the Following The simple About How To Create a Hoverable Dropdown Menu Full Information With Example and source code.

As I will cover this Post with live Working example to develop responsive drop down menu with submenu, so the drop down menu in html on mouseover is used for this example is following below.

Read Also:  sum in jquery - jQuery calculate sum of values in all text fields

HTML Part

index.html

I will create HTML file.Just see bellow HTML with jQuery and css example html file and run in your local too.

<div id="primarycats-menu">
<ul class="ul-primarycats">
 	<li><a>Computers</a>
<ul class="ul-subprimarycats">
 	<li><a>Keyboards</a></li>
 	<li><a>Laptops</a></li>
 	<li><a>Motherboard</a></li>
 	<li><a>Mouse</a></li>
 	<li><a>Router</a></li>
</ul>
</li>
 	<li><a>Phones</a>
<ul class="ul-subprimarycats">
 	<li><a>Apple</a></li>
 	<li><a>Blackberry</a></li>
 	<li id="li3333"><a>HTC</a>
<ul>
 	<li><a>HTC One</a></li>
 	<li><a>HTC M9</a></li>
</ul>
</li>
 	<li><a>Sony</a></li>
</ul>
</li>
 	<li><a>Books</a></li>
 	<li><a>Home and Garden</a></li>
</ul>
</div>

CSS Part

<style type="text/css">
<p>    #primarycats-menu{<br />
        max-width:250px;<br />
    }</p>
<p>    #primarycats-menu ul, #primarycats-menu ul li{<br />
        margin:0;<br />
        padding:0;<br />
        list-style:none;<br />
    }</p>
<p>    #primarycats-menu > ul{<br />
        border:solid 2px #000;<br />
        border-bottom:none;<br />
        background:#f5fec2;<br />
    }</p>
<p>    #primarycats-menu > ul > li{<br />
        border-bottom:solid 2px #000;<br />
    }</p>
<p>    #primarycats-menu ul li a{<br />
        font-size:12px;<br />
        color:#000;<br />
        text-decoration:none;<br />
        font-family:arial;<br />
        display:inline-block;<br />
        width:100%;<br />
        cursor:pointer;<br />
    }</p>
<p>    #primarycats-menu ul li{<br />
        padding:6px 11px;<br />
        position:relative;<br />
    }</p>
<p>    #primarycats-menu ul li ul, #primarycats-menu ul li ul li ul{<br />
        display:none;<br />
    }</p>
<p>    #primarycats-menu > ul > li > ul{<br />
        background:#fff;<br />
        margin:11px 0;<br />
    }</p>
<p>    #primarycats-menu > ul > li > ul > li > ul{<br />
        background:#ade5f5;<br />
        margin:11px 0;<br />
    }</p>
<p>    span.arrow, span.arrow-down{<br />
        background:url(up-icn.png) no-repeat;<br />
        width:12px;<br />
        height:8px;<br />
        display:inline-block;<br />
        position:absolute;<br />
        right:11px;<br />
        top:11px;<br />
    }</p>
<p>    span.arrow-down{<br />
        background:url(down-icn.png) no-repeat;<br />
    }<br />
</style>

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

Read Also:  jQuery Ajax change dropdown list value

use the functions based on above Example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        $('#primarycats-menu ul li').each(function(){
            if ($(this).find('ul').length > 0)
            {
                $(this).addClass("has-child");
                $(this).prepend("<span class='arrow'></span>");
            }
        });
        
        $('#primarycats-menu ul > li.has-child a').on("click", function(event){
            var currentArrow = $(this).parent().find(" > span");
            if($(currentArrow).length > 0){
                if($(currentArrow).attr("class").indexOf("arrow-up") > 0){
                    $(currentArrow).removeClass("arrow-up");
                    $(currentArrow).parent().find(" > ul").slideUp();
                }else{
                    $(currentArrow).addClass("arrow-up");
                    $(currentArrow).parent().find(" > ul").slideDown();
                }
            }
        });
    });
</script>

Web Programming Tutorials Example with Demo

Read :

Read Also:  PHP Conditional Statements Example

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about horizontal drop down menu css.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.