DropDown Menubar

Today I will present my first hack, a dropdown menubar for Blogger Beta.
Feel free to criticise my instructions in case they do not provide enough information. Before we start the engines, I want to thank Avatar, who encouraged me to write these thoughts down. =)


I used Hoctro's 'Labels as Tabs'-hack, but in the end, I felt the need of some sort of drop down-solution. Take a look below my header, you should see it there. Well, doesn't look that special at first, does it? So just hover over the different sections to witness a nice drop down-functionality that enables us to put all kind of stuff in there, e.g. category links, label feeds, blogrolls, linklists,...

I wanted to get rid off my old tabs and replace it with this menubar under the condition that it would contain widgets. Because I am no coder, this idea was followed by a few try&error-experiences, but now I can happily say that I got it to work. The initial version of the bar can be found here.

So let's get going, shall we?


Step 1: The Javascript

Simply copy the following line into the head-section of your template:

<script src='http://non.alastor.googlepages.com/chrome.js' type='text/javascript'/>

Make sure that you don't insert it into the style definitions. Of course you can also replace the link if you decide to upload this file to another host.

Step 2: The CSS-definitions

Now we will define the look of the menubar, so click on your Edit HTML-tab and go to your style section. Depending on the desired color of your bar, you will have to copy one of the following definitions:

chromestyle.css - silver
chromestyle2.css -blue
chromestyle3.css - green
chromestyle4.css - red

Simply paste the code into the stylesheet, before the 
]]></b:skin>

Step 3: Positioning the menubar

Okay, now we should be able to insert the last bits of our code to place the menubar. So let's talk about the possibilities we have: theoretically, we could put the bar everywhere, but I want to show you two ideas of inserting the menubar:

a) below the header, over the rest of your content:

This is the main idea behind the concept, making it to one of the most important elements on your site. Search for the end of the header-section and the beginning of your content-wrapper, this is the place where the following code goes in:

<div class='chromestyle' id='chromemenu'>
<ul>
<li><a href='http://YOURBLOG.blogspot.com/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>Content 1</a></li>
<li><a href='#' rel='dropmenu2'>Content 2</a></li>
<li><a href='#' rel='dropmenu3'>Content 3</a></li>
<li><a href='#' rel='dropmenu4'>Content 4</a></li>
</ul>
</div>

<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

b) instead of the Blogger navbar on the top:

An interesting approach: replacing the navbar with your own, personal menubar. It's not that difficult. You will have to add this line of code into your stylesheet:

#navbar-iframe {display:none
}

Then you will have to search the opening body-tag and paste the code from step 3.a there.

This is it. We will customize the contents of the menubar in the next step.

Step 4: Filling the menubar with your widgets

As you can see, the menubar has now five elements in it: Home and Content 1-4. Rename the contents to your preferences. You can also add other links or more content-elements (these will be our dropdown-menus) by adding new lines to the chromestyle-div.
Decide which widgets you want in your menubar. I assume that feed-links, blogrolls, category links, etc. are ideal candidates. In order to get a widget in there, go to its code and add the bold lines of code in there:

<b:widget id='...' locked='false' title='...' type='...'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
.
.
.
</div>
</b:includable>
</b:widget>

Of course, the ID 'dropmenu1' should only be used once. You then have to change the number to dropmenu2, dropmenu3, etc.
Don't forget to delete the following line out of all widgets you put into your menubar, otherwise the layout won't look good:

<h2 class='title'><data:title/></h2>

It should work fine with plain linklists and blogrolls, but you will face some sort of strange layout, e.g. when you want to display your categories up there. For this reason I have prepared code that should fit your desires:

a) Categories in the Menubar:

As far as I can tell, the menubar only shows one link in a line. So it gets screwed when you simplay put up a category-widget, because the label count goes in an extra line. My workaround is to put the label count inside the link:

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/> (<data:label.count/>)
<b:else/>
<a expr:href='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</a>
</b:if>
</b:loop>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

b) Feed Links-Widget:

I guess I am not the only one using PurpleMoggy's label feed-solution. If you try to pull that up to the menubar, you will soon face the problem 
that every feed icon goes in an extra line. For this reason I've put up a customized label widget that offers label-feeds and standard post/comment-feeds as well:

<b:widget id='Label2' locked='false' title='Newsfeeds' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu2'>
<div class='widget-content'>
<a href='http://YOURBLOG.blogspot.com/feeds/posts/default/-/' target='_blank' title='Subscribe to Posts'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Posts</a>
<a href='http://YOURBLOG.blogspot.com/feeds/comments/default/-/' target='_blank' title='Subscribe to Comments'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Comments</a>

<b:loop values='data:labels' var='label'>
<a expr:href='"http://YOURBLOG.blogspot.com/feeds/posts/default/-/" + data:label.name' target='_blank'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> <data:label.name/></a>
</b:loop>

</div>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Fine. We are done...for now. You can easily play around with the CSS
to change the look or add new elements to the menubar.
I hope you found my instructions useful, please let me know if you like this hack.

Update:

Here is an additional method to get content into the menubar:

Vivek Sanghi presents a way to get a list of recent posts into the menubar, which is pretty useful! Visit his post concerning this matter to see how!

Cheers!