Skip to main content

Create Drop-Down Menu in Blogger

Image
By Published on:
Blogger is one best free platforms. You just have to have a Google ID(Gmail account) to be able to create a blogger account. It comes with few default templates & layouts which one can customize however they want. You don't necessarily have to have a knowledge of HTML &CSS languages, but having a little knowledge is going to help you in further customization. The HTML widget lets you add any type of customized web elements like the menu bar, sidebar et.al., & the Add CSS option in the Blogger template designer lets you add style's to the HTML code.

There was a Youtuber & blogger who have uploaded a good amount of helpful tutorials 2 years ago about how to set up a blog and customize it the way you want it. Though her blogger site doesn't have all the resources she presents in her video's, the video's itself are pretty helpful for a newbie.

In one of her video's, she explains in detail about how to Create Menu bar's in Blogger & provide a drop down menu to the menu items.



Unfortunately, the HTML & CSS code that she has mentioned in the video is not available on her blog, but you can find a similar code in one of the comments by DreamerBros, which is
Try this codes guys...not the same code but something is better than nothing.

 First Code(HTML code)
<div id='menubar'> <ul id='menus'> <li> <a href='Link'>Home</a> </li> <li> <a href='Link'>About Me</a> </li> <li> <a href='Link'>MenuItem</a> <ul> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> </ul> <li> <a href='Link'>MenuItem</a> <ul> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> </ul> <li> <a href='#'>MenuItem</a> <ul> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> </ul> </li> </ul> </div> Search for ]]></b:skin> and Paste the second code just above ]]></b:skin>
Second Code:(CSS code) /-------- Begin Drop Down Menu -----/ #menubar { background: #8E8E8E; width: 840px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:1px solid #B2FFFF; height:35px; } #menus { margin: 0; padding: 0; } #menus ul { float: left; list-style: none; margin: 0; padding: 0; } #menus li { list-style: none; margin: 0; padding: 0; border-left:1px solid #1A6680; border-right:1px solid #1A6680; height:35px; } #menus li a, #menus li a:link, #menus li a:visited { color: #FFF; display: block; font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #menus li a:hover, #menus li a:active { background: #130000; /* Menu hover */ color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #menus li { float: left; padding: 0; } #menus li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #menus li ul a { width: 140px; } #menus li ul ul { margin: -25px 0 0 160px; } #menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul { left: -999em; } #menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul { left: auto; } #menus li:hover, #menus li.sfhover { position: static; } #menus li li a, #menus li li a:link, #menus li li a:visited { background: #B3B3B3; /* drop down background color */ width: 120px; color: #FFF; display: block; font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px solid #1A6680; } #menus li li a:hover, #menusli li a:active { background: #130000; /* Drop down hover */ color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } /-------- End Drop Down Menu -----/

There are other videos & blogs by few other bloggers too, who use a different but similar code.

1.All in One


All in One

The code provided in the video and blog is
HTML code

<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://satunes4u.blogspot.com/'>Home</a></li>
<li class="sub"><a href=''>Menu-1</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
</ul>
</li>
<li><a href=''>Menu-2</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
<li><a href=''>Submenu-4</a></li>
</ul>
</li>
<li><a href=''>Menu-4</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
<li><a href=''>Submenu-4</a></li>
<li><a href=''>Submenu-5</a></li>
<li><a href=''>Submenu-6</a></li>
</ul></li>
<li><a href=''>Menu-5</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
</ul>
</li>
<li><a href=''>Menu-6</a>
</li></ul>

<!-- end navmenu -->

CSS code

uot;Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 13.2px; height: 300px; overflow: auto; width: 529px;"> /* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -10px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

2.Random Juvament

Random Juvament
The code posted in his blog is
HTML code

 <div id='menubar'>
    <ul id='menus'>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
        <ul>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
        </ul>
      </li>
    </ul>
  </div>

CSS code
/*-------- Begin Drop Down Menu -------*/

#menubar {
    background: #8E8E8E;
    width: 840px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #B2FFFF;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #1A6680;
        border-right:1px solid #1A6680;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #130000; /* Menu hover */
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #B3B3B3; /* drop down background color */
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #130000; /* Drop down hover */
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/



Labels:

Comments

Post a Comment

Popular Posts

Power Query - "SUBSTITUTE" Function: Remove/Replace multiple values in a column in One Step.

By Published on:
Often times, when you get data from a source, there will most probably be something incorrect that needs to be fixed using an ETL process of Power Query. And most of those transformations would require either Replacing or Removing string's that are not necessary. For example, if you extract any financial data from a source which has multiple currency symbols, there's a chance that the numbers get extracted along with the currency symbols like "$700"/"€700" instead of 700. And these type of cases makes it tough to Transform the Data to our wish as the value will be considered as a text instead of a number. In those type of cases, we would most likely have to create multiple steps to remove the multiple currency symbols from the Column. But thanks to the solution provided by Marcel for one of the questions posted on Stack Overflow, with a little manipulation of the Query language (M), we can replace/Remove multiple strings in one step using the List. ...
Post a Comment
Read more

Grasshopper: Voronoi Holes on a Planar surface

By Published on:
One of the best natural examples for a Voronoi is the Wing structure of a dragon fly.Grasshopper can help us to build a shape like this in Rhino. Image Courtesy:  The Pond blog Grasshopper by default has a node for Voronoi, we just have to prepare the necessary information to feed into the node. The following example shows how to create a Voronoi shaped holes in a surface Create a planar  Surface  from rhino or grasshopper Randomly Populate the surface with points using the  Populate 2D  Node Feed the surface and the points into the  Voronoi  node and feed a number slider too to adjust eh radius This forms the required Voronoi structure which you can edit the number of points or radius. To create the holes we need to offset each and every inner portion towards its centre using the  Scale  node We can find the centre of each of the inner portions using Area node I'm not sure why but using the offset command su...
Post a Comment
Read more

Grasshopper: offsetting curves on surface vs scaling curves on surface

By Published on:
Though in Grasshopper Offset and Scale are two different node functions, when it comes to a planar surface, the results of the both are similar. But, I found the " Scale" node to be effective when you want to loft the resultant curve with another. The following images show the different results of a Voronoi structure that yielded when scale and offset nodes are used. When the Offset node is used When Scale is used
Post a Comment
Read more

Set/Change the True north Orientation of a Project in Revit(07 of 10)

By Published on:
In any Revit project, the orientation of the North is always set to the top of the screen. But this might not be the case with all the projects. All the projects are not oriented parallel to the North direction, and we might want to orient the project to the true north direction. In one of my previous posts, I have explained the difference between Project North & True North and how we can use them in any project. In this tutorial, I'll show you how to Set/Change the Orientation of True North. Go to any Plan view.  Go to Manage tab in the ribbon and click on "Position" drop-down in the "Project Location" toolbar. Then choose "Rotate True North" from the drop-down list. Rotate True North This will show you 3 different ways to change the orientation of the True North. They are 1. Manual Rotation Upon clicking the "Rotate Ture North", Revit will automatically prompt you for manual rotation of the orientation. You can use...
Post a Comment
Read more