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 monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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

Receive our bi-weekly Collective or official newsletter right in your inbox.

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. do not tell how you can customize the template for multiple locations on the map? Can we make the transition to the link and download maps without clicking on the link?

  2. Hi Mary Lou, congratulations for your great work! You look fantastic! I noticed that adding a contact page when I click to go to other pages on the contact page is fixed and superimposed on the other. What is the solution? Thanks

  3. Hi Mary Lou,
    firstly thank you very much for this share,
    this is the problem on ie9(step by step);
    * click “our menu”
    1- next-prev is working with foreground picts. and first change background picts. later nothing change backg picts.
    2- click on any pict for view background picts. later nothing change backg picts.
    (close button is working anywhere)

    thanks for everythings

  4. i forgetten;
    when click close button(cross)
    sites default background pict. is not change and stay what is last “our menu”s pict.

    😉

  5. If i ever meet you Mary Lou ill buy you drinks for a whole week….
    Thank you for all your tutorials,
    i am trying to keep up with them and read them all 😉 thank you

  6. Hi
    I had the same problem with the ‘disappearing’ menus and logo – I changed where I was loading the scripts and it is all good… for me it was a script in the footer.
    Great piece of work Mary Lou – thanks so much !!!!

    • Hi Mike, thanks a lot for letting us know how you solved that problem! Cheers, ML

  7. Hi Mike and Mary,

    well it seems not to happen that often when i change the way the script loades, but it still happens when you keep refreshing. Oke, you can question if visitors are refreshing the webpage that often, but i did…

    Mike can you be more specific on the changes you made with the order of loading the scripts?

    Real thanks for this help!!!

  8. i realy like your site!!! 😉
    but I have a question, how it’s possible to scroll the text on the about side, when I put in mor text that can be shown?

  9. Great stuff, I especially like the map. You never leave the site and it’s visually appealing.

    I would like to know how I would add more locations.

    Again Great work!

  10. Hiya Mary Lou,

    switching the positions of scripts does’nt work for me, i still have the problem of the dissapearing menu where ever i put the scripts.Please, any thoughts on how to resolve this? I still intent to use this beauty of a template, help?!

  11. Hi Mary Lou,
    Nice work, i like it, now t want creat a big gallery, like gallery1,2,3… whith this template, i have some problems. please how to make it?? thanks

  12. 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. How can I solve or do this?

  13. Hi, Mary thanks……. I was a little bit problem with Maps but your above reply solve this

    Thanks one second

  14. Hiya Mary Lou,

    it seems i finally solved the problem.
    It’s not only the @fontface link but also the link to the Jquery library of google which seems to, i don’t know how to phrase it, bug the template.js. Why excactly i don’t know, but that was/is the problem.

  15. 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. How can I do this?

  16. Hi

    I concur with all the positive comments above, it really is very nice!

    Is it possible to show a different background image, depending on what link you click?

    eg. Click on “About Us” a different image shows.

    Many Thanks!

  17. Hi Mary Lou and Backwood

    Could you explain what kind of changes you make to fix that bug?

    A very big thanks for that great job.

    Enjoy your Day