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:  PHP MySQLi Database connection select Multiple query

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:  how to refresh a div using javascript without refreshing page?

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:  How to return a string from a JavaScript function?

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Install WhatsApp web On iPad Without iPhone Tutorials
  2. Read Also:  jQuery Ajax change dropdown list value
  3. Read Also:  Responsive Dropdown Navigation Bar
  4. Read Also:  ANGULAR 2 TUTORIAL FOR BEGINNERS STEP BY STEP
  5. Read Also:  Form Data Binding using Angular Example
  6. Read Also:  Laravel Twitter Typeahead integration
  7. Read Also:  Object Expressions using Angular Example
  8. Read Also:  Dynamic Autocomplete Textbox in jQuery Ajax
  9. Read Also:  Get Gravatar Image Using PHP Example
  10. Read Also:  Install WhatsApp web On iPad Without iPhone Tutorials
CLOSEX