Add Apple Drop Down menu Lists to your blog


How to Add Apple Drop Down menu Lists to the Blogger, Without  jquery

Dropdown menu list is easiest way to allow visitors to navigate on your site. Drop-down menu lists comes really handy when you have too much categories to show. Following drop down menu is inspired from Apple.com navigational links because I really love apple for its awesome products. Have a look at some of my navigational css menu lists.


Add Apple Drop Down Theme


Everybody knows Apple for their awesome i Gadgets but if you take a close look at their website, you will be able to see navigational menu list. In this article i am going to teach you how to add Apple theme drop down list.


Step 1: Go to Blogger >> Template >> Edit HTML

Step 2:  Add following code in the template wherever you want your menu list bar to appear.

<ul class="dropdown">
 <li><a href="link1"><span>Title1</span></a></li>
 <li><a href="link2"><span>Title2</span></a>
     <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
     <li><a href="Sub Link3">Sub Link3</a></li>
     </ul>
 </li>
 <li><a href="link3"><span>Title3</span></a></li>
 <li><a href="link4"><span>Title4</span></a></li>
   <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
 </ul>
 <li><a href="link5"><span>Title5</span></a></li>
</ul>

Replace link1 by your first link (ex. http://www.google.com) and title by your title (ex. this is Google!!). You can add more links in the same manner.

Step 3:   Press 'Ctrl+f' key and serch ']]></b:skin>'


Step 4: Please add the following code just before ]]></b:skin>


Step 5: Your code should look like this..
<!-- Add your Apple Drop Down Code Here -->
]]></b:skin>

Step 6: Save the template now and take a look at your blog.

How to Add Apple Drop Down menu Lists to the Blogger, Without  jquery

Dropdown menu list is easiest way to allow visitors to navigate on your site. Drop-down menu lists comes really handy when you have too much categories to show. Following drop down menu is inspired from Apple.com navigational links because I really love apple for its awesome products. Have a look at some of my navigational css menu lists.


Add Apple Drop Down Theme


Everybody knows Apple for their awesome i Gadgets but if you take a close look at their website, you will be able to see navigational menu list. In this article i am going to teach you how to add Apple theme drop down list.


Step 1: Go to Blogger >> Template >> Edit HTML

Step 2:  Add following code in the template wherever you want your menu list bar to appear.

<ul class="dropdown">
 <li><a href="link1"><span>Title1</span></a></li>
 <li><a href="link2"><span>Title2</span></a>
     <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
     <li><a href="Sub Link3">Sub Link3</a></li>
     </ul>
 </li>
 <li><a href="link3"><span>Title3</span></a></li>
 <li><a href="link4"><span>Title4</span></a></li>
   <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
 </ul>
 <li><a href="link5"><span>Title5</span></a></li>
</ul>

Replace link1 by your first link (ex. http://www.google.com) and title by your title (ex. this is Google!!). You can add more links in the same manner.

Step 3:   Press 'Ctrl+f' key and serch ']]></b:skin>'


Step 4: Please add the following code just before ]]></b:skin>


Step 5: Your code should look like this..
<!-- Add your Apple Drop Down Code Here -->
]]></b:skin>

Step 6: Save the template now and take a look at your blog.

Was that useful? Why not share it?

By: