Drop down menus and blog changes

You may have noticed my blog is looking slightly different*.  Why?  Did you know that readers often leave web pages within 10 to 20 seconds?  Scary.  We get frustrated with blogs so quickly.  We expect so much.  Hence my continual quest to assist you, dear reader, to navigate well over 1000 posts.  A big step on this quest is my recent installation of drop down menus under my header.

I had wanted drop down menus for some time.  I just didn't know how.  Then I saw Kari's instructions on how to create drop down menus in Blogger.  It suddenly seemed possible.  It was a big challenge.  A big achievement.  It seemed only right to share my experiences and learnings so others can feel empowered to make changes on their blogs.

My blog before I started making changes.

Changes
Enabling drop down menus has meant reflecting on my blog design and some consequent changes.  Here is a summary of what has been happening:

• Changed search field and moved it up to top of side bar.
• Got rid of Foodie Blogroll  and Aussie Food Bloggers Ring links.
• Moved labels to footer as a cloud instead of a list on the sidebar.
• Got rid of list titled 'search this blog'.  (It duplicated what is now on drop down menus.)
• Changed colour of posts background from light green to white with watermark. (This was due to problems with margins so I may change it again.  I quite like a solid white background though.)
• Added 'What will I cook tonight' to sidebar.  This is a list of recipes I am planning to make (because my memory gets overloaded).  I am finding it quite helpful.
• Updated favourite places to eat out in Favourites.
• Grouped Recipe Index sections to reflect the drop down menus, including rearranging the order in line with these new groupings.
• Created new sections in the Recipe Index sections - collations, vegan cheese, dividing desserts into warm and chilled, dividing baking with yeast into sweet and savoury.  More to come.
• Rethinking categories in Reflections and Reviews.  Not everything fits neatly but it is mostly done.

I wont list all the changes yet to be done.  Editing, more sorting of reflections and more anchors are on the list.

What is CSS?
Adding drop down menus required change to the blog CSS.  I will pause here for novices like myself to explain what I understand CSS (Cascading Style Sheets) to be.  If you are technically savvy, just move on to the next heading or correct me if I am wrong.

Whereas you populate a page with content using HTML, if you want to use the same style on many pages, it is best done in one place with CSS rather than using HTML on every page.  For example, CSS covers fonts, colours, margins, lines, height, width, background images and many other styles we want on every page.  Hence to install drop down menus on each page, you are far better off using CSS rather than adding them to every individual page.  More about CSS here and here.

The list under Recipe Index is a drop down menu.

Considering drop down menus
If you are thinking about installing drop down menus, it is useful to read about best practice with drop down menus.  Consider that not everyone likes them.  They can be frustrating.  They are hard to read on a mobile phone.  I have had discussions about websites where colleagues had found drop down menus confusing. 

Think carefully about what you really want in your drop down menus.  Be strategic.  Pick your very best or most useful links.  Don't let the list get too long.  (Gulp!  My Recipe Index list could be shorter!)  I really wanted drop down menus because my Recipe Index had grown so big.  And I really liked the advice that every link on the drop down menu should also be available from the top level menu item (see below picture).  Just in case people miss the drop down menus for technical reasons.

Illustration of what I mean by 'top level menu'.

My reflections on installing drop down menus
Installing drop down menus was a lot of work planning and ordering the menu, altering the CSS and then dealing with the resulting changes.  I am not going to tell you how to install drop down menus in Blogger.  I am not expert in this area.  But I am going to tell you what it involved, what problems I had and who can tell you how to do it.

Here is my list of tasks to be done to install drop down menus:

Planning:

• Draw up a list of labels and corresponding links for your drop down menus.  Decide whether you want to link to headings within the top level menu page or to link to another page.  (Links within pages are called anchors.  I have written more about what they are and how to create them in an anchors tutorial.)
• Get links updated and in good order.  This was time consuming for me but useful for my blog.  
• Write code with your own urls or links using help from others who have reproduced this code as listed below.

For instructions about how to install drop down menus I suggest going to Kari's Bite Sized Thoughts, My Blogger Tricks or All She Cooks.   I mainly followed Kari's advice as she is a friend that I trust.  Following instructions are helpful but not perfect as I discuss here.  It seems that like airplanes, every blog is subtly different.   And from these links you will see there is more than one way to change the CSS.

• Back up your blog.  Cindy and Michael have good advice on how to back up your blog with Blogger.  If everything goes horribly wrong when you do the drop down menus at least you have a copy of the code used by your blog previously to reinstall it (or ask someone else to).
• Take a screen shot.  Then when you wonder how it looked, you can check back.

Installation of drop down menu code:

• Go into layout to Add a Gadget for your html (see above Instructions links).  At this point I deleted my Pages menu from the top of my Page Layout.  Later I regretted it - see Make it Mobile-friendly point below.

When I saved the new Pages gadget, my formatting looked quite odd.  Here is my screenshot of my blog at this stage.  Kari suggests that you set up a test blog but this just seemed too much work for me so I was prepared for it to look odd for a few minutes while doing this.  I put up a post to explain in case people were wondering about it.

My menus looked odd after I added code into my page layout before going to the edit in the CSS section.

• Add CSS code so that the menus become drop down ( (I used Kari's instructions at Bite Sized Thoughts).  I have given a layman's description of CSS above to let you know that when you change it, you change it on every page.  I was quite nervous at doing this.  
• Format the colours and styles in the menus using the CSS code.  NB Don't try and do this using the other Advanced Tabs in the Customise Templates pages as these are overridden by the CSS you have put in.  My drop down menus were the same colours as Kari's when I first inserted them.  I had to change the colours to my own style in the CSS code.  Quite a few colours were changed before I arrived at ones that were mine and felt comfortable.  If you want your own colours as soon as you insert CSS, you can look at the way that My Blogger Tricks or All She Cooks give the CSS code with places to insert colours.  (NB a colour in html usually looks like #ff000).  But even if you do put your own colours in, you still should check them by refreshing your blog to if they look right once online.
• Make it mobile-friendly (see Kari's instructions at Bite Sized Thoughts).  This is where I really came unstuck and still haven't solved the problem.  Drop down menus are not mobile-friendly because mobile phones don't have a mouse that will hover over menu to cause list to drop down.  Kari's fix was to just have the top level menu showing.  This just didn't work for me using her code.  After some discussion, it seemed that maybe this was because I had deleted my initial top level menu rather than disabling it.  I will look into this further when I have time.  For now, my mobile view is less user-friendly due to lack of my menu.  Apologies if this affects you.  (And I would love to hear if people do use this menu.)

Now that you have changed your code:

• Check formatting.  My margins went awry when I added the CSS and I wasn't happy about this (see below picture).  I made marginal improvements (yes that pun was intended) by removing the colour but it still looked a bit wrong.  Kati suggested some additional code which allowed me to make the post margins narrower but also took the colour away altogether and left me with a faint watermark.  It is still not perfect but I will live with it for a while.  From searching the web, it seems that this might be due to the type of Blogger Template I am using

My blog with drop down menus as work in progress - colours not quite right and margins a bit wide on the green post background.

• Test links.  Check every link you have added on the drop down menu including top level menu items.  When I did this I found all my links were broken.  Once I added a small change (using ' instead of ") to the code, it worked.
• Back up blog again with the new code you have implemented.  It would be terrible if your blog crashed now after all your work and you didn't have a back up.  (Yes I am about to do this mysefl!!!)
• More problems?  I will state the bleeding obvious (because I tend to forget it) and suggest you Google it.  Someone else somewhere may have had the same problem and shared it.  You are also welcome to leave a question in the comments here but as this post demonstrates, my expertise is limited.

Menu organisation alternatives
My desire for a drop down menu really grew out of my desire to make it easier to access my recipes.  How to make my recipes easy to search is a continual dilemma.  I use it a lot and I know others do.  My Recipe Index is the most popular page on my blog, by a country mile!

Making everything fit into neat categories gives me headaches.  With all the recent changes to categories, a few recipes are not fitting where they should.  I have considered Recipage (such as used on Oh She Glows).  I like how it sorts the recipes into many overlapping categories but I don't like how the links go to recipes only rather than the whole post.

Jac of Tinned Tomatoes reminded me that there are alternatives to the header drop down menus.  She has a tutorial for a drop down menu index on the side bar of her blog (on Blogger).  The advantage of her system is that it updates automatically based on labels ( think).  Whereas I still manually update my index.  An alternative way to organise your recipe index visually is using inlinkz which is explained by Miss Information.  I have also seen some useful advice on How to Create an Automatic Recipe Page for WordPress Blogs.

My blog today

Google Reader update
I wrote about not being upset at Google Reader closing a while back.  Now that Google Reader is a thing of the past, I thought I might just update you.  I am still happy with life post-Google-Reader.  I haven't signed up to any more blog readers.

I use my blogroll on the sidebar of my blog to keep up with some favourite blogs.  It is as much as I can keep up with.  It probably means I miss a few posts but I just don't have the time for them all.  If I have been too busy to look for a few days I might look  at what has been happening lately on some favourite blogs.  There are a few blogs that probably should be on the list and aren't.  However I do still visit other blogs when I see them as I travel the blogosphere or if they visit mine.  So my sidebar is not the only place I look at blogs.  I hope all Google Reader users have found new homes where they can be happy.

* If you want to see what my blog previously looked like in more detail than the screenshots I give in this post, you can get an idea by going to the National Library of Australia's Pandora archive where my blog is archived or just look at screen grabs of previous designs.