Add Drop Down Menu In Blogger - Helper Blogger

Helper Blogger

Blogger Widgets | Templates | Tutorials

    • Latest

    Friday 24 February 2012

    Home CSS Add Drop Down Menu In Blogger

    Add Drop Down Menu In Blogger


    Why do you run scripts such as jQuery while you can use simple CSS and HTML to create beautiful drop down menus for your blog.Here I have created a simple and beautiful CSS Multi level drop down menu with using purecssmenu.This menu is also compatible with Internet Explorer 6.Coding for each blog is diffrent so here I am only giving CSS and HTML code.So as per your blog coding you can add this in your blog.If you want some help from me then surely drop your comment with your blog URL.I'll glad to help you.Now lets go to the CSS part.


    CSS Part


    • You can add this css above ]]></b:skin>

    #pcm{display:none;}

ul.pureCssMenu ul{display:none}

ul.pureCssMenu li:hover>ul{display:block}

ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}

ul.pureCssMenu,ul.pureCssMenu ul {

margin:0px;

list-style:none;

padding:0px 3px 3px 0px;

background-color:#414141;

background-repeat:repeat;

border-color:#CECECE;

border-width:4px;

border-style:ridge;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

display:block;

zoom:1;

position:absolute;

z-index: 1000;

left: 100;

top: 200;

}

* HTML ul.pureCssMenu {position:absolute}

ul.pureCssMenu ul{

width:103.95px;

}

ul.pureCssMenu li{

display:block;

margin:3px 0px 0px 3px;

font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

display:block;

vertical-align:middle;

background-color:#414141;

border-width:1px;

border-color:#414141;

border-style:solid;

text-align:left;

text-decoration:none;

padding:4px;

_padding-left:0;

font:14px Verdana;

color: #FFFFFF;

text-decoration:none;

cursor:pointer;

}

ul.pureCssMenu span{

overflow:hidden;

}

ul.pureCssMenu li {

float:left;

}

ul.pureCssMenu ul li {

float:none;

}

ul.pureCssMenu ul a {

text-align:left;

white-space:nowrap;

}

ul.pureCssMenu li.sep{

text-align:left;

padding:0px;

line-height:0;

height:100%;

}

ul.pureCssMenu li.sep span{

float:none; padding-right:0;

width:3;

height:100%;

display:inline-block;

background-color:#CECECE; background-image:none;}

ul.pureCssMenu ul li.sep span{

width:100%;

height:3;

}

ul.pureCssMenu li:hover{

position:relative;

}

ul.pureCssMenu li:hover>a{

background-color:#A3A3A3;

border-color:#FFFFFF;

border-style:solid;

font:14px Verdana;

color: #FFFFFF;

text-decoration:none;

}

ul.pureCssMenu li a:hover{

position:relative;

background-color:#A3A3A3;

border-color:#FFFFFF;

border-style:solid;

font:14px Verdana;

color: #FFFFFF;

text-decoration:none;

}

ul.pureCssMenu li.dis a {

color: #AAAAAA !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;

height:24px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}

ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}

ul.pureCssMenu span{

display:block;

background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);

background-position:right center;

background-repeat: no-repeat;

padding-right:14px;}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}

ul.pureCssMenu ul li:hover > a span{ background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif);}

ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}

ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(http://purecssmenu.com/ssc-data/templates/ways-showing-submenus/images/arrow_sub5.gif)}

    HTML Part


    <ul class="pureCssMenu pureCssMenum">

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Home</a></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank"><span>Link</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="pureCssMenu">

  <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 1</a></li>

  <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 2</a></li>

  <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 3</a></li>

 </ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Data</a></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">About</a></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Contact</a></li>

</ul>


    • If you want to add more tabs then use <li>.......</li> as used in first link ( <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Home</a></li> )
    • If you want to add sub tab then use <ul class="pureCssMenu"> <li class="pureCssMenui"><a class="pureCssMenui" href="YOUR URL HERE" target="_blank">Sub Links 2</a></li> </ul>
    Tags
    Share This
    Author Image

    About Rahul

    By -
    Labels:

    4 comments:

    1. Bastien Anderie-Meyer20 April 2012 at 18:28

      Hello! Thanks for posting this. O have a problem:
      I can manage to put in the Html part. Then I get the menu points but the drop down sub-menus don't appear.
      I wanted to avoid usind CSS, so that the menu bar stays in the style I created previously for another menu bar, which it does. But why does the sub-menus don't work?

      ReplyDelete
    2. Rahul22 April 2012 at 09:02

      @Bastien Anderie-Meyer - You can't avoid the CSS part.That's the main part of menu....

      ReplyDelete
    3. Unknown10 July 2012 at 16:01

      Common man, none of your things are working, and why are you need of credits?? Read more - ???
      I just don't understand, if you don not want to help, why have you written helper blogger . com
      Try to get a more professional approach please ..

      ReplyDelete
    4. Unknown10 October 2012 at 23:38

      where i put the html code in html of blog?

      ReplyDelete

    If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM

    Subscribe to: Post Comments (Atom)

    Author Details

    Hello Reader. This is Rahul, the author of Helper Blogger. Hope you have found this content useful. Do follow us on social media to stay updated with our latest widgets and tutorials. Also, don't forget to share this post using share buttons located just above.