使响应式 jQuery 移动菜单按钮适用于所有小屏幕页面？

Question

我是初学者，我的主导航栏使用响应式 jQuery 移动菜单。小屏幕上的移动菜单按钮（三个水平线）在加载的第一个页面上起作用，但随后恢复到原始导航栏（见下图）。有没有办法多次运行代码，以便它每次在每个页面上运行s？谢谢你的时间！

相关代码如下...

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });

          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };

          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }

        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }

          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });

  $("#cssmenu a").each(function() {
   var linkTitle = $(this).text();
   $(this).attr('data-title', linkTitle);
  });
});

});
})(jQuery);

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #e9e9e9;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: black;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #e9e9e9;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: black;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #059;
  background: #e9e9e9;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #e9e9e9;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: black;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #e9e9e9;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: black;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: black;
}

#sessionrecord img,
#login img,
#email img,
#viewsessions img,
#register img {
  display: block;
  position: relative;
  margin: 0 auto;
  padding-top: 20px;
}

#home img {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px; 
  margin-bottom: -30px;
}

.ui-page .ui-footer p {
    margin-left: 77%;
    font-size: 12px;
    color: black;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1; minimum-scale=1;">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <link href="/projects/ibill_v3/css/mainstyles.css" rel="StyleSheet"/>
  <link href="/projects/ibill_v3/css/register.css" rel="StyleSheet"/>
  <link href="/projects/ibill_v3/css/login.css" rel="StyleSheet"/>
  <link href="/projects/ibill_v3/css/home.css" rel="StyleSheet"/>
  <link href="/projects/ibill_v3/css/record_session.css" rel="StyleSheet"/>
  <link href="/projects/ibill_v3/css/viewsessions.css" rel="StyleSheet"/>
  <link href="/projects/ibill_v3/css/email.css" rel="StyleSheet"/>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="script.js"></script>
  <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
  <script type='text/javascript'>
            $(document).on('pageinit', function(){
                $('#registerForm').validate({ // initialize the plugin
                    // rules & options
                });
            });  
  </script>
  <script type='text/javascript'>
            $(document).on('pageinit', function(){
                $('.loginform').validate({ // initialize the plugin
                    // rules & options
                });
            });  
  </script>

</head>

<body>
 <!--********************************REGISTER PAGE**********************************************-->
<!--****************************************************************************************-->

<!--********************************HEADER**********************************************-->
<div data-role="page" id="register">
    <div data-role="header" data-id="foo1" data-position="fixed">
    <div id='cssmenu'>
      <ul>
         <li class='active'><a href='#home'>Home</a></li>
         <li><a href='#sessionrecord'>Record a Session</a></li>
         <li><a href='#viewsessions'>View Sessions</a></li>
         <li><a href='#email'>E-mail an Invoice</a></li>
      </ul>
    </div>
  </div>
<!--********************************HEADER**********************************************-->

<!--********************************MAIN**********************************************-->
  <div data-role="main" class="ui-content">
    
    <img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190">
        <section class="registerform">
          <h1>The iBill Invoicing App for Activity Instructors</h1>
          <p>Register below</p>
              <form action="register.php" id="registerForm">
                <ul>
                  <li>
                    <label for="username">Username</label>
                    <input type="text" name="username" id="username" class="required" minlength="5" placeholder="enter username (min-5 characters)">
                  </li>

                  <li>
                    <label for="firstname">Firstname</label>
                    <input type="text" name="firstname" id="firstname" class="required" minlength="5" placeholder="enter firstname">
                  </li>

                  <li>
                    <label for="username">Surname</label>
                    <input type="text" name="surname" id="surname" class="required" minlength="5" placeholder="enter surname">
                  </li>

                  <li> 
                    <label for="email">Email</label>
                    <input type="email" name="email" id="email" class="required email" placeholder="yourname@email.com">
                  </li>

                  <li> 
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" class="required" minlength="6" placeholder="enter password">
                  </li>

                  <li> 
                    <label for="confirmpassword">Confirm Password</label>
                    <input type="password" name="confirmpassword" id="confirmpassword" class="required" minlength="6" placeholder="re-enter password">
                  </li>
                <div id="registerbutton">
                      <input type="submit" value="Register">
                </div>
                </ul>
              </form>
        </section>

  </div>
<!--********************************MAIN**********************************************-->

<!--********************************FOOTER**********************************************-->
  <div data-role="footer">
    <footer class="footer">
        <p>awilliams&copy;</p>
    </footer>
  </div>
</div>
<!--********************************REGISTER PAGE**********************************************-->
<!--****************************************************************************************-->
 


<!--********************************LOGIN PAGE**********************************************-->
<!--****************************************************************************************-->

<!--********************************HEADER**********************************************-->
<div data-role="page" id="login">
    <div data-role="header" data-id="foo1" data-position="fixed">
    <div id='cssmenu'>
      <ul>
         <li class='active'><a href='#home'>Home</a></li>
         <li><a href='#sessionrecord'>Record a Session</a></li>
         <li><a href='#viewsessions'>View Sessions</a></li>
         <li><a href='#email'>E-mail an Invoice</a></li>
      </ul>
    </div>
  </div>
<!--********************************HEADER**********************************************-->

<!--********************************MAIN**********************************************-->
  <div data-role="main" class="ui-content">
    
    <img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190">
        
        <section class="loginform">
              <form action="form.php" method="post"> 
                  <ul>
                    <li><label for="usermail">Email</label>
                      <input type="email" name="usermail" placeholder="yourname@email.com" class="required"></li>
                    <li><label for="password">Password</label>
                      <input type="password" name="password" placeholder="enter password"  minlength="6"></li>
                    <li>
                    <div id="loginbutton">
                      <input type="submit" value="Login"></li>
                    </div>
                    <div id="registerbutton">
                      <input type="submit" value="Register"></li>
                    </div>
                  </ul>
              </form>
        </section>

  </div>
<!--********************************MAIN**********************************************-->

<!--********************************FOOTER**********************************************-->
  <div data-role="footer">
    <footer class="footer">
        <p>awilliams&copy;</p>
    </footer>
  </div>
</div>
<!--********************************LOGIN PAGE**********************************************-->
<!--****************************************************************************************-->

<!--********************************HOME PAGE**********************************************-->
<!--***************************************************************************************-->

<!--********************************HEADER**********************************************-->
<div data-role="page" id="home">
    <div data-role="header" data-id="foo1" data-position="fixed">
    <div id='cssmenu'>
     <ul>
        <li class='active'><a href='#home'>Home</a></li>
           <li><a href='#sessionrecord'>Record a Session</a></li>
           <li><a href='#viewsessions'>View Sessions</a></li>
           <li><a href='#email'>E-mail an Invoice</a></li>
     </ul>
    </div>
    </div><!-- /header -->
<!--********************************HEADER**********************************************-->

<!--********************************MAIN**********************************************-->
  <div data-role="main" class="ui-content">
    
    <img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190">
        
        <section class="maincontent">
                <h1>The iBill Invoicing App for Activity Instructors</h1>
                  <p>iBill is a cross-platform app that allows you track and manage activity sessions on the go.</p>
                  <br> 
                  <p>Record an activity session to get started!</p>
                <div style="text-align:center">
                  <a href="#sessionrecord" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-shadow">Record a Session</a>
                </div>
        </section>
  </div>
<!--********************************MAIN**********************************************-->

<!--********************************FOOTER**********************************************-->
  <div data-role="footer">
    <footer class="footer">
        <p>awilliams&copy;</p>
    </footer>
  </div>
</div>
<!--********************************FOOTER**********************************************-->

<!--********************************HOME PAGE**********************************************-->
<!--***************************************************************************************-->

<!--********************************RECORD SESSION PAGE************************************-->
<!--***************************************************************************************-->

<!--********************************HEADER**********************************************-->
<div data-role="page" id="sessionrecord">
    <div data-role="header" data-id="foo1" data-position="fixed">
    <div id='cssmenu'>
      <ul>
        <li class='active'><a href='#home'>Home</a></li>
        <li><a href='#sessionrecord'>Record a Session</a></li>
        <li><a href='#viewsessions'>View Sessions</a></li>
        <li><a href='#email'>E-mail an Invoice</a></li>
      </ul>
    </div>
  </div><!-- /header -->
<!--********************************HEADER**********************************************-->

<!--********************************MAIN**********************************************-->
  <div data-role="main" class="ui-content">
    
    <img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190">
        
        <section class="maincontent">
          <h1>Record a session using the form below</h1>
            <form method="post" action="PHP HERE" id="sessionRecord">
              <fieldset>
                  <select name="typeofactivity" id="typeofactivity" data-native-menu="false">
                    <option>Type of Session</option>
                    <option value="surf">Surf</option>
                    <option value="coast">Coasteer</option>
                    <option value="bodyboard">Bodyboard</option>
                    <option value="climbing">Cornish Challenge</option>
                  </select>
              </fieldset>
              <fieldset>
                  <select name="employer" id="employer" data-native-menu="false">
                    <option>Employer</option>
                    <option value="nac">Newquay Activity Centre</option>
                    <option value="coastline">Coastline Coasteer</option>
                  </select>
              </fieldset>
              <form method="post" action="PHP HERE!">
                  <label for="datetime">Date and Time of Session</label>
                  <input type="datetime-local" data-clear-btn="false" name="datetime" id="datetime" value="">
              </form>
              <form method="post" action="PHP HERE!">
                  <label for="amount">Amount (GBP)</label>
                  <input type="number" data-clear-btn="true" name="amount" id="amount" value="">
              </form>
                <div id="submitbutton">
                  <input type="submit" value="Submit">
                </div>
            </form>

        </section>
  </div>
<!--********************************MAIN**********************************************-->

<!--********************************FOOTER**********************************************-->
  <div data-role="footer">
    <footer class="footer">
        <p>awilliams&copy;</p>
    </footer>
  </div>
</div>
<!--********************************FOOTER**********************************************-->

<!--********************************RECORD SESSION PAGE************************************-->
<!--***************************************************************************************-->

<!--********************************VIEW SESSIONS PAGE************************************-->
<!--***************************************************************************************-->

<!--********************************HEADER**********************************************-->
<div data-role="page" id="viewsessions">
    <div data-role="header" data-id="foo1" data-position="fixed">
    <div id='cssmenu'>
      <ul>
         <li class='active'><a href='#home'>Home</a></li>
         <li><a href='#sessionrecord'>Record a Session</a></li>
         <li><a href='#viewsessions'>View Sessions</a></li>
         <li><a href='#email'>E-mail an Invoice</a></li>
      </ul>
    </div>
  </div><!-- /header -->
<!--********************************HEADER**********************************************-->

<!--********************************MAIN**********************************************-->
  <div data-role="main" class="ui-content">
    
    <img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190">
        
        <section class="maincontent">
                <!--MAIN CONTENT GOES HERE-->
        </section>
  </div>
<!--********************************MAIN**********************************************-->

<!--********************************FOOTER**********************************************-->
  <div data-role="footer">
    <footer class="footer">
        <p>awilliams&copy;</p>
    </footer>
  </div>
</div>
<!--********************************FOOTER**********************************************-->

<!--********************************VIEW SESSIONS PAGE************************************-->
<!--***************************************************************************************-->


<!--********************************EMAIL AN INVOICE PAGE************************************-->
<!--***************************************************************************************-->

<!--********************************HEADER**********************************************-->
<div data-role="page" id="email">
    <div data-role="header" data-id="foo1" data-position="fixed">
    <div id='cssmenu'>
      <ul>
         <li class='active'><a href='#home'>Home</a></li>
         <li><a href='#sessionrecord'>Record a Session</a></li>
         <li><a href='#viewsessions'>View Sessions</a></li>
         <li><a href='#email'>E-mail an Invoice</a></li>
      </ul>
    </div>
  </div><!-- /header -->
<!--********************************HEADER**********************************************-->

<!--********************************MAIN**********************************************-->
  <div data-role="main" class="ui-content">
    
    <img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="250" height="190">
        
        <section class="maincontent">
                <!--MAIN CONTENT GOES HERE-->
        </section>
  </div>
<!--********************************MAIN**********************************************-->

<!--********************************FOOTER**********************************************-->
  <div data-role="footer">
    <footer class="footer">
        <p>awilliams&copy;</p>
    </footer>
  </div>
</div>
<!--********************************FOOTER**********************************************-->

<!--********************************EMAIL AN INVOICE PAGE************************************-->
<!--***************************************************************************************-->

</body>

Answer 1

简而言之，ID 标签在 HTML 文档中应该是唯一的。工作解决方案：

(function($) {

    $.fn.menumaker = function(options) {

      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);

      //return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });

          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };

          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }

        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }

          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();

        return $(window).on('resize', resizeFix);
    };
})(jQuery);

(function($){
    $(document).ready(function() {
      $(".cssmenu").menumaker({
        title: "Menu",
        format: "dropdown"
      });

      $(".cssmenu a").each(function() {
        var linkTitle = $(this).text();
        $(this).attr('data-title', linkTitle);
      });

    });
})(jQuery);

全部更改

<div id='cssmenu'>

到

<div class='cssmenu'>

并为您更新 CSS:

.cssmenu,
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul li a,
.cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cssmenu:after,
.cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.cssmenu #menu-button {
  display: none;
}
.cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
.cssmenu > ul {
  background: #e9e9e9;
}
.cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
.cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
.cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
.cssmenu.align-right > ul > li {
  float: right;
}
.cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #e9e9e9;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.cssmenu > ul > li.active > a {
  color: black;
}
.cssmenu > ul > li:hover > a,
.cssmenu > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
.cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: black;
  background: #e9e9e9;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
.cssmenu > ul > li:hover > a::before,
.cssmenu > ul > li > a:hover::before {
  background: #e9e9e9;
}
.cssmenu.small-screen {
  width: 100%;
}
.cssmenu.small-screen > ul,
.cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
.cssmenu.small-screen > ul > li,
.cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
.cssmenu.small-screen > ul > li:hover > a,
.cssmenu.small-screen > ul > li > a:hover {
  color: black;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
.cssmenu.small-screen > ul > li > a::before {
  display: none;
}
.cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #e9e9e9;
}
.cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  width: 22px;
  height: 3px;
}
.cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}
.cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: black;
}
.cssmenu.small-screen #menu-button.menu-opened:before {
  background: black;
}

#sessionrecord img,
#home img,
#login img,
#email img,
#viewsessions img {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.ui-page .ui-footer p {
    margin-left: 77%;
    font-size: 12px;
    color: black;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
}

使响应式 jQuery 移动菜单按钮适用于所有小屏幕页面？

Making a responsive jQuery mobile menu button work on all small screen pages?

html

css

navbar

jquery-mobile

responsive