Thiết kế menu nhà hàng với hiệu ứng hover bằng CSS3

CSS 23-8-2015

Tranh thủ mang đến cho các bạn một mẫu thiết kế dành riêng cho menu trong các nhà hàng hay quán ăn, kiểu thiết kế này được làm bằng CSS3 với hiệu ứng hover ảnh.Trong bài viết này mình chỉ sử dụng thuộc tính box shadow và CSS transition.

hover effect, menu, css, thu thuat css, css co ban

Download

HTML

Để menu có khả năng responsive chúng ta cần chèn đoạn code sau bên trong thẻ head.

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

</head>

Sau đó các bạn sử dụng khung chuẩn html như sau :

<!-- start our menu here-->

<div class="our_menu">

    <ul class="menu">

            <li class="item">

               <strong class="new">new</strong>

                  <a href="https://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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://www.thuthuatweb.net">

                    <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>

<!-- end our menu -->

CSS

Tiếp đến ,các bạn sử dụng đoạn css sau để định dạng menu và tạo hiệu ứng hover.

.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}

Cuối cùng là dành cho các kích thước màn hình khác nhau.

@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;}

}

Thế là xong, mình hy vọng là qua bài viết này, các bạn sẽ có thể học hỏi thêm được nhiều về CSS3 cũng như có thêm lựa chọn trong các thiết kế web của mình.