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

Create a shortcut to open Screen Sketch in Windows Ink Workspace

By Published on:
    With the addition of Windows Ink Workspace in Windows 10, we can now take screenshots and draw over the screenshot easily. You can simply click on the Windows Ink Workspace button in the taskbar or press Win+W shortcut to open the Windows Ink Workspace and click on "Screen Sketch" to take a screenshot and start editing it.    But if you would like to have a shortcut to open screen sketch directly without having to open the Ink workspace, you can create one manually using the following simple steps as suggested in the following link : Go to your PC Desktop Right Click and select New > Shortcut In the Next window that appears, copy and paste the following text and click Next ms-penworkspace://Capture Choose a name for the shortcut in the next window and click finish Now, right-click on the shortcut that is created on the desktop and select Properties. Go to Web document tab in the properties window and choose your desired shortcut in the "shortcut ke...
Post a Comment
Read more