响应式和多级菜单

时间：2013-10-01 07:06:48

标签： javascript html css

大家好日子，我有以下菜单，我已经工作了很长一段时间。有些部分基于我在互联网上找到的教程，其他部分是从头开始编写的。

Live Example

到目前为止，我仅在Chrome上测试过，我不确定其他浏览器，但是当我将浏览器调整为＆lt; 480px，菜单按钮将显示，然后如果我想点击文档，子菜单不会打开，我找不到解决方案。

HTML 

<div class="navbar fixed-top navbar-theme-blue-marina">
    <div class="inner-navbar">
      <a href="#" class="brand pull-left">Text Here</a>
      <div class="page">
        <nav id="menu" class="nav" role="navigation">
          <ul>
            <li><a  href="#" id="menutoggle" class="navtoggle" title=""><span><i aria-hidden="true"  class="icon-home"></i></span>Home</a>
            </li>
            <li class="inactive-dropdown" id="dropdown" >
              <a href="#" title=""><span><i aria-hidden="true" class="icon-home"></i></span>Docs</a>
              <ul class="nav">
                <li>
                  <a href="#" title=""><span><i aria-hidden="true" class="icon-code"></i></span>ssss</a></li> 
                <li>
                  <a  href="#" title=""><span><i aria-hidden="true" class="icon-qrcode"></i></span>Portfolio</a></li>
                <li>
                  <a  href="#" title=""><span><i aria-hidden="true" class="icon-print"></i></span>Blog</a> </li>
                <li>
                  <a  href="#" title=""><span><i aria-hidden="true" class="icon-heart"></i></span>The  team</a></li>
                <li><a  href="#" title=""><span><i aria-hidden="true" class="icon-envelope"></span></i>Contact</a></li>
              </ul>
            </li>
            <li><a  href="#" title=""><span><i aria-hidden="true" class="icon-qrcode"></i></span>Portfolio</a></li>
            <li><a  href="#" title=""><span><i aria-hidden="true" class="icon-print"></i></span>Blog</a> </li>
            <li><a  href="#" title=""><span><i aria-hidden="true" class="icon-heart"></i></span>The  team</a></li>
            <li><a  href="#" title=""><span><i aria-hidden="true" class="icon-envelope"></span></i>Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>

CSS 

.button {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  display: block;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  background: #428bca;
  border: 0px none;
  outline: 0px none;
}
.button:hover {
  background: #d9534f;
}
.button:active {
  background: #5bc0de;
}
.button-group {
  position: relative;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  font-size: 16px;
  vertical-align: middle;
  white-space: nowrap;
  *margin-left: .3em;
}
.button-group:first-child {
  *margin-left: 0;
}
.button-group:first-child {
  *margin-left: 0;
}
.button-group + .button-group {
  margin-left: 5px;
}
.button-group,
.button {
  display: inline-block;
}
.input-append .input-prepend {
  width: 25px;
}
.add-on {
  float: left;
  border-width: 1px 0px 1px 1px;
  border-color: #ccc;
  border-style: solid;
  padding: 7px;
}
body {
  background-color: #fff;
}
.navbar [class^="icon-"],
[class*=" icon-"] {
  display: block;
  font-size: 2em;
  line-height: 24px;
  line-height: 1.5rem;
  vertical-align: middle;
  background-repeat: no-repeat;
}
.navbar {
  background-color: #4d4d4d;
  width: 100%;
  -webkit-box-shadow: 0 0 0.9em #555555;
  box-shadow: 0 0 0.9em #555555;
}
.inner-navbar .brand {
  color: #fff;
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.5em;
  padding-left: 24px;
  padding-left: 1.5rem;
  padding-right: 24px;
  padding-right: 1.5rem;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
  display: block;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}
.inner-navbar .brand sub,
sup {
  padding-left: 5px;
  padding-left: 0.3125rem;
  font-size: .5em;
}
.inner-navbar .brand:hover {
  color: #191919;
  text-decoration: none;
  background-color: #1c87ad;
  -webkit-transition: background 0.6s ease-in-out;
  -moz-transition: background 0.6s ease-in-out;
  -o-transition: background 0.6s ease-in-out;
  transition: background 0.6s ease-in-out;
}
.navbar-inner {
  width: 100%;
}
.navbar-theme-blue-marina {
  background: #2aa4cf;
}
.inner-navbar nav {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-family: Arial, sans-serif;
  z-index: 1000;
}
.inner-navbar nav button#menutoggle {
  display: none;
}
.inner-navbar nav ul {
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
.inner-navbar nav li {
  display: block;
  float: left;
  width: 130px;
  width: 8.125rem;
}
.inner-navbar nav li:first-child,
a {
  border-left: 0;
}
.inner-navbar nav a {
  padding: 5px;
  padding: 0.3125rem;
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.5em;
  -webkit-transition: background 0.6s ease-in-out;
  -moz-transition: background 0.6s ease-in-out;
  -o-transition: background 0.6s ease-in-out;
  transition: background 0.6s ease-in-out;
}
.inner-navbar nav a:hover {
  background: #1c87ad;
  -webkit-transition: background 0.6s ease-in-out;
  -moz-transition: background 0.6s ease-in-out;
  -o-transition: background 0.6s ease-in-out;
  transition: background 0.6s ease-in-out;
}
.inner-navbar nav a:active,
nav a.selected,
nav a:active:hover,
nav a.selected:hover {
  background: #08607f;
}
.inactive-dropdown ul {
  display: none;
}
.active-dropdown ul {
  display: block;
  position: absolute;
}
.active-dropdown {
  background: #1f2024;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  list-style: none;
  -webkit-transition: opacity .25s ease .1s;
  -moz-transition: opacity .25s ease .1s;
  -o-transition: opacity .25s ease .1s;
  -ms-transition: opacity .25s ease .1s;
  transition: opacity .25s ease .1s;
}
.active-dropdown li {
  display: list-item;
  float: left;
  clear: both;
  background-color: #2aa4cf;
  width: 160px;
  position: relative;
  -webkit-transition: height .25s ease .1s;
  -moz-transition: height .25s ease .1s;
  -o-transition: height .25s ease .1s;
  -ms-transition: height .25s ease .1s;
  transition: height .25s ease .1s;
}
.active-dropdown li a {
  display: block;
  width: 100%;
  color: #fff;
  display: inline-block;
  text-align: left;
  text-decoration: none;
  line-height: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
/*  ------------------------------  RESPONSIVE STYLES ----------------------------------------------------*/
@media screen and (max-width: 1024px) {

}
/*Styles for screen 768px and lower*/
@media screen and (max-width: 768px) {
  .inner-navbar nav {
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .inner-navbar nav ul {
    float: none;
    width: 100%;
    display: block;
    height: auto;
  }
  .inner-navbar .brand {
    display: none;
  }
  .inner-navbar nav li {
    width: 50%;
    float: left;
    position: relative;
    border-left: 0 solid #666;
  }
  .inner-navbar nav li a {
    border-left: 0;
    padding: 10px 0;
    background: #383838;
  }
  .inner-navbar nav li a:hover {
    background: #636363;
  }
  .inner-navbar nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
  }
}
@media only screen and (max-width: 600px) {

}
/*Styles for screen 515px and lower*/
@media only screen and (max-width: 480px) {
  .inner-navbar nav {
    border-bottom: 0;
  }
  .inner-navbar nav ul {
    display: none;
    height: auto;
  }
  .inner-navbar nav li {
    width: 100%;
    float: none;
    position: relative;
    border-left: 0 solid #666;
  }
  .inner-navbar nav li a {
    border-bottom: 1px solid #0c0a0d;
  }
  .inner-navbar nav button#menutoggle {
    display: block;
    background-color: #242424;
    width: 100%;
    position: relative;
  }
  .inner-navbar nav button#menutoggle {
    zoom: 1;
  }
  .inner-navbar nav button#menutoggle:before {
    content: '';
    /* 1 */

    display: block;
    /* 2 */

  }
  .inner-navbar nav button#menutoggle:after {
    content: '';
    display: table;
    clear: both;
  }
  /* When JavaScript is enabled, we hide the menu */
  .js .inner-navbar nav ul {
    max-height: 0;
    overflow: hidden;
    display: block;
  }
  /* Displaying the menu when the user has clicked on the button */
  .js .inner-navbar nav .active + ul {
    max-height: 30em;
    -webkit-transition: max-height 0.4s;
    -moz-transition: max-height 0.4s;
    -o-transition: max-height 0.4s;
    transition: max-height 0.4s;
  }
}
/*Smartphone*/
@media only screen and (max-width: 320px) {
  .inner-navbar nav li {
    display: block;
    float: none;
    width: 100%;
  }
  .inner-navbar nav li a {
    border-bottom: 1px solid #0c0a0d;
  }
  .inner-navbar .brand {
    color: #fff;
    font-size: 50px;
    font-size: 3.125rem;
    line-height: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
    font-family: Calibri, Arial, Helvetica, sans-serif;
  }
  .inner-navbar .brand sub,
  sup {
    padding-left: .3em;
    font-size: .5em;
  }
  .inner-navbar .brand:hover {
    color: #191919;
    text-decoration: none;
    background-color: #1c87ad;
    -webkit-transition: background 0.6s ease-in-out;
    -moz-transition: background 0.6s ease-in-out;
    -o-transition: background 0.6s ease-in-out;
    transition: background 0.6s ease-in-out;
  }
}
/* RETINA */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

}

的JavaScript 

(function(root) {

    var elements = {};

    function s(id) {
        if (!elements[id]) {
            elements[id] = document.getElementById(id);
        }
        return elements[id];
    }

    function bindUIActions() {
        menuElements();
        s('dropdown').onclick = function(e) {
            goDropDown();

            e.stopPropagation();
        };
        s('menu').onclick = function(e) {
            goResponsive();

            e.stopPropagation();
        };
        //hideMenu();
    }

    function menuElements() {
        var menuElements = s('menu');
        menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle button" aria-hidden="true"><i aria-hidden="true" class="icon-coffee"> </i> Menu</button>');
    }

    function hideMenu() {
        document.onclick = function(e) {
            var mobileButton = s('menutoggle');
            var buttonStyle = mobileButton.currentStyle
                ? mobileButton.currentStyle.display
                : getComputedStyle(mobileButton, null).display;
            if (buttonStyle === 'block'
             && e.target !== mobileButton
             && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
                changeClass(mobileButton, 'navtoogle active', 'navtoogle');
            }
        }
    }
    function hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
    function changeClass(r, className1 , className2) {
        var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
        if (regex.test(r.className)) {
            r.className = r.className.replace(regex, ' '+ className2 + ' ');
        } else {
            r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+ className1 +' ');
        }
        return r.className;
    }

    function goResponsive() {
        //  Toggle the class on click to show / hide the menu
        changeClass(s('menutoggle'), 'navtoogle active', 'navtoogle');
    }

    function goDropDown() {
        changeClass(s('dropdown'), 'inactive-dropdown', 'active-dropdown');
    }

    root.NavigationWidget = {
        init: function() {
            bindUIActions();
        }
    };

})(this);
NavigationWidget.init();

1 个答案:

答案 0 :(得分：1)

尝试将此添加到＆lt;中的css中480px部分：

.navtoogle.active + ul {
  display: block;
}
相关问题
最新问题