HTML网站源码-餐厅菜单介绍响应式网页模板-适配移动端&PC端.zip资源-CSDN文库

共35个文件

jpg：11个

png：10个

js：6个

版权申诉

HTML

网站源码

JavaScript

网站模板

130 浏览量 2024-03-30 11:50:06 上传评论收藏 596KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML网站源码-餐厅菜单介绍响应式网页模板-适配移动端&PC端.zip （35个子文件）

HTML网站源码-餐厅菜单介绍响应式网页模板-适配移动端&PC端

html

jquery.wmuSlider.js 12KB

jquery.responsiveTabs.js 20KB

easing.js 5KB

move-top.js 1KB

jquery.flexisel.js 8KB

jquery.min.js 92KB

css

style.css 23KB

bootstrap.css 118KB

index.html 15KB

images

arrow.1.png 650B

midbanner.jpg 61KB

2.jpg 8KB

10.png 8KB

9.png 8KB

menu.png 331B

6.jpg 33KB

banner.jpg 46KB

logo.png 22KB

1.jpg 7KB

footer.png 5KB

11.png 7KB

5.jpg 45KB

basics-02-128.png 516B

img-sprite.png 3KB

close.png 725B

8.jpg 13KB

3.jpg 9KB

7.jpg 18KB

banner2.jpg 36KB

4.jpg 45KB

fonts

Aleo-Bold-webfont.woff 38KB

Aleo-Bold-webfont.ttf 73KB

Aleo-Bold-webfont.eot 34KB

stylesheet.css 383B

Aleo-Bold-webfont.svg 258KB

<!DOCTYPE HTML> <html> <head> <title>Menu a Bootstarp Website Template | Home :: w3layouts</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery.min.js"></script> <link href='http://222.178.203.72:19005/whst/63/_enmsrzfnnfkdZohrzbnl//css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1200); }); }); </script> <script type="text/javascript"> $(document).ready(function() { /* var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script> </head> <body>  <div class="banner"> <div class="container"> <div class="header"> <div class="menu"> <a href="#" class="right_bt" id="activator"><img src="images/menu.png" alt=""/></a> <div class="box" id="box"> <div class="box_content"> <div class="menu_box_list"> <ul> <li class="active"><a href="#home" class="scroll">home</a></li> <li><a href="#about" class="scroll">About us</a></li> <li><a href="#services" class="scroll">Services</a></li> <li><a href="#portfolio" class="scroll">portfolio</a></li> <li><a href="#contact-us" class="scroll">contact </a></li> <div class="clearfix"></div> </ul> </div> <a class="boxclose" id="boxclose"><img src="images/close.png" alt=""/></a> </div> </div> <script type="text/javascript" src="js/easing.js"></script> <script type="text/javascript"> var $ = jQuery.noConflict(); $(function() { $('#activator').click(function(){ $('#box').animate({'top':'0px'},500); }); $('#boxclose').click(function(){ $('#box').animate({'top':'-700px'},500); }); }); $(document).ready(function(){ //Hide (Collapse) the toggle containers on load $(".toggle_container").hide(); //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) $(".trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; //Prevent the browser jump to the link anchor }); }); </script> </div> <div class="clearfix"></div> </div> <div class="logo"> <a href="#"><img src="images/logo.png" alt=""></a> </div> <div class="banner-info"> <h1>We Provide The Best Food At The<span> Right Price.</span></h1> </div> </div> </div>   <div class="happy" id="home"> <div class="col-md-3 happy-1"> <h5>Happy Hour</h5> <h6>Part Time</h6> </div> <div class="col-md-3 happy-2"> <h4>Breakfast</h4> </div> <div class="col-md-3 happy-3"> <h4>Lunch</h4> </div> <div class="col-md-3 happy-4"> <h4>Dinner</h4> </div> <div class="clearfix"></div> </div>   <div class="fast food" id="services"> <div class="container"> <div class="col-md-6 fast-left"> <img src="images/4.jpg" class="img-responsive" alt=""> </div> <div class="col-md-6 fast-right"> <h3>Fast Food</h3> <h5>You'll love our delicious fastfood</h5> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p> <a class="view" href="#">VIEW GALLERY<i class="arrow-rt1"></i></a> </div> <div class="clearfix"></div> <div class="fast-foo"> <div class="col-md-6 fast-right1"> <h3>Drinks</h3> <h5>We also produce delicious drinks</h5> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p> <a class="view" href="#">VIEW GALLERY<i class="arrow-rt1"></i></a> </div> <div class="col-md-6 fast-left1"> <img src="images/5.jpg" class="img-responsive" alt=""> </div> <div class="clearfix"></div> </div> </div> </div>   <div class="ourteam" id="portfolio"> <div class="container"> <div class="team"> <div class="product-tabs">  <div id="horizontalTab"> <ul> <li><a href="#tab-1">Fast Food</a></li> <li><a href="#tab-2">Drinks</a></li> <li><a href="#tab-3">Chicken</a></li> <li><a href="#tab-4">Rice</a></li> </ul> <div id="tab-1" class="product-complete-info">   <ul id="flexiselDemo3"> <li> <div class="team1"> <img src="images/8.jpg" class="img-responsive" alt="" /> <h4>Chicken Burger</h4> </div> </li> <li> <div class="team1"> <img src="images/7.jpg" class="img-responsive" alt="" /> <h4>Beef Burger</h4> </div> </li> <li> <div class="team1"> <img src="images/6.jpg" class="img-responsive" alt="" /> <h4>Chicken Pizza</h4> </div> </li> <li> <div class="team1"> <img src="images/7.jpg" class="img-responsive" alt="" /> <h4>Beef Burger</h4> </div> </li> <li> <div class="team1"> <img src="images/8.jpg" class="img-responsive" alt="" /> <h4>Chicken Burger</h4> </div> </li> </ul> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo3").flexisel({ visibleItems: 3, animationSpeed: 1000, autoPlay: true, autoPlaySpeed: 3000, pauseOnHover: true, enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); }); </script> <scri

评论收藏

内容反馈

版权申诉