Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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;}
}

Пример

Скачать

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X