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.

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.

Another must read:  Responsive Dropdown Navigation Bar

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

<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.

Another must read:  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 :

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.

Leave a Reply

Your email address will not be published. Required fields are marked *