How premium Blogger template have mega menus?

Themeforest is quite a popular market to chose the next template for your blog. I can never doubt a single template on Theme Forest as I have the experience of submitting the items to them. Those big menus with lots of links, post and dropdowns, all in one. How do they do it?

What are Premium Template?

People ask what is premium template? A template which is better than any ordinary template (not free often) are simply premium template in web language. Actually, these template uses better web technology to upgrade the normal working of the template.

Before people started using magazine style in Blogger, we had those simple looking but yet flat cool designs. As we see more use of Javascript today, we started using all the given resources we can. The native, non-native and even hacks (not all are bad) to make the template better. These un-ordinary and non-native ways of evolving the template makes the difference.

Mega menus, different style blog posts, image galleries were never part of Blogger itself, but created via developers. It will take time, maybe decades to have those in Blogger natively. In this way a developer - I mean a good one - can change the way we use web and do blogging.

Mega Menu???

A mega menu is the evolved version of drop down menu or navigation. Mega menu as term refers is a giant menu with bigger drop downs. It may contain several kinds of elements.

Read More:Complete guide to create a mega menu using CSS3 and jQuery

Above mentioned reference is the link to one of my previous post that I shared. But my real concerns of this post is about the mega menus in Blogger, because I hear a lot about it. Here is a screenshot of a mega menu.

The menus are right now upgraded to a whole new level. Lets see how they are really made in Blogger template.

Basic Markup

If we talk about coding, then the codes are pure front end and doesn't uses any native feature of Blogger, it means you don't have to read Blogger developer's docs to make it.Best part is, everyone knows how to make a simple navigation, isn't it?

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li class='submenu'><a href='#'>Categories</a>
      <ul>
        <li><a href='#'>Sub-link 2.1</a></li>
        <li><a href='#'>Sub-link 2.1</a></li>
        <li><a href='#'>Sub-link 2.1</a></li>
        <li><a href='#'>Sub-link 2.1</a></li>
      </ul>
    </li>
    <li class='blog-post' data-label='coding'><a href='#'>Coding</a></li>
    <li><a href='#'>About Us</a></li>
  </ul>
</nav>

Well, we don't have much in markup I guess. However, something to note is:

• Add class in parent link of submenu - for customization purpose only.
• Add a class for the links you want to add recent post and make sure to add the label (I used data-label attribute for it).

Javascript: The interesting part

As I mentioned before, nothing is native here so we can use jQuery for our ease of coding. What really the part of Javascript here is to send a get request to a URL of the Blogger feed, this feed will return JSON. Through this JSON code, we will extract our content display it nice and cool.

Blogger feed URL

Before we dig into this first clear what is Blogger feed URL. Actually I have published a lots of posts specific for Blogger feed. Here are few of them:

• Blogger feed URLs to get all Blogger feeds data in JSON or XML
• How to fetch Blogger feed data using native Javascript?
• How to fetch Blogger feed using jQuery $.ajax()

Blogger feed URL are unique links which contain all the blog posts. These are written in XML or JSON. We can filter them according to label name, search query and man more parameters to filter the feed. In this case we are going to filter the feed to following needs:

• Returns only label based posts.
• Returns only 4 or 5 - depending on the need only - because it will reduce the response time.
• Returns in JSON

jQuery's Ajax method

jQuery $.ajax() method is a easy way to get the JSON. Here is the basic structure for the method:

$.ajax({
  type: 'GET',
  url: 'FEED_URL_HERE',
  async: true,
  contentType: "application/json",
  dataType: 'jsonp',
  success: function(jdata) {}
});

Now what we need is the feed URL, so we are going to access the navigation's item with class blog-post and find the attribute value.

var Label = $('nav li.blog-post').attr('data-label'),
  FeedUrl = "/feeds/posts/summary/-/" + Label + "?max-results=5&alt=json-in-script";

Now we have all we need. Next is to get the JSON data out.

Get the JSON data

Now the next step in Javascript is JSON data. Each JSON object have its unique JSON path. Here is the example:

var feed={
  'name':'Hamza',
  'email':'hamzadhamiya@gmail.com'
}
console.log(feed.name) // Hamza
console.log(feed.email) // hamzadhamiya@gmail.com

Same goes to the JSON data we get from feed. We can access that with the argument we passed, as in above example we passed jdata as argument.

However case is bit different for loops. We have to access them in loop. Like an example below:

var feed = [{
  'name': 'Hamza',
  'email': 'hamzadhamiya@gmail.com'
}, {
  'name': 'Ahmed',
  'email': 'ahmed@somewhere.inworld'
}, {
  'name': 'saad',
  'email': 'saad@somewhere.inworld'
}, {
  'name': 'Zubair',
  'email': 'Zubair@somewhere.inworld'
}, {
  'name': 'Umair',
  'email': 'Umair@somewhere.inworld'
}]
for (var i = 0; i < feed.length; i++) {
  console.log(feed[i].name);
  console.log(feed[i].email);
}

Now we know how to extract the data. Lets finalize the Javascript.

Finalize the Javascript

We can finalize our Javasscript in a way that each of the links with class blog-post in navigation are changed into recent post with their respective label attributes. To do that, we are going to use jQuery's each method.

$('nav ul li.blog-post').each(function() {
  var Label = $(this).attr('data-label'),
    FeedUrl = "/feeds/posts/summary/-/" + Label + "?max-results=5&alt=json-in-script";
  $.ajax({
    type: 'GET',
    url: 'FeedUrl',
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(jdata) {}
  });
});

Under this success function we will get our data. Check the below demo for complete code and working example.

See the Pen Mega Dropdown menu using jQuery and CSS3 by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

More Possibilities around

If we look at more complicated mega menus around, then we find that there could be more possibilities with it. More that can be implemented is:

Carousel

Well, we have plenty of jQuery plugins for carousel right now. Once we fetched the label based recent post then we can turn that into a carousel.

Tabs

Put several kind of recent post in one drop down. The best way is to use multi tabs for it. Great example is Masahable.

Conclusion

To get most from every resource we have, we need to turn into non-native stuff. I know what I shared above increases loading time, but right now that is all Blogger given. Unlike Wordpress we cannot load all the stuff server side.