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: Take WordPress to a whole new level with Divi's incredibly advanced visual builder technology. 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:

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. Hi Mary, how do I link a separate page, by adding another menu item ( say “log-in”)in any sequence?

  2. ALL YOUR SCOPE ARE BELONG TO IE 8.0.

    To fix this template in IE 8.0 make the following change in the animateBGImage function:

    $next_item_bgimage.css({
    width : dim.width + ‘px’,
    height : dim.height + ‘px’,
    left : starting_left,
    top : dim.top + ‘px’
    });

    $bg_image.parent().append($next_item_bgimage);
    $next_item_bgimage.stop().animate({
    left: dim.left }, animSpeed);

    ————–

    While you don’t have the nice chaining like the original code, you don’t lose the scope of the object in the above code.
    Thanks IE for being a cunt yet again.

  3. ALL YOUR SCOPE ARE BELONG TO IE 8.0.

    To fix this template in IE 8.0 make the following change in the animateBGImage function:

    $next_item_bgimage.css({
    width : dim.width + ‘px’,
    height : dim.height + ‘px’,
    left : starting_left,
    top : dim.top + ‘px’
    });

    $bg_image.parent().append($next_item_bgimage);
    $next_item_bgimage.stop().animate({
    left: dim.left }, animSpeed);

    ————–

    While you don’t have the nice chaining like the original code, you don’t lose the scope of the object in the above code.
    Thanks IE for being a cunt yet again.

    The code does not work with IE8, which is inserted?

  4. hello, I can not put two different galleries – thank you for your help, i m tester html5, my english is very bad, but tanks for you help

  5. Congratulations

    Could you tell me how to implement a other menu (sub menu) in the content area that opens a second content area that can integrate information text, images, video, …

    Thank you

  6. Simply beautifull. A question: what I have to do if I want to add a vertical scroll in the browser window, when I use small screens?

  7. i’ve used this template for my site http://irshi.com
    But as others i have few issues:
    1) i cannot implement vertical scroll to the “bf_content_text” div class.
    2) i cannot create another gallery.

    Can anyone help please?
    thanks in advance

  8. @Maxim.k : I have the same problem with the vertical scroll with menu items and descriptions…. Maybe there are too many “fixed” attributes of position….

  9. Anyone solved problems with IE8?
    Having problems with background fade in -effect, it doesn’t work as it should. Background stays ‘dark’ all the time

  10. Hi! I used the template to develop this website

    http://www.accademiaviaggi.com

    as you can see, I significantly changed the graphics of the nav menu, putting it in horizontal.
    One question: how can I make the bg images change at the click on the menu voices?

    Thanks!