我制作了一个响应式水平菜单，但是当它针对手机和平板电脑缩小尺寸时，菜单列表会叠加在一起。我试图让它变得更小，只有汉堡包图标或菜单才显示。你能帮我吗？这是live link。警告，该页面上会播放自动声音。 menu.js文件位于网站的根目录中。
body {
margin:0;
background-image:url(images/ocean.gif);
font-family:'Georgia;
font-size:100%;
padding-top: 20px;
padding-bottom: 20px;
color:#036;
}
#container {
width:90%;
margin:auto;
background-color:#fff;
}
#logo {
display: block;
width:90%;
margin:0 auto;
}
.tabs {
margin: 0;
padding: 0;
list-style: none;
display: table; /* [1] */
table-layout: fixed; /* [2] */
width: 100%; /* [3] */
}
.tabs__item {
width: 100%;
float: left;
}
@media screen and (min-width: 40em) {
.tabs__item {
display: table-cell; /* [4] */
float: none;
width: auto;
}
}
.tabs__link {
display: block; /* [6] */
}
/**
* Primary nav. Extends `.tabs`.
*
* 1. Stop tabs’ corners leaking out beyond our 4px round.
*/
.primary-nav {
text-align: center;
border-radius: 0;
overflow: hidden; /* [1] */
}
.primary-nav a {
padding: .75em 1em;
color: white;
background: #5EA5B9;
color: #fff;
text-decoration: none;
font-family: Georgia;
font-size: 18px;
}
.primary-nav a:hover {
color: #fff;
background: #FF0000;
}
/* Responsive-nav.js */
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: #5EA5B9;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
@media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
.nav-collapse {
list-style: none;
width: 100%;
float: left;
}
.fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.nav-toggle {
position: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
text-indent: -999px;
position: relative;
overflow: hidden;
width: 70px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #5EA5B9; /* Edit this to change the icon color */
font-family: "responsivenav", Georgia;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 28px;
text-transform: none;
position: absolute;
content: "=";
text-indent: 0;
text-align: center;
line-height: 55px;
speak: none;
width: 100%;
top: 0;
left: 0;
}
.nav-toggle.active::before {
font-size: 24px;
content:"x";
}
#content {
clear:both;
position:relative;
padding:1.5em 5%;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
h1 {
clear:both;
tet-align:center;
}
h2 {
clear:both;
}
h3 {
clear:both;
}
audio {
visibility:hidden;
height:0;
width:0;
}
#pauseplay {
float:right;
width:32px;
height:32px;
cursor:pointer;
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
#social {
margin:auto;
text-align:center;
}
ul.b {
list-style-type: disc;
}
#footer {
background:#5EA5B9;
width:90%;
margin:auto;
text-align:center;
font-family:Georgia;
font-size:90%;
color:#036;
padding:0.5em 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#footer a {
color:#fff;
text-decoration: underline;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Pebble Cove, A Classic Motel. Stay With Us and Enjoy New Hampshire's Seacoast. This relaxed seasonal motel is 1 mile from Odiorne Point State Park, 5.8 miles from the center of Portsmouth and 9.3 miles from the Kittery Outlets shopping mall. Casual suites have free WiFi, full kitchens and TVs with cable channels. Some add extra bedrooms and separate living areas. Amenities include an outdoor swimming pool, a furnished patio and a gazebo, plus a barbecue and picnic area.">
<meta name="keywords" content="Pebble Cove, A Classic Motel, New Hampshire's Seacoast, relaxed seasonal motel, rye beach nh, rye beach nh, rye harbor vacation spots, 1 mile from Odiorne Point State Park, 5.8 miles from center of Portsmouth, 9.3 miles from Kittery Outlets, casual suites, free WiFi, full kitchens, TVs, cable channels, extra bedrooms, separate living area, amenities, outdoor swimming pool, furnished patio, gazebo, barbecue, picnic area, motels, vacation in Rye NH, vacation in Hampton Beach NH, vacation seacoast, motels and hotels, places to stay, discount motels,hotels NH,bed & breakfast, ">
<title>Pebble Cove, A Classic Motel - Stay With Us and Enjoy New Hampshire's Seacoast</title>
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>
<script src="menu.js"></script>
</head>
<body>
<img id="logo" src="images/PebbleCoveMotel_logo.png" alt="Pebble Cove Motel logo">
<div id="container">
<nav class="nav-collapse" role="navigation">
<ul class="tabs primary-nav">
<li class="tabs__item">
<a href="#" class="tabs__link">Home</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Accommodations</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Amenities</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Rates</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Links</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Contact</a>
</li>
</ul>
</nav>
<script type="text/javascript">
<!--
var navigation = responsiveNav(".nav-collapse", {
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 284, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "before", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
openPos: "relative", // String: Position of the opened nav, relative or static
navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
jsClass: "js", // String: 'JS enabled' class which is added to <html> element
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
//-->
</script>
<div id="content">
<div style="text-align: right">
<audio controls loop>
<source src="audio/waves.ogg" type="audio/ogg">
<source src="audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
snd = document.getElementsByTagName('audio')[0],
ctrl = document.getElementById('pauseplay');
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
if(playing){snd.autoplay = true; ctrl.src = 'images/pause.png';}
ctrl.addEventListener('click', function(){
if(playing){
snd.pause();
} else {
snd.play();
}
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
ctrl.src = playing? 'images/pause.png' : 'images/play.png';
}, false);
})();
</script></div>
<h1>Area Attractions</h1>
<p>Enjoy nearby beaches, kayaking, bikepaths, and walking trails. Pebble Cove is 5 minutes to Portsmouth, close to shopping, restaurants, and all area attractions!</p>
<p><a href="http://www.nhstateparks.org/visit/state-parks/wallis-sands-state-beach.aspx">Wallis Sands State Beach</a> offers oceanfront swimming, views of the Isles of Shoals, and a sandy beach that families especially enjoy. Beach amenities include a store that sells a variety of items, food, and drinks; and a large bathhouse with hot and cold showers. The park has a grassy area with picnic tables, but fires are not allowed.</p>
<ul class="b">
<li> <a href="http://www.atlanticwhalewatch.com/" target="_blank">Whalewatching/Fishing</a></li>
<li> <a href="http://www.islesofshoals.com/" target="_blank">Portsmouth Cruises</a></li>
<li> <a href="http://www.nhstateparks.com/odiorne.html" target="_blank">Odiorne Point State Park</a></li>
<li> <a href="http://www.watercountry.com/" target="_blank">Water Country</a></li>
<li> <a href="http://www.portsmouthchamber.org/" target="_blank">Portsmouth Chamber of Commerce</a></li>
<li> <a href="http://www.casinoballroom.com/" target="_blank">Hampton Beach Casino Ballroom</a></li>
<li> <a href="http://www.childrens-museum.org/cmnh/" target="_blank">The Childrens Museum of New Hampshire</a></li>
<li> <a href="http://www.thekitteryoutlets.com/" target="_blank">The Kittery Outlets</a></li>
</ul>
<p>Fantastic fireworks are every week are only 10 miles down Rt. 1 on Hampton Beach. There are 16 fireworks shows in all, to 80 free summer concerts, Hampton Beach has something for everyone. Come marvel at the Masters of Sand Sculpting in June, find out who will be Miss Hampton Beach in July, show off your talent at the annual Hampton Beach Talent competition, or feel like a kid again in August and join us to see off the end of the season with our famous Seafood Festival in September. But please, don't sit around waiting for these and other special events!</p>
<div style="text-align:center;">
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d186637.02907792313!2d-70.85793188067471!3d43.037147979147306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2c0b2dad571d3%3A0xf0f66f2f40db8717!2sPebble+Cove+Motel!5e0!3m2!1sen!2sus!4v1463168351650" width="900" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="footer"><a href="">Pebble Cove Motel</a> 741 Ocean Blvd Rye, NH 03870 <a href="mailto:pebblecovemotel@comcast.net">pebblecovemotel@comcast.net</a> Phone:<a href="tel:603-436-8108">603-436-8108</a></div>
</body>
</html>
答案 0 :(得分：1)
这里缺少的是“.nav-toggle”元素，它将隐藏在“（min-width）”媒体查询下方。在您附加的HTML中，我没有看到这个元素。也许javascripts无法添加此元素，但最佳做法是将其直接放在HTML中以防止重新绘制。
答案 1 :(得分：1)
使用菜单图标修改。
您忘了添加重要的链接。我添加了 jquery库和 js的responsiveNav ，它运行正常。
body {
margin:0;
background-image:url(images/ocean.gif);
font-family:'Georgia;
font-size:100%;
padding-top: 20px;
padding-bottom: 20px;
color:#036;
}
#container {
width:90%;
margin:auto;
background-color:#fff;
}
#logo {
display: block;
width:90%;
margin:0 auto;
}
.tabs {
margin: 0;
padding: 0;
list-style: none;
display: table; /* [1] */
table-layout: fixed; /* [2] */
width: 100%; /* [3] */
}
.tabs__item {
width: 100%;
float: left;
}
@media screen and (min-width: 40em) {
.tabs__item {
display: table-cell; /* [4] */
float: none;
width: auto;
}
}
.tabs__link {
display: block; /* [6] */
}
/**
* Primary nav. Extends `.tabs`.
*
* 1. Stop tabs’ corners leaking out beyond our 4px round.
*/
.primary-nav {
text-align: center;
border-radius: 0;
overflow: hidden; /* [1] */
}
.primary-nav a {
padding: .75em 1em;
color: white;
background: #5EA5B9;
color: #fff;
text-decoration: none;
font-family: Georgia;
font-size: 18px;
}
.primary-nav a:hover {
color: #fff;
background: #FF0000;
}
/* Responsive-nav.js */
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: #5EA5B9;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background:url(http://naitreetgrandir.com/img/layout2013/icons/menu-hamburger.png) no-repeat;
}
a.nav-toggle.active {
background: url(http://www.theplantgallery.com.au/wp-content/themes/thePlantGallery/assets/imgs/close.svg) no-repeat;
}
@media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
.nav-collapse {
list-style: none;
width: 100%;
float: left;
}
.fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.nav-toggle {
position: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
text-indent: -999px;
position: relative;
overflow: hidden;
width: 70px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #5EA5B9; /* Edit this to change the icon color */
font-family: "responsivenav", Georgia;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 28px;
text-transform: none;
position: absolute;
content: "";
text-indent: 0;
text-align: center;
line-height: 55px;
speak: none;
width: 100%;
top: 0;
left: 0;
}
.nav-toggle.active::before {
font-size: 24px;
content:"";
}
#content {
clear:both;
position:relative;
padding:1.5em 5%;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
h1 {
clear:both;
tet-align:center;
}
h2 {
clear:both;
}
h3 {
clear:both;
}
audio {
visibility:hidden;
height:0;
width:0;
}
#pauseplay {
float:right;
width:32px;
height:32px;
cursor:pointer;
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
#social {
margin:auto;
text-align:center;
}
ul.b {
list-style-type: disc;
}
#footer {
background:#5EA5B9;
width:90%;
margin:auto;
text-align:center;
font-family:Georgia;
font-size:90%;
color:#036;
padding:0.5em 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#footer a {
color:#fff;
text-decoration: underline;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Pebble Cove, A Classic Motel. Stay With Us and Enjoy New Hampshire's Seacoast. This relaxed seasonal motel is 1 mile from Odiorne Point State Park, 5.8 miles from the center of Portsmouth and 9.3 miles from the Kittery Outlets shopping mall. Casual suites have free WiFi, full kitchens and TVs with cable channels. Some add extra bedrooms and separate living areas. Amenities include an outdoor swimming pool, a furnished patio and a gazebo, plus a barbecue and picnic area.">
<meta name="keywords" content="Pebble Cove, A Classic Motel, New Hampshire's Seacoast, relaxed seasonal motel, rye beach nh, rye beach nh, rye harbor vacation spots, 1 mile from Odiorne Point State Park, 5.8 miles from center of Portsmouth, 9.3 miles from Kittery Outlets, casual suites, free WiFi, full kitchens, TVs, cable channels, extra bedrooms, separate living area, amenities, outdoor swimming pool, furnished patio, gazebo, barbecue, picnic area, motels, vacation in Rye NH, vacation in Hampton Beach NH, vacation seacoast, motels and hotels, places to stay, discount motels,hotels NH,bed & breakfast, ">
<title>Pebble Cove, A Classic Motel - Stay With Us and Enjoy New Hampshire's Seacoast</title>
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>
<script src="menu.js"></script>
</head>
<body>
<img id="logo" src="images/PebbleCoveMotel_logo.png" alt="Pebble Cove Motel logo">
<div id="container">
<nav class="nav-collapse" role="navigation">
<ul class="tabs primary-nav">
<li class="tabs__item">
<a href="#" class="tabs__link">Home</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Accommodations</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Amenities</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Rates</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Links</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__link">Contact</a>
</li>
</ul>
</nav>
<script type="text/javascript">
<!--
var navigation = responsiveNav(".nav-collapse", {
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 284, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "before", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
openPos: "relative", // String: Position of the opened nav, relative or static
navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active
jsClass: "js", // String: 'JS enabled' class which is added to <html> element
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
//-->
</script>
<div id="content">
<div style="text-align: right">
<audio controls loop>
<source src="audio/waves.ogg" type="audio/ogg">
<source src="audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
snd = document.getElementsByTagName('audio')[0],
ctrl = document.getElementById('pauseplay');
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
if(playing){snd.autoplay = true; ctrl.src = 'images/pause.png';}
ctrl.addEventListener('click', function(){
if(playing){
snd.pause();
} else {
snd.play();
}
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
ctrl.src = playing? 'images/pause.png' : 'images/play.png';
}, false);
})();
</script></div>
<h1>Area Attractions</h1>
<p>Enjoy nearby beaches, kayaking, bikepaths, and walking trails. Pebble Cove is 5 minutes to Portsmouth, close to shopping, restaurants, and all area attractions!</p>
<p><a href="http://www.nhstateparks.org/visit/state-parks/wallis-sands-state-beach.aspx">Wallis Sands State Beach</a> offers oceanfront swimming, views of the Isles of Shoals, and a sandy beach that families especially enjoy. Beach amenities include a store that sells a variety of items, food, and drinks; and a large bathhouse with hot and cold showers. The park has a grassy area with picnic tables, but fires are not allowed.</p>
<ul class="b">
<li> <a href="http://www.atlanticwhalewatch.com/" target="_blank">Whalewatching/Fishing</a></li>
<li> <a href="http://www.islesofshoals.com/" target="_blank">Portsmouth Cruises</a></li>
<li> <a href="http://www.nhstateparks.com/odiorne.html" target="_blank">Odiorne Point State Park</a></li>
<li> <a href="http://www.watercountry.com/" target="_blank">Water Country</a></li>
<li> <a href="http://www.portsmouthchamber.org/" target="_blank">Portsmouth Chamber of Commerce</a></li>
<li> <a href="http://www.casinoballroom.com/" target="_blank">Hampton Beach Casino Ballroom</a></li>
<li> <a href="http://www.childrens-museum.org/cmnh/" target="_blank">The Childrens Museum of New Hampshire</a></li>
<li> <a href="http://www.thekitteryoutlets.com/" target="_blank">The Kittery Outlets</a></li>
</ul>
<p>Fantastic fireworks are every week are only 10 miles down Rt. 1 on Hampton Beach. There are 16 fireworks shows in all, to 80 free summer concerts, Hampton Beach has something for everyone. Come marvel at the Masters of Sand Sculpting in June, find out who will be Miss Hampton Beach in July, show off your talent at the annual Hampton Beach Talent competition, or feel like a kid again in August and join us to see off the end of the season with our famous Seafood Festival in September. But please, don't sit around waiting for these and other special events!</p>
<div style="text-align:center;">
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d186637.02907792313!2d-70.85793188067471!3d43.037147979147306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2c0b2dad571d3%3A0xf0f66f2f40db8717!2sPebble+Cove+Motel!5e0!3m2!1sen!2sus!4v1463168351650" width="900" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="footer"><a href="">Pebble Cove Motel</a> 741 Ocean Blvd Rye, NH 03870 <a href="mailto:pebblecovemotel@comcast.net">pebblecovemotel@comcast.net</a> Phone:<a href="tel:603-436-8108">603-436-8108</a></div>
</body>
</html>