javascript - 响应式水平菜单在调整大小时无法正常工作

Question

我制作了一个响应式水平菜单，但是当它针对移动设备和平板电脑缩小尺寸时，菜单列表会相互堆叠。我试图做到这一点，以便当它更小时，汉堡包图标或菜单只会显示。你能帮我吗？这是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> &nbsp; 741 Ocean Blvd Rye, NH 03870 &nbsp; <a href="mailto:pebblecovemotel@comcast.net">pebblecovemotel@comcast.net</a> &nbsp; Phone:<a href="tel:603-436-8108">603-436-8108</a></div>
</body>
</html>

Answer 1

已编辑，带有菜单图标。

您忘记添加重要链接。我添加了 jquery 库 和 responsiveNav 的 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;
  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> &nbsp; 741 Ocean Blvd Rye, NH 03870 &nbsp; <a href="mailto:pebblecovemotel@comcast.net">pebblecovemotel@comcast.net</a> &nbsp; Phone:<a href="tel:603-436-8108">603-436-8108</a></div>
</body>
</html>