How To Add jQuery Drop Down Menu To Blogger

byXiang Hong - 0 تعليقات
Drop down Navigation menu is an essential part of any blog or website. Maintaining a clean, easy to use navigation menu is a huge part of creating an effective design. Too many links can confuse a reader, while too few can leave them wondering what they’re missing. A drop down menu is a great way to hide extra links while still making them available to curious readers. Drop down menus can help organize and categorize content links. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket! It helps visitors to easily get the required content from the whole blog.

Stylish jQuery menu for blogger with highlighter

Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing. The menu I’ve put together is built entirely with CSS3, HTML, jQuery and JavaScript. You can view a demo of it here. While WordPress makes it easy to add a drop down menu (sub items), it’s a little more complicated on Blogger. We’ll basically be creating a list within a list, and all that’s needed is some extra code and styling! To get started, you’ll need to follow the below tutorial with images:

Adding The jQuery 2-Sub Drop Down Menu


Step 1. Login to your blogger account > Dashboard > Template > Edit HTML


how to edit blog template


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  http://howbloggerz.blogspot.com/2016/05/how-to-add-drop-down-menu-to-blogger.html
or if your page URL is  http://howbloggerz.blogspot.com/p/page.html

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

Add only : /2016/05/how-to-add-drop-down-menu-to-blogger.html
or /p/page.html


Example :

<a href="/2016/05/how-to-add-drop-down-menu-to-blogger.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", place the following code just above it :

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

Example :

<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 sub-category to category "Group" then place the following code just above the closing tag </li> of "Group" :

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

Example :

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

To add another sub category in "Group" add following code just above closing tag </ul> of  "Group" :

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

Example :

<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 sub-sub category inside "Group" in "Sub Group 1"  add the following code just above the closing tag </li> of "Sub Group 1" :

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


DEMO




jQuery menu for blogger 1


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



jQuery menu for blogger 2


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



jQuery menu for blogger 3


<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpIjh8u3F8wBlS2bXt8M9WlzB-6w79F9gClYvBS5ppE2Ye0-sTkrs2BJXVdUVzXojz8_lOlMeD8ich_EoatVqtNiyI4un6yNFuvd66EM5tE8hdvYuyH_eaQkzg4lOjcgGNwILe1ZamzPPm/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>



jQuery menu for blogger 4

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


jQuery menu for blogger 5


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

That's all !

Refresh your blog to see stylish horizontal jquery menu with highlighter. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Post a Comment

إرسال تعليق

أحدث أقدم