Restaurant Website and Gallery Template

Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and an integrated Google map that shows the location. The great food photography is by avlxyz and you can find his Flickr photostream here. The license […]
RestaurantTemplate

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and an integrated Google map that shows the location.

The great food photography is by avlxyz and you can find his Flickr photostream here.
The license for these pictures is the Attribution-NonCommercial-ShareAlike 2.0 Generic License.

The main homepage photo of Venice at night is by krossbow, be sure to check out his Flickr photostream.

When coming to the homepage, the background image will fade in and we will see the first welcome content block:

When the user clicks on “Our Menu”, a little thumbnails gallery will appear in the content area:

Choosing a dish from the thumbnails gallery, will open the fullscreen gallery, that shows the dish image with a title and a description and the same image as background. Using the navigation arrows on screen, the left/right keyboard arrows, or the scrolling wheel of the mouse, the user can slide the images. The title and description will animate back behind the foreground image during the sliding.

When clicking on the foreground image, it will disappear and the background will become more bright. Now, the user can view the fullscreen image and navigate through them the same way. Clicking on the background will bring us back the foreground gallery element.

When we click on the cross on the top right corner, we will leave the image gallery.

The menu point “Visit us” will hide the content box and show a google map as the background of the whole page:

And that’s it! We really hope you liked this template idea and find it useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 170

Comments are closed.
  1. This is great work!.

    I’m also trying to find an example with a background slide show and other content in front of it. Any ideas?

  2. Hi thank you for this awesome work.
    How about IE8 and older browsers users? Did any body fined a solution?

  3. Hi Mary Lou! It’s simply a faboulous work! Well done!
    I have a question: what if I try to make the links of the menu to open new pages instead of the only content?
    For my comfort, I need to have separate pages instead of a unique html file…

  4. Hiya,

    this is a brilliant template, really really beautifull, but…

    It has isues with, what i read, IE8 and IE9!
    The menu and logo dissapear partly when you enter the page. When you refresh more menu items return or disappear. When you hover over them with your mouse they also dissapear.
    I want to use the template in a website and started editing it. Weird enough, when i test the website local, on my computer everything works perfectly in IE9!?
    In FF and Chrome it works just fine.

    More weird, i can’t remember this happening when i fell in love with the template first time i saw it, maybe a update for IE 9 that screws things up? But then it should’nt work local also, i think?
    Could you please shine your artistic and creative light on it?

    Much obliged

  5. I’d like to ad this comment to my last: if you have IE9, try the demo and refresh the page a couple of times, you’ll see that the menu and logo keep dissapearing.

    It has to do with id=”bf_page_menu” class=”bf_menu”somewhere in the jquery.template.js must be a glitch, but i can’t fix it because of my noopism with languages other than html and css…
    Mary Lou, could you look in to it?

  6. Hi thank you for this awesome work.

    Some problems with IE8, Please give some way out

  7. wow – the visit us page with integrated google map is stunning!!! great work!

  8. Mary Lou, could you give some feadback please on questions asked before?
    It’s such a pitty that this template does’nt work proparly in IE 8+9

    Help?!

  9. Thanks for this fantastic template, Mary!

    Hope you or somebody here can help: I am trying to add the jScrollPane to the .bf_content_text but just can’t get it to work. Anything special required to implement this?

  10. Hey Mary Lou,

    Can you please help with questions asked before? With the problems in iE8 and 9?

    Hope so!

  11. Backwood, I am trying what you said in IE8/9 and nothing is disappearing here (I’m trying it with the demo). The only thing that comes to my mind with what you described is the loading of the Google web font which might cause some problem. Try removing the two webfonts from the head of the index.html (line 10 and 11) and let me know if it works for you. Hope it helps, ML

  12. Hi Mary Lou,

    Hope you can help : How can I add a “my maps” with msid ?

    Thanks for sharing such amazing work !

    WG

  13. sorry i commented on a different demo (Sliding Background Image Menu with jQuery).

    Anyway lovely tutorial. although a bit of a problem on safari and chrome sometimes. when you open the site on a squareish browser, the background photo appears to be stretched vertically. is there a way around this?

  14. Hey Mary!
    Thanks for your help. I tryed what you said but no, still not works.
    I’ve filmed it:

    http://youtu.be/-R_EtMZ4KKQ

    There you can see me refreshing the page and there goes the logo and top menu items…

    Hope this will help solve this problem.

    • Hey Backwood, that’s really strange, it seems like it just fades out… anybody else here with the same problem?? Thanks, ML

  15. Yep it fades out, also on start! The weird part is that when you test it local on your hardrive, it does’nt happen! I really hope this can be solved because i like this template a lot and want to use it for a photography website for myself.