How To Create Drop Down Navigation Menu With Submenu In Blogger

New blogger widget! – a floating blogger drop down navigation menu with submenus and also it is fully Responsive, Mobile Friendly, Animated, and has subpages. It hides when you scroll down and shows itself when you scroll up.

I modified this simple blogger dropdown menu widget for my premium theme “Opad Blogger Template” but I decided to published it when a friend of mine asked for it.

The floating drop-down blogger menu widget is built on pure CSS, HTML, and JavaScript. You need to enable Jquery for this widget to work. It is light weight and does not affect the loading speed of your blog.

In other to make blog navigation easier for users, I have also added a cool icon search box that shows up on click. This search box also shows on mobile templates.



View Demo
Live Version

Widget Features

  1. Dropdown list
  2. Fully Responsive
  3. Light Weight
  4. Floats on Scroll
  5. Search Box
  6. Submenu

Steps to  Create Drop Down Navigation Menu With Submenu In Blogger

1. The CSS

Web components are styled using CSS and same have I done with this sleek navigation menu. Paste the below CSS above </head>


Understanding the CSS

In other to make it responsive, I had to use CSS media screen queries which mean if you are using default blogger mobile template, this menu will not work.

Learn about responsive themes and media screen queries

2. The JavaScript

It’s  a sliding menu and you just can’t get it to animate the way it does with just CSS. I have added a little bit of JavaScript to help animate the floating menu and also make it super responsive.

Paste the JS below just above </body>.


3. The HTML

With this component, you get to choose where your menu should be shown. You should add this code above your Blogger Navbar. paste it just below <body> or <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’> tag.


Adding and Removing items

1. In the HTML above, every <ul> starts a new set of submenus. while <li> starts a new single menu i.e

<li ><a href=”#LinkURL” title=”LinkTitle”>Pages</a>
  <ul >
   <li ><a href=”#LinkURL” title=”LinkTitle”>LinkName</a></li>
   <li ><a href=”#LinkURL” title=”LinkTitle”>LinkName</a></li>
   <li ><a href=”#LinkURL” title=”LinkTitle”>LinkName</a></li>
   <li ><a href=”#LinkURL” title=” LinkTitle”> LinkName</a></li>
  </ul>
  </li>

<li> started a normal link menu but adding <ul> after </a> started a drop down menu for that normal menu. and don’t forget to always close tags with corresponding div tags e.g <li> closed by </li>.

2. Replace all LinkTitle with the title of a page you wish to link to and replace #LinkURL with the link to that page and LinkName with the name of the page. i.e

<li ><a href=”#LinkURL” title=”LinkTitle”>LinkName</a></li>

Result

<li ><a href=”https://www.bloggingprince.com” title=”Homepage”>Home</a></li>


What Else?
You can add dropdown menus to all normal links, feel free to experiment with the code and be creative. Whenever you wish to make any changes to your template, always back up your template.

More From Author
A Navigation menu is important for a blog as it makes it easier for blog readers to move around your blog content. Make sure to add only important items to your navigation such as Homepage, About, Contact, Privacy, Disclaimer” etc and any other popular label link on your blog.

Related Articles


Leave a Reply

1 Shares