BlogTipsnTricks Style Menu For blogger blog

BlogTipsnTricks a very successful blog by +Chandeep J is getting a lot famous with blogger beginners. He is giving his full efforts for serving Bloggers. One of the most attractive thing on this blog is its menu, which is responsive and very cool. Today I will help you in adding this menu to your blog.

One of the most good thing about this menu is it is responsive and even works on small screens.

After one month of google search I got this code from Bloggertipsandtricks.net 

So lets start....

Demo

How to add to Blogger Blog

Follow instructions carefully. Modification in code may affect the result.

Add this as gadget under the header

<font><font><link rel="stylesheet" type="text/css" href="http://bloggertipsandtricks-net.googlecode.com/svn/trunk/responsivemenu.css"/></font></font><font></font><font><font>

< script  SRC = "http://bloggertipsandtricks-net.googlecode.com/svn/trunk/modrnizerrespomenu.js" > </ script > </ font > </ font > < font > </ font > < font > < font >

< div  Class = "Main clearfix" > </ font > </ font > < font > </ font > < font > < font >

< nav  id = "menu"  Class = "nav" > </ font > </ font > < font > </ font > < font > < font >

< ul > </ font > </ font > < font > </ font > < font > < font >

< li > < A  href = "#" > < Span  Class = "icon" > < I  Aria-hidden = "True"  Class = "icon-Home" > </ I > </ Span > < Span > Home </ Span > </ A > </ li > </ font > </ font > < font > </ font > < font > < font >

< li > < A  href = "#" > < Span  Class = "icon" > < I  Aria-hidden = "True"  Class = "icon-Services" > </ I > </ Span > < Span > Services </ Span > </ A > </ li > </ font > </ font > < font > </ font > < font > < font >

< li > < A  href = "#" > < Span  Class = "icon" > < I  Aria-hidden = "True"  Class = "icon-Portfolio" > </ I > </ Span > < Span > Portfolio </ Span > </ A > </ li > </ font > </ font > < font > </ font > < font > < font >

< li > < A  href = "#" > < Span  Class = "icon" > < I  Aria-hidden = "True"  Class = "icon-Blog" > </ I > </ Span > < Span > Blog </ Span > </ A > </ li > </ font > </ font > < font > </ font > < font > < font >

< li > < A  href = "#" > < Span  Class = "icon" > < I  Aria-hidden = "True"  Class = "icon-Team" > </ I > </ Span > < Span > The Team < / Span > </ A > </ li > </ font > </ font > < font > </ font > < font > < font >

< li > < A  href = "#" > < Span  Class = "icon" > < I  Aria-hidden = "True"  Class = "icon-contact" > </ I > </ Span > < Span > Contact </ Span > </ A > </ li > </ font > </ font > < font > </ font > < font > < font >

</ Ul > </ font > </ font > < font > </ font > < font > < font >

</ Nav > </ font > </ font > < font > </ font > < font > < font >

</ Div > </ font > </ font > < font > </ font > < font > < font >

<! - / Container -> < script > </ font > </ font > < font > </ font > < font > < font >

   / / The Function to Change the Class </ font > </ font > < font > </ font > < font > < font >

   var changeClass = Function (R, className1, className2) {</ font > </ font > < font > </ font > < font > < font >

    var regex = new RegExp ("(;: ^ | \ \ s +)" + + className1 "(;: \ \ s + | $)")? </ font > </ font > < font > </ font > < font > < font >

    IF (regex.test (r.className)) {</ font > </ font > < font > </ font > < font > < font >

     r.className = r.className.replace (regex,'' + +'' className2)? </ font > </ font > < font > </ font > < font > < font >

       } </ font > </ font > < font > </ font > < font > < font >

       else {</ font > </ font > < font > </ font > < font > < font >

     r.className = r.className.replace (new RegExp ("(?: ^ | \ \ s +)" + className2 + "(?: \ \ s + | $)"),'' + className1 +'') ? </ font > </ font > < font > </ font > < font > < font >

       } </ font > </ font > < font > </ font > < font > < font >

       Return r.className? </ font > </ font > < font > </ font > < font > < font >

   }? </ font > </ font > < font > </ font >

< font > </ font > < font > < font >

   / / Creating our Button in JS for smaller Screens </ font > </ font > < font > </ font > < font > < font >

   var menuElements = document.getElementById ('menu')? </ font > </ font > < font > </ font > < font > < font >

   menuElements.insertAdjacentHTML ('afterBegin', '< Button  type = "Button"  id = "menutoggle"  Class = "navtoogle"  Aria-hidden = "True" > < I  Aria-hidden  = "True"  Class  = "icon-menu"  > </ I > Menu </ Button > ')? </ font > </ font > < font > </ font >

< font > </ font > < font > < font >

   / / Toggle the Class to click on Show / Hide the menu </ font > </ font > < font > </ font > < font > < font >

   document.getElementById ('menutoggle'). onclick = Function () {</ font > </ font > < font > </ font > < font > < font >

    changeClass (this, 'navtoogle Active', 'navtoogle')? </ font > </ font > < font > </ font > < font > < font >

   } </ font > </ font > < font > </ font > < font > < font >

  </ Script > </ font > </ font > < font > </ font > < font > < font >

 < script  SRC = "/ / ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </ script > </ font > </ font > < font > </ font >

 Replace # your with your link.

Congo you are done enjoy :D