logo

And Finally, The Flyout Menu Download

Where does the time go!? I'd planned on spending some time tidying up the flyout menu demo and making it more relevant/meaningful, ready for you guys downloading it.

Alas, I just don't have the spare time I used to. What time I do have spare at the moment is spent preparing for the arrival of the second baby, due in the summer.

I've been served my eviction notice and have to relocate the office elsewhere. As I mentioned last year it will be in the garage, which needs rebuilding. Before I'm allowed to do that I have to finish a whole list of other jobs in the house itself. It seems never-ending but then I can almost see light at the end of the tunnel now. You'll get more of my time once it's all done.

Anyway, last night I did manage to spend time packaging the download up and putting it in the sandbox. You can download it here.

It's been interesting to see what people thought of it. The hard part has been trying to get across that it's not drop-down menus. We've all "been there, done that" with drop-downs. To me drop-downs are mainly used as a means of site navigation. With "flyouts" it's different. They can go anywhere on the page and don't have to be about navigation (apart from in the sense that they contain links, of course).

What I wanted to get across was the concept of the approach -- that you can save space on your page by hiding certain parts until the user needs them. Nothing new in that, I know, but this is just a simple approach to the problem I thought it would be useful to share.

Had I had more time I'd have gone on to show how flexible they can be. Unlike the traditional drop-down menu, which is typically just a list of links to other pages, the flyout can contain anything you like, such as the login form. For an example of how you can customise this take a look at the login "flyout" on the Prominic.NET website that Rockall revamped last year. In other sites I've worked on the approach has been used for a variety of tasks, such as a "My Favourites" section in one application.

Whatever you think to them and whether or not "flyout" is the right name to give them the fact remains they are extremely useful and, more importantly, they impress customers and users like them. So there.

Comments

  1. Jake,

    Thanks for this contribution! I'm eager to try it out, but I'm having a problem. I've loaded the demo database on my server and opened it with a browser, but I do not get a flyout when I hover over the 'login' link.

    I know it's not a problem with my browser (IE7), because it works perfectly when I open the demo database on your server.

    I've signed the demo database with a local ID. Is there any other step I'm missing?

    • avatar
    • Jake Howlett
    • Fri 15 Feb 2008 11:17 AM

    Hi Stuart,

    Only thing I can think of is that your server isn't configured to serve HTML in "standards mode" - search this site for that term to see how it's done.

    Jake

  2. Jake - thanks for continuing to find time to blog and provide awesome code samples. You are one busy man.

    -Ed

  3. I echo the above comments. Cheers and respect.

    Regards

    alan

  4. I say the same as Ed and Alan. Cheers and respect. Your work is awesome.

    • avatar
    • Darin
    • Mon 18 Feb 2008 10:44 PM

    Thanks Jake!

    • avatar
    • Mahesh
    • Tue 19 Aug 2008 03:13 PM

    Can we use a subform with an embedded view in place of login subform. I am trying to implement the multiple documents selection and action on web. Instead of opening a new window to select the documents I would like to use this approach.

    I have a Change link on $$ViewTemplateDefault form, when I click on this link currently I am opening a Form which contains embedded view and action links. I can select multiple documentsa and click on Update link to change values. Instead of opening a new window I would like to use a flyout menu which should open a subform containing embedded view.

    Let me know if this is possible or any ideas are appreciated.

    Thanks

    Mahesh

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 15 Feb 2008

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content