Browsing "Older Posts"

Home » DropDown

How to add multi-level responsive navigation menu bar in blogger

In a previous tutorial I have shared a collection of beautiful vertical navigation menu bar with you, after that our some followers request me that how to add a responsive menu in in blogger. After the request of these friends, today I bring a multi-level responsive menu and we are going to add in a blogger blog. Actually a responsive menu is a bar which adjusting with screen width, if a visitor visit your blog through desktop, then it looks like a traditional menu bar, but when someone access to your blog through a smart phone or tablet then it looks as a mobile application. In these the using of smart phones and tablets increasing day by day. You would be noticed that many visitors are accessing to your blog through mobile phones. So this utmost necessary to make your blog mobile friendly.
Responsive Dropdown Menu bar in Blogger
Live Demo

How to add multi-level responsive navigation menu bar in blogger 

This is not an uphill task to add this menu in your blog, follow the instructions.
1. Login your blogger account and select a blog which you want to add this menu.
2. Select template >> edit HTML.
3. After opening your template all coding, search <head> and paste the below links.
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='https://googledrive.com/host/BzPgmXeCwsMRc0o1NnM4QU1OSVE' type='text/javascript'></script>

Adding CSS codes 

First of all, click on below 'view code' and copy all css code from appearing pop up window then search ]]></b:skin> in your blog template and paste just above it.

Adding HTML codes

This depends on you, where you want to appear menu in your blog. If you want to appear after header, then find </header> tag and paste the below codes just after it.
<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>  
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   </li><li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul><li><a href="#">Sub Sub-Menu 1</a></li>
   <li><a href="#">Sub Sub-Menu 2</a></li></ul> </li>
    <li><a href="#">Sub-Menu 3</a><ul>
   <li><a href="#">Sub Sub-Menu 1</a></li>
   <li><a href="#">Sub Sub-Menu 2</a></li>
   </ul></li></ul></li><li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
   <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
  <li><a href="#">Sub-Menu 1</a></li>
  <li><a href="#">Sub-Menu 2</a><ul>
  <li><a href="#">Sub Sub-Menu 1</a></li>
  <li><a href="#">Sub Sub-Menu 2</a></li>
 </ul></li><li><a href="#">Sub-Menu 3</a><ul> <li><a href="#">Sub Sub-Menu 1</a></li><li><a href="#">Sub Sub-Menu 2</a></li>  <ul> </li></ul></li><li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li><li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li></ul></nav>
Replace the # with your blog links and anchor text with your own. Done
Remember 
If you are using the blogger mobile version template in your blog, first disable it by going.

  • Select template >> click the gear icon
  • Select No. Show desktop template on mobile devices.
Now check your blog with different devices. Hopefully it will be working properly, if you are facing any problem about adding this multi-level responsive menu bar then leave your comment below.
Read more
среда, 24 июня 2015 г.
на 09:24 0 коммент.
Ярлыки: , , ,

How To Add jQuery Horizontal Dropdown Menu to Blogger








UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........





Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:




And immediately before it, paste this code:




Now click Save Template 

Note:
Please host image yourself.
You can change width,height,color,... as your choice.

3.Now go to Layout-->Page Element and click on "Add a gadget".

4.Select "html/java script" and add the code given below and click save.



Now click Save 

 

Read more
понедельник, 22 июня 2015 г.
на 11:40 0 коммент.
Ярлыки: , , ,

New Multi-Level Drop-Down Menu

Read more
на 10:06 0 коммент.
Ярлыки: ,

Smooth Multi Level Drop-Down Menu Using jQuery









UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........








Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:




]]>
And immediately before it, paste this code:


/*Some IE fixes*/
.ddsmoothmenu ul li {zoom:1;}
.ddsmoothmenu ul li {display:inline;}

.ddsmoothmenu{
font: 12px Verdana;
background : #ffffff none repeat scroll 0% 50%;
border : 1px solid #ececec;
margin : 5px 3px 5px 3px;
padding : 0;
width : 973px;
height: 30px;
}

.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }

/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Verdana; }

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: black;}

.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #BF0000;}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: white;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray;}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 7px; right: 4px;}

.rightarrowclass{position: absolute; top: 6px; right: 5px;}

/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0px; height: 0px; background: white; display:none; visibility: hidden;}


STEP #3


Now find (CTRL+F) this code in the template:




And immediately before it, paste this code:








                            Read more
на 08:57 0 коммент.
Ярлыки: , , , , ,
Подписаться на: Сообщения ( Atom )