Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Меню ресторана с помощью css3

restorant menu

Не плохая задумка ресторанного меню для сайта, все выполнено с помощью современных технологий css3, без использования jquery. Плюсы такого меню это его легкость и адаптивность под любое расширения экранов и мобильных устройств.

Корректная работа и отображения данного меню возможна только в новых браузерах которые понимают css3.

Ознакомиться или скачать демо ресторанного меню вы сможете ниже:

Пример

Скачать

1. Подключаем библиотеку jquery, как всегда с сайта google, вставьте между  тегами <head></head> следующий код:

<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js»></script>

 

2. Копируем html код, который представленный ниже и вставляем в нужно месте на сайте между тегами <body></body>:

<div class=»our_menu»>
<ul class=»menu»>
<li class=»item»>
<strong class=»new»>new</strong>
<a href=»https://hmil.ru/»>
<h3>2 for $20</h3>
<p> 1 Appetizer + 2 Entrees = Just $20</p>
<img src=»images/1.jpg» alt=»2 for 20″ height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<strong class=»new»>new</strong>
<a href=»https://hmil.ru/»>
<h3>Appetizers</h3>
<p> Start a meal off right with your favorite from our menu of signature appetizers. Can’t choose just one? You don’t have</p>
<img src=»images/2.jpg» alt=»» height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<strong class=»new»>new</strong>
<a href=»https://hmil.ru/»>
<h3>Pick ‘N Pair Lunches</h3>
<p> Make your own lunch combo with soups, salads, sandwiches &amp; more.</p>
<img src=»images/3.jpg» alt=»Alternate» height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<a href=»https://hmil.ru/»>
<h3> Entrees &amp; Main Dishes</h3>
<p>Our menu opens up a world of choices, loaded with flavor. From juicy steaks and succulent seafood, to saucy ribs and burgers.</p>
<img src=»images/4.jpg» alt=»» height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<a href=»https://hmil.ru/»>
<h3>Sizzling Entrees</h3>
<p> Fresh flavor never sounded so good.</p>
<img src=»images/5.jpg» alt=»» height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<a href=»https://hmil.ru/»>
<h3> Freshburgers &amp; Sandwiches</h3>
<p> From mouthwatering Freshburgers to big and tasty Sandwiches, we’ve got the flavors to satisfy your cravings.</p>
<img src=»images/6.jpg» alt=»Alternate» height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<a href=»https://hmil.ru/»>
<h3>Salads</h3>
<p>Fresh &amp; Delicious</p>
<img src=»images/7.jpg» alt=»Alternate» height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<a href=»https://hmil.ru/»>
<h3> Weight Watchers</h3>
<p>Delicious Entrées endorsed by Weight Watchers. Eating Right Never Tasted So Good.</p>
<img src=»images/8.jpg» alt=»Alternate» height=»164″ width=»283″>
</a>
</li>
<li class=»item»>
<a href=»https://hmil.ru/»>
<h3>Under 550 Calories</h3>
<p> Big Flavor. Big Portions. Big Value. All Under 550 Calories.</p>
<img src=»images/9.jpg» alt=»Alternate» height=»164″ width=»283″>
</a>
</li>
</ul>
</div>

3. Теперь добавляем стили для нашего меню:

 .our_menu{

width:970px;
margin:0 auto;}

ul,li{
margin:0;
padding:0;
list-style:none}

.menu .item{
float:left;
position:relative}

.menu .item .new{
background-position:-248px -482px;
height:28px;
left:-9px;
padding:7px 0 0 7px;
top:41px;width:55px;
background:#F00;
color:#FFF;
display:block;
font-family:»league-gothic»,sans-serif;
font-size:18px;position:absolute;
text-transform:uppercase;
z-index:1; }

.menu .item a{
background-color:#FFF;
color:#820922;
display:block;
overflow:hidden;
position:absolute;
box-shadow:0 0 7px 0 #CCC;
-moz-box-shadow:0 0 7px 0 #CCC;
-webkit-box-shadow:0 0 7px 0 #CCC}

.menu .item a:hover{
z-index:2;
-webkit-transition:height .2s ease-in-out;
-moz-transition:height .2s ease-in-out;
-o-transition:height .2s ease-in-out;
-ms-transition:height .2s ease-in-out;
transition:height .2s ease-in-out}

.menu .item:hover .new{
z-index:3}

.menu .item a h3{
border:0;
font-family:»league-gothic»,sans-serif;
font-size:18px;
margin:0 0 .5em 0;
padding:0;
text-transform:uppercase; }

.menu .item a p{
color:#432;
font-size:16px;}

.our_menu .menu{
float:left;
margin:0 0 50px 0}

.our_menu .menu .item{
background-position:9px -791px;
height:170px;
padding:0 0 0 7px;
width:316px}

.our_menu .menu .item a{
height:25px;
padding:114px 0 0 14px;
top:20px;
width:295px;
text-decoration:none;}

.our_menu .menu .item a:hover{
height:132px;
padding-top:179px}

.our_menu .menu .item a img{
clip:rect(0px,283px,96px,0px);
height:164px;
position:absolute;
top:14px;
width:283px}

.our_menu .menu .item a:hover img{
clip:auto}

.our_menu .menu .item .new{
left:-1px}
@media only screen and (max-width: 967px) {
.our_menu{
width:660px;
margin:0 auto;}

}
@media only screen and (max-width: 620px) {
.our_menu{
width:330px;
margin:0 auto;}
}

Пример

Скачать

Установка меню закончена, если есть вопросы, задавайте их в комментариях.