I recently wanted to convert the very basic menu on my Blogger site, to one that supported drop down menus. This was surprisingly easy to do due to the flexibility of Blogger and its built in customisation tools. Where it got tricky was highlighting the currently active menu item, but thanks to a good friend of mine Olie Mason, it was short work using JQuery. To see how it works, take a look at the menu items in this blog.
The step-by-step instructions provided below detail how to implement this in your Blogger blog, however the code examples provided should work elsewhere. The menu uses either JQuery or JavaScript to highlight the currently active page, otherwise the it is pure HTML and CSS, supporting 3 levels deep.
Download the standalone html version:
JQuery
Using JQuery is a more elegant solution and requires far less code than the JavaScript equivalent. Open the HTML editor located under “Template” -> “Edit HTML”, and find the <head> tag. We will be inserting our script above this line.
Because we are using JQuery you will need to reference an online library if you haven’t already. I am using the following:
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> |
Next add the JQuery script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script type='text/javascript'> //<![CDATA[ (function ($, window, undefined) { var app = { init: function () { app.menuState.init(); }, menuState: (function () { var $menu, $links; /// init app - setup variables and call functions function init() { $menu = $('#nav'); $links = $menu.find('a'); setState(window.location.pathname + window.location.hash); } /// Set Active State - adds active class to anchor and all ancestors when matches URL parameter function setState(url) { var $link = $links.filter('[href="' + url + '"]'); if($link.length) { $link.addClass('active'); $link.parents('li').each(function() { var $level = $(this); $level.children('a').addClass('active'); }); } } return { init: init }; })() }; $(document).ready(app.init); })(jQuery, window) //]]> </script> |
Here’s what it looks like:
JavaScript
If you prefer JavaScript or do not want to reference the JQuery library, use the following script instead:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<script type='text/javascript'> //<![CDATA[ function setActiveLink(currentUrl) { var activeClass = 'active'; var navLinks = document.querySelectorAll('#nav a'); //all links inside the nav for (var i = 0, l = navLinks.length; i < l; i++) { var link = navLinks[i]; var url = link.getAttribute('href'); if(currentUrl == url) { if (link.classList) { link.classList.add(activeClass); } else { link.className += ' ' + activeClass; } setActiveOnParents(link, activeClass); } } } function setActiveOnParents(link, activeClass) { console.log('setActiveOnParents'); var listitem = link.parentNode; //a level above the link is the <li/> if (listitem && listitem.parentNode) { //check the <li/> exists and has a parent (<ul/>) var list = listitem.parentNode; if (!(list.getAttribute('id'))) { //if the <ul/> is not the nav wrapper proceed var topLevelItem = list.parentNode; // <li/> at the top level var children = topLevelItem.children; var sectionLink = {}; for (var i = 0, l = children.length; i < l; i++) { //loop through children and get first one - should be the section link var child = children[i]; if(child.nodeType == 1) { sectionLink = child; break; } } if (sectionLink.classList) { sectionLink.classList.add(activeClass); } else { sectionLink.className += ' ' + activeClass; } } } } function ready(fn) { if (document.readyState != 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } function runApplication() { //console.log(window.location.pathname); setActiveLink(window.location.pathname + window.location.hash); } ready(runApplication); //]]> <script> |
Here’s what it looks like:
CSS
Now we need to add some custom CSS to style the menu. You do this from “Template” -> “Customise” -> “Advanced” -> “Add CSS”. The below snippet should work for you, however you may need to customise to suit your page:
CSS Styles:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
/*Navigation bar*/ #nav { margin: 0px 0 0 0px; padding: 0px 0px 0px 0px; width: 1148px; /* Navigation bar width */ } /*Navigation bar link defaults*/ #nav a { display: block; background: #dd7700 none repeat scroll bottom; height: auto; margin: 0px; padding: 10px 20px 10px 20px; font-family: Verdana; text-align: left; color: #dd7700; } /*Navigation bar on hover defaults*/ #nav a:hover { background: #dd7700 none repeat scroll bottom; /*Hover menu items background colour*/ color: white; /*Hover menu items text colour*/ text-decoration: none; } /*Navigation bar list item links (top level)*/ #nav li a { background: #1c1c1c; /*Nav background colour*/ text-decoration: none; } /*Navigation bar drop down links (level 2->)*/ #nav ul a { display: block; background: #1c1c1c none repeat scroll bottom; text-decoration: none; height: auto; margin: 0px; padding: 10px; font-family: Verdana; text-align: left; color: #dd7700; position: relative; z-index: 1; } /*Navigation bar active links (all)*/ #nav a.active { background: #dd7700 none repeat scroll bottom; /*Selected menu items background colour*/ color: white; /*Selected menu items text colour*/ } /*Navigation bar items (top level) - zero the default padding (and margin, for older browsers) of the lists*/ #nav li { float: left; padding: 0px; } /*Navigation bar items (2nd level->)*/ #nav li li { _background-image: none; /* Template Designer - Change Background */ display: block; float: none; margin: 0px; padding: 0px; width: 300px; /* Change Width Of DropDown Menu */ } /*Navigation bar list (2nd level) - Lay list items out horizontally, specify that the origin for positioning all sub-lists is from their parent list item*/ #nav ul { _background-image: none; /* Template Designer - Change Menu Background */ display: none; height: auto; padding: 0px; margin: 0px; position: absolute; width: 300px; /* Change Width Of DropDown Menu */ z-index:9999; } /*Navigation bar list (3rd level) Positioned absolutely so to place them over everything. We also hide them by default. */ #nav ul ul { _background-image: none; /* Template Designer - Change Menu Background */ height: auto; padding: 0px; margin: 0 0 0 300px; position: absolute; width: 300px; /* Change Width Of DropDown Menu */ z-index:9999; top: 0; left: 0; } /*On hover display next level menu (2nd level)*/ #nav li:hover > ul { display: block; position:absolute; visibility:visible; overflow:visible; } |
HTML
Lastly we need to add an HTML module to the navigation area in the template. From “Layout” settings, add a new gadget to the area you want the menu to be displayed. You may need to remove the default one before you can add your new one, just select “Edit” then “Remove” if that’s the case.
Select “Add a Gadget” and select “HTML/JavaScript”:
HTML Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<ul id='nav'> <li><a href='/'>Home</a></li> <li> <a href='/products.html'>Products</a> <ul> <li><a href='/software.html'>Software</a> <ul> <li><a href='/software1.html'>Software 1</a></li> <li><a href='/software2.html'>Software 2</a></li> <li><a href='/software3.html'>Software 3</a></li> </ul> </li> <li><a href='/hardware.html'>Hardware</a> <ul> <li><a href='/hardware1.html'>Hardware 1</a></li> <li><a href='/hardware2.html'>Hardware 2</a></li> <li><a href='/hardware3.html'>Hardware 3</a></li> </ul> </li> </ul> </li> <li> <a href='/services.html'>Services</a> <ul> <li><a href='/services1.html'>Service 1</a></li> <li><a href='/services2.html'>Service 2</a></li> <li><a href='/services3.html'>Service 3</a></li> <li><a href='/services4.html'>Service 4</a></li> <li><a href='/services5.html'>Service 5</a></li> </ul> </li> <li><a href='/about.html'>About</a></li> <li><a href='/contact.html'>Contact</a></li> </ul> |
Andrew this is very simple and nice tutorial, i also wrote tutorial about it hope you like it. http://www.allphptricks.com/jquery-automatically-highlight-current-page/
Nice, thanks for sharing!