Sunday 7 July 2013

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.

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:

  • 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.


  1. Looking great! It's not an easy job trying to organize recipes. I know, I'm trying to do it right now with a revamp! I've been inspired by your green to change the colour scheme of my blog too (that and my new green frying pan):-) I found this post very inspiring too. Maybe one day I'll try drop down menus too!

    1. Thanks Elizabeth - your new look is lovely and I am jealous of your green frying pan. there is always something more to attempt on blog design no matter how much we do

  2. Wow Johanna, you've put so much work into this! It looks great and, like you say, is much easier to navigate and get the best from. I like the idea of drop-down menus for your blog, and am glad you didn't decide to go the recipage route as I'm not a fan...
    Now to explore your neatly organized recipes!

    1. Thanks coconut and berries - glad the drop down menus work for you - enjoy exploring!

  3. Love your work, Johanna! I've JUST finished my Masters in information architecture, so this is really interesting to me. I know all the theory, but messing with my own websites still fills me with trepidation when I don't have a developer to back me up - things can go pear-shaped so easily. You've inspired me now!

    1. Thanks Linda - I get very nervous too as things can go pear shaped so easily - I think making changes takes great courage and is easier when you see others doing it - which is why I wrote this post

  4. Well, that was weird! It was the first time I've tried to comment using my WordPress ID and it didn't display properly at all. See what I mean about things going pear-shaped? It should have displayed my name as Linda and my blog link as I'll try it another way next time. :-/

    1. Thanks Linda - I find the ways these comments link always a mystery - I am not keen on the way that blogger IDs link back to the Blogger account not the blog and now the way Google+ links back is even more confusing as it doesn't necessarily have an obvious link to a blog. Glad you took the time to give me the link to your blog

  5. Good on you for optimizing your blog, Johanna. Anything that makes me do manual updates is out for me. I feel like an automated thing should be easy enough for someone to create.. Except I haven't found anything for the free version of wordpress, alas. Anyways, I use mobile and your menus are nice but like you said, I can't click on the dropped down categories.

    1. Thanks Janet - it is amazing all the changes that Blogger has brought in since I started and now there are automated elements that were never available years ago - maybe if I waited the drop down menus would be automated. I still find wordpress plugins a mystery but it seems that blogger is easier for novices (I could be wrong here). Will try and redress the mobile menu issue when I get another burst of energy.

  6. That's so helpful of you to share that Johanna! And I know what you mean, sometimes a blog grows bigger than you ever thought that it would and you have to make it more nagivable.

    1. Thanks Lorraine - the idea of even having enough posts to need an index seemed incredible when I started blogging. I think it helps to review the blog every year or so to see if it is still fitting its skin.

  7. Well I don't understand a word of all that Johanna but I am v impressed. Love your blog. Cheers c

    1. Thanks C - I had hoped to try and make it easier to understand but perhaps it is easier to understand when thinking about doing the changes. Technology is a mysterious beast :-)

  8. Wow, that was an amazing and challenging amount of work! :O I can say I love your blog - the design is lovely and the internal structure is very good and helpful. I want to set a couple of hours of time aside and take a profound look on your recipes. I've started with that a couple of times but never finished because I had a 100 tabs open within 20 minutes. :P This Wednesday I have my PhD presentation, but afterwards I'll hopefully have time for that.

    1. Thanks Kath - so glad to hear your positive feedback about my blog - every time I start to look back I start to find all these recipes I have done that I remember I should visit so I am glad to hear others also want to visit them - good luck with the PhD presentations and have fun browsing my blog (and others)

  9. This is super helpful Johanna - I'm going to link it to my original post after I type this comment! Thanks for the shout out too, and I am glad that my experience could help (even though it didn't get you all the way there - blogs are like planes indeed). I love your menus and know I'll be using them a lot as I navigate your blog very frequently for recipes and tips :-)

    1. Thanks Kari - your help in doing this work was invaluable so I hope this helps others too. And am very pleased that your help makes it easier for you to navigate my blog. I also hope this info will help me if I come back to do more work on it. Will let you know if I make more progress.

  10. Gosh well done Johanna, your menus are very impressive and they work well. I know I seriously need to update my blog, but I have neither the technical expertise nor time to do so at the moment - something to put off a little longer.

    1. Thanks Choclette - glad to hear they work well for you - if you are not technically proficient I suggest waiting til you have time - it took me a while and besides you have some good navigation on your blog at least so I can find recipes there

  11. I don't know how I found you but it's a relief to know there's help available when I finally tackle an update. For now I'll settle on browsing your index and archives while I work up the requisite courage to make changes. Thanks for the informative post and links.

    1. Thanks Seattle Dee - a lot of technical stuff only seems hard because it is a mystery and once you see how it is done it is not that hard (except my margins which I am still working out!!!!) Good luck working up to some changes on your blog

  12. I've used the same codes as you to install my drop down menus but NO MATTER what I do I cannot get the individual tabs background color to change! Any suggestions? I also have the problem with margins... :(

    1. Hi Kay - I had a look at your blog and the margins looked ok to me but I wish I knew what is changing them. I also don't know about the backgrounds - the only places I can see is where it says "background" next to a colour code but as you have changed your colours I gather you have seen that. Sorry not to be of more help but glad you were able to install menus


Thanks for dropping by. I love hearing from you. Please share your thoughts and questions. Annoyingly the spammers are bombarding me so I have turned on the pesky captcha code (refresh to find an easy one if you don't like the first one)