Monday, July 13, 2020

Top 5 Responsive Drop Down Menu With Submenu ( in 2020)

Admin | July 13, 2020
welcome to the Tutbig Blogger tutorial today I will show you Responsive Drop Down Menu With Submenu tutorials are available online that you can use for blogger, but I've focused on creating a colorful menu. Because it is difficult to find some kind of menubars. I hope you like this. Please do not forget to share with your social profiles.
Responsive Drop Down Menu With Submenu


Step 1. Login to your blogger account > Dashboard > Template > Edit HTML
Responsive Drop Down Menu With Submenu
Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

</header> 
 Step 3. Just below </header> add the following HTML code :

<div id="navmenu">
<ul>
<li><a class="highlight" href="#">Home</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Category</a>
<ul>
<li><a href="#">Category 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Step 4. Configuration of HTML code :

1.Replace # With The URL Of The Link. 


Say if your post URL is  https://www.tutbig.info/2016/05/how-to-add-drop-down-menu-to-blogger.html

or if your page URL is  https://www.tutbig.info/p/page.html

To make sure that current page link highlighter works properly with country redirect.

Add only : /2016/05/responsive-drop-down-menu-with-submenu.html
or /p/page.html

Sample:-

<a href="/2016/05/responsive-drop-down-menu-with-submenu.html">Title</a>

Note:- Use full URL for home page link ( do not use above format ).

2. Replace The Text Inside The Code With Title Of That Specific URL.

<a href="#">Title</a>
3. How To Add More Categories :

To add another category say "Group" before "About", put the following code directly on top of it:

<li><a href="#">Group</a></li>

Sample:-

<div id="navmenu"><ul>
<li><a class="highlight" href="#">Home</a></li>
        <li><a href="#">Product</a>

              <ul>


              <li><a href="#">Product 1</a>

                    <ul>

                      <li><a href="#">Sub Item</a></li>

                      <li><a href="#">Sub Item</a></li>

                    </ul>

              </li>


              <li><a href="#">Product 2</a>

                    <ul>

                      <li><a href="#">Sub Item</a></li>

                      <li><a href="#">Sub Item</a></li>

                    </ul>

              </li>


              </ul>

        </li>

        <li><a href="#">Category</a>

              <ul>


              <li><a href="#">Category 1</a>

                    <ul>

                      <li><a href="#">Sub Item</a></li>

                      <li><a href="#">Sub Item</a></li>

                    </ul>

              </li>

              <li><a href="#">Category 2</a></li>

              <li><a href="#">Category 3</a>

                    <ul>

                      <li><a href="#">Sub Item</a></li>

                      <li><a href="#">Sub Item</a></li>

                    </ul>

              </li>


              </ul>

        </li>

        <li><a href="#">Group</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

    </ul>

</div>


4. How To Add Sub-Category :

 Say if you want to add a subcategory to the "Group" category, then put the following code above the "Group" </li> closing tag:

<ul>
<li><a href="#">Sub Group</a></li>
</ul>
Sample:-

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group 1</a></li>
      <li><a href="#">Sub Group 2</a></li>
      </ul>
</li>
5. How To Add Sub-Sub Category :

Say if you want to add a subcategory within "Group" in "Sub Group 1", add the following code above the closing tag </li> for "Sub Group 1":

<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>

Example :

<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>

Example :

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group 1</a>
            <ul>
            <li><a href="#">Sub-Sub Group</a></li>
            </ul>
       </li>
      <li><a href="#">Sub Group 2</a></li>
      </ul>
</li>

Step 4. Again find the code </head> and place anyone of the following code just above it :

Responsive Drop Down Menu With Submenu

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
  
    #navmenu ul {
        margin: 0;
        padding: 0
    }
  
    #navmenu li {
        margin: 0;
        padding: 0
    }
  
    #navmenu a {
        margin: 0;
        padding: 0
    }
  
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
  
    #navmenu a {
        text-decoration: none
    }
  
    #navmenu {
        height: 70px;
        background-color: #232323;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
        width: auto;
    }
  
    #navmenu > ul > li {
        float: left;
        margin-left: 15px;
        position: relative
    }
  
    #navmenu > ul > li > a {
        color: #a0a0a0;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 70px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
  
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #232323;
    }
  
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 55px;
        left: 50%;
        margin-left: -90px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
  
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 65px;
        visibility: visible
    }
  
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -10px
    }
  
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
  
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
  
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
  
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
  
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
  
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 206px;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
  
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
  
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #cc2c24;
    }
  
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
        }
  
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
  
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>

Responsive Drop Down Menu With Submenu
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
  
    #navmenu ul {
        margin: 0;
        padding: 0
    }
  
    #navmenu li {
        margin: 0;
        padding: 0
    }
  
    #navmenu a {
        margin: 0;
        padding: 0
    }
  
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
  
    #navmenu a {
        text-decoration: none
    }
  
    #navmenu {
        height: 50px;
        background-color: #265783;
        box-shadow: 0 2px 3px rgb(167, 205, 240);
        width: auto;
        border-bottom: 3px solid #214565;
    }
  
    #navmenu > ul > li {
        float: left;
        position: relative;
        border-right: 1px solid #214565;
    }
  
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
  
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #214565;
    }
  
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 70px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
  
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 50px;
        visibility: visible
    }
  
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: -15px;
        left: 10%;
        margin-left: -10px
    }
  
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
  
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
  
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
  
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
  
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
  
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 206px;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 20px;
        left: -20px;
    }
      
  
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
  
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #214565;
    }
  
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
    }
  
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
  
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>
Responsive Drop Down Menu With Submenu

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "10px 28px 12px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
  
    #navmenu ul {
        margin: 0;
        padding: 0
    }
  
    #navmenu li {
        margin: 0;
        padding: 0
    }
  
    #navmenu a {
        margin: 0;
        padding: 0
    }
  
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
  
    #navmenu a {
        text-decoration: none
    }
  
    #navmenu {
        background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
        background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
        background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
        height: 50px;
        box-shadow: 1px 1px 3px #C2C2C2;
        width: auto;
        border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        -moz-border-radius: 0 0 3px 3px;
    }
  
    #navmenu > ul > li {
        float: left;
        position: relative;
        border-right: 1px solid #CFCFCF;
    }
  
    #navmenu > ul > li > a {
        color: #000;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
  
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #50A2EE;
    }
  
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 150px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
  
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 54px;
        visibility: visible
    }
  
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 15px;
        position: absolute;
        top: -25px;
        left: 10%;
        margin-left: -10px
    }
  
    #navmenu > ul ul > li {
        position: relative;
        float: none;
        border-bottom: 1px solid #ddd;
    }

    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 10px 8px 12px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }

    #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {
        border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
    }

    #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {
        border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
    }

    #navmenu ul ul li:last-child {
        border-bottom: 0px;
    }
  
    #navmenu ul ul li:hover span {
        -webkit-transform: rotate(90deg);
        -ms-transform:rotate(360deg);
        transform: rotate(90deg);
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
  
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 206px;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 10px;
        left: -20px;
        z-index: 1000;
    }
      
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
  
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #00A2E8;
    }
  
    #navmenu ul ul span {
        background-image: url("https://4.bp.blogspot.com/-Odm4GB62Eno/Vy9sfmXdRDI/AAAAAAAAAn4/4O95b1gxOQ8Vzss-iOznxkcik5BCcHzBgCLcB/s1600/hbz-arrow.png");
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        position: absolute;
        right: 20px;
        top: 10px;
        width: 18px;
        height: 18px;
    }
</style>


Responsive Drop Down Menu With Submenu

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function() { var str = location.href.toLowerCase(); $('#navmenu ul li a').each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $("li a.highlight").removeClass("highlight"); $(this).addClass("highlight") } }); $('#navmenu ul ul li a').each(function() { if ($(this).hasClass('highlight')){ $(this).parent().parent().parent().children(':first-child').addClass('highlight'); $(this).parent().addClass('highlights'); } }); $('#navmenu ul ul ul li a').each(function() { if ($(this).hasClass('highlight')){ $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight'); $(this).parent().parent().parent().addClass('highlights'); $(this).parent().addClass('highlights'); } }); $("<span></span>").insertBefore("#navmenu ul ul ul"); $("#navmenu ul ul ul").parent().find("a").css({ "padding": "10px 28px 12px 16px" }); $("#navmenu ul ul ul").hover(function() { $(this).prev().css("opacity", "0"); }, function() { $(this).prev().css("opacity", "1"); }); }); </script> <style type="text/css"> #navmenu, #navmenu ul, #navmenu ul li, #navmenu ul ul, #navmenu ul ul li, #navmenu ul ul ul, #navmenu ul ul ul li { z-index: 1000; } #navmenu ul { margin: 0; padding: 0 } #navmenu li { margin: 0; padding: 0 } #navmenu a { margin: 0; padding: 0 } #navmenu ul { list-style: none; overflow: visible; } #navmenu a { text-decoration: none } #navmenu { background: -webkit-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent; background: linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#a1a1a1',GradientType=0 ); height: 50px; box-shadow: 1px 1px 3px #C2C2C2; width: auto; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } #navmenu > ul > li { float: left; position: relative; margin-left: 15px; } #navmenu > ul > li > a { color: #fff; font-family: Verdana, 'Lucida Grande'; font-size: 15px; line-height: 50px; padding: 5px 15px; border: none; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; text-shadow: 0px 2px 1px #C6C6C6; display: inline; -webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s } #navmenu > ul > li > a:hover, #navmenu ul li a.highlight { color: #000; background-color: #fff; box-shadow: 1px 2px 3px #8d8d8d; } #navmenu ul ul a.highlight { background-color: #F5F5F5; } #navmenu > ul > li > ul { opacity: 0; visibility: hidden; padding: 0px; background-color: #fafafa; text-align: left; position: absolute; top: 54px; width: 180px; overflow: visible; border: none; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) } #navmenu > ul > li:hover > ul { opacity: 1; top: 54px; visibility: visible } #navmenu > ul > li > ul:before { content: ''; display: block; border-color: transparent transparent #fafafa transparent; border-style: solid; border-width: 15px; position: absolute; top: -25px; left: 10%; margin-left: -10px } #navmenu > ul ul > li { position: relative; float: none; border-bottom: 1px solid #ddd; } #navmenu ul ul a { color: #323232; font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: #fff; padding: 10px 8px 12px 16px; display: block; border: none; -webkit-transition: background-color 0.1s; -moz-transition: background-color 0.1s; -o-transition: background-color 0.1s; transition: background-color 0.1s } #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a { border-radius: 15px 15px 0 0; -webkit-border-radius: 15px 15px 0 0; -moz-border-radius: 15px 15px 0 0; } #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a { border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; } #navmenu ul ul li:last-child { border-bottom: 0px; } #navmenu ul ul li:hover span { animation: fade 1s forwards; -webkit-animation: fade 1s forwards; -moz-animation: fade 1s forwards; -o-animation: fade 1s forwards; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; } @keyframes fade { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } @-webkit-keyframes fade { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } @-moz-keyframes fade { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } @-o-keyframes fade { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } #navmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: 0px; left: 206px; padding: 0px; background-color: #fafafa; text-align: left; width: 180px; border: none; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) } #navmenu ul ul ul::before { content: ''; display: block; border-color: transparent #dbdbdb transparent transparent; border-style: solid; border-width: 10px; position: absolute; top: 10px; left: -20px; z-index: 1000; } #navmenu ul ul > li:hover > ul { opacity: 1; left: 190px; visibility: visible } #navmenu ul ul a:hover { color: #000; background-color: #F5F5F5; } #navmenu ul ul span { border-color: transparent transparent transparent #777; border-style: solid; border-width: 5px; display: block; position: absolute; right: 20px; top: 14px; } </style>


Responsive Drop Down Menu With Submenu

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });

        $("#navmenu ul ul").hover(function() {
            $(this).prev().addClass("highlightz");
        }, function() {
            $(this).prev().removeClass("highlightz");
        });

        function getRandomClass() {
           var classes = new Array("a", "b", "c", "d", "e", "f");
  
           var randomNumber = Math.floor(Math.random()*7);

           return classes[randomNumber];
        };
        $("#navmenu ul ul li:has(ul)").hover(function() {
           var randomClass = getRandomClass();
           $(this).attr("class", randomClass);
        });

        $('#navmenu ul ul ul li a').each(function() {
          if ($(this).hasClass('highlight')){
              $(this).removeClass('highlight');
              $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
          }
        });

        $('#navmenu ul ul li a').each(function() {
          if ($(this).hasClass('highlight')){
              $(this).removeClass('highlight');
              $(this).parent().parent().parent().children(':first-child').addClass('highlight');
          }
        });


    });
</script>


<style type="text/css">


    #navmenu ul ul li.a:hover a, #navmenu ul ul li.a:hover ul {
        background-color: #65834C;
        color: #fff;
    }


    #navmenu ul ul li.b:hover a, #navmenu ul ul li.b:hover ul {
        background-color: #4F4C83;
        color: #fff;
    }

    #navmenu ul ul li.c:hover a, #navmenu ul ul li.c:hover ul {
        background-color: #4C7983;
        color: #fff;
    }

    #navmenu ul ul li.d:hover a, #navmenu ul ul li.d:hover ul {
        background-color: #834C4C;
        color: #fff;
    }

    #navmenu ul ul li.e:hover a, #navmenu ul ul li.e:hover ul {
        background-color: #4D6899;
        color: #fff;
    }

    #navmenu ul ul li.f:hover a, #navmenu ul ul li.f:hover ul {
        background-color: #97944C;
        color: #fff;
    }

    #navmenu ul ul ul a:hover {
       text-decoration: underline;
    }

    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
  
    #navmenu ul {
        margin: 0;
        padding: 0
    }
  
    #navmenu li {
        margin: 0;
        padding: 0
    }
  
    #navmenu a {
        margin: 0;
        padding: 0
    }
  
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
  
    #navmenu a {
        text-decoration: none
    }
  
    #navmenu {
        height: 50px;
        background-color: #384959;
        box-shadow: 0 0 3px rgb(206, 206, 206);
        width: auto;
    }
  
    #navmenu > ul > li {
        float: left;
        position: relative;
    }
  
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
  

    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight,
    #navmenu .highlightz {
        color: #000;
        background-color: #fff;
    }

    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fff;
        text-align: left;
        position: absolute;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4)
    }
  
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        visibility: visible
    }
  
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
  
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fff;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
  
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
  
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
  
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
  
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 180px;
        padding: 16px 0 20px 0;
        background-color: #fff;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
      
  
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        visibility: visible
    }
  
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #214565;
    }
  
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
    }
  
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
  
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>

Step 4. Click Save template. 

I hope you enjoy this post and the photos. Responsive Drop Down Menu With Sub menu



Related Poste

No comments:

Post a Comment