搜索
搜索

无法在 CSS 菜单中设置活动类

Shawn 发表于 Dev
19
肖恩

我有一个 CSS 菜单，我想在其中将类设置为单击菜单项的“活动”。我可以“找到”点击的项目并尝试设置活动类

$(this).addClass("active");

但它不坚持。

为什么？

js小提琴

$(document).on("click", "#newSubmission", function() {
  makeActive(this);
});

function makeActive(obj) {
  var tid = $(obj).attr("id");
  $("#cssmenu > ul > li").each(function() {
    if (tid === $(this).attr("id")) {
      $("#result").append("found match<br>")
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
      $("#result").append("no match<br>")
    }
  });
}

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

    $("#cssmenu").menumaker({
      title: "Menu",
      breakpoint: 100,
      format: "multitoggle"
    });

    $("#cssmenu").prepend("<div id='menu-line'></div>");

    var foundActive = false,
      activeElement, linePosition = 0,
      menuLine = $("#cssmenu #menu-line"),
      lineWidth, defaultPosition, defaultWidth;

    $("#cssmenu > ul > li").each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
        foundActive = true;
      }
    });

    if (foundActive === false) {
      activeElement = $("#cssmenu > ul > li").first();
    }

    defaultWidth = lineWidth = activeElement.width();

    defaultPosition = linePosition = activeElement.position().left;

    menuLine.css("width", lineWidth);
    menuLine.css("left", linePosition);

    $("#cssmenu > ul > li").hover(function() {
      activeElement = $(this);
      lineWidth = activeElement.width();
      linePosition = activeElement.position().left;
      menuLine.css("width", lineWidth);
      menuLine.css("left", linePosition);
    }, function() {
      menuLine.css("left", defaultPosition);
      menuLine.css("width", defaultWidth);
    });

  });
})(jQuery);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#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 {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #b70102;
  width: auto;
}

#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #f3f3f3;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  padding: 20px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
  color: #f3f3f3;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 25px;
}

#cssmenu>ul>li.has-sub>a::after {
  position: absolute;
  top: 22px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu>ul>li.has-sub:hover>a::after {
  border-color: #f3f3f3;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  right: 0;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}

#cssmenu ul li:hover>ul>li {
  height: 32px;
}

#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}

#cssmenu ul ul li.has-sub>a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu.align-right ul ul li.has-sub>a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

#cssmenu ul ul li.has-sub:hover>a::after {
  border-color: #ffffff;
}

#cssmenu.small-screen {
  width: 100%;
}

#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}

#cssmenu.small-screen.align-center>ul,
#cssmenu.small-screen.align-right ul ul {
  text-align: left;
}

#cssmenu.small-screen ul li,
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen ul li:hover>ul>li {
  width: 100%;
  height: auto;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
}

#cssmenu.small-screen>ul>li,
#cssmenu.small-screen.align-center>ul>li,
#cssmenu.small-screen.align-right>ul>li {
  float: none;
  display: block;
}

#cssmenu.small-screen ul ul li a {
  padding: 20px 20px 20px 30px;
  font-size: 14px;
  color: #ffffff;
  background: none;
}

#cssmenu.small-screen ul ul li:hover>a,
#cssmenu.small-screen ul ul li a:hover {
  color: #ffffff;
}

#cssmenu.small-screen ul ul ul li a {
  padding-left: 40px;
}

#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul {
  position: relative;
  left: 0;
  right: auto;
  width: 100%;
  margin: 0;
}

#cssmenu.small-screen>ul>li.has-sub>a::after,
#cssmenu.small-screen ul ul li.has-sub>a::after {
  display: none;
}

#cssmenu.small-screen #menu-line {
  display: none;
}

#cssmenu.small-screen #menu-button {
  display: block;
  padding: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
}

#cssmenu.small-screen #menu-button::after {
  content: '';
  position: absolute;
  top: 21px;
  right: 20px;
  display: block;
  width: 15px;
  height: 2px;
  background: #ffffff;
}

#cssmenu.small-screen #menu-button::before {
  content: '';
  position: absolute;
  top: 26px;
  right: 20px;
  display: block;
  width: 15px;
  height: 3px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.15);
  height: 54px;
  width: 54px;
  cursor: pointer;
}

#cssmenu.small-screen .submenu-button::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 27px;
  display: block;
  width: 1px;
  height: 11px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 27px;
  display: block;
  width: 11px;
  height: 1px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button.submenu-opened:after {
  display: none;
}

#cssmenu.small-screen.select-list {
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<div id="cssmenu" class="align-center">
  <ul>
    <li id="editHome"><a href="#">Edit</a></li>
    <li id="newSubmission"><a href="#">new submission</a></li>
    <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart"></i> reports</a>
      <ul>
        <li><a href="#">Dr.&#39;s notes</a></li>
        <li><a href="#">number of samples</a></li>
        <li><a href="#">arrival temperatures</a></li>
        <li><a href="#">culture count</a></li>
        <li class="has-sub"><a href="#">summaries</a>
          <ul>
            <li><a href="#">% of target</a></li>
            <li><a href="#">stored motility</a></li>
            <li><a href="#">morphology</a></li>
            <li><a href="#">motility</a></li>
            <li><a href="#">TSD</a></li>
            <li><a href="#">CSA report for TSD date range</a></li>
            <li><a href="#">culture summary  by submission</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="has-sub active"><a href="#">setup</a>
      <ul>
        <li><a href="#">users</a></li>
        <li><a href="#">clients</a></li>
        <li><a href="#">canned comments</a></li>
      </ul>
    </li>
    <li id="logOff"><a href="#">log off</a></li>
  </ul>
</div>
<p>
  click "new submission" and it should keep the "active" class
</p>
<div id="result">

</div>

乔恩·P

我已经快速而肮脏地解决了这个问题，会有比这更优雅的解决方案，但这会让你工作。

问题的主要来源是您在页面加载时设置了白线的起始位置。您不要在其他任何地方修改它。该activeCSS类是非常这里无关紧要。

我所做的是将点击处理程序和makeActive方法移动到文档就绪方法中，以赋予它们相同的范围。然后在makeActive方法中我重置了宽度和位置参数。

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

    $(document).on("click", "#newSubmission", function() {
      makeActive(this);
    });

    $("#cssmenu").menumaker({
      title: "Menu",
      breakpoint: 100,
      format: "multitoggle"
    });

    $("#cssmenu").prepend("<div id='menu-line'></div>");

    var foundActive = false,
      activeElement, linePosition = 0,
      menuLine = $("#cssmenu #menu-line"),
      lineWidth, defaultPosition, defaultWidth;

    $("#cssmenu > ul > li").each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
        foundActive = true;
      }
    });

    if (foundActive === false) {
      activeElement = $("#cssmenu > ul > li").first();
    }

    defaultWidth = lineWidth = activeElement.width();

    defaultPosition = linePosition = activeElement.position().left;

    menuLine.css("width", lineWidth);
    menuLine.css("left", linePosition);

    $("#cssmenu > ul > li").hover(function() {
      activeElement = $(this);
      lineWidth = activeElement.width();
      linePosition = activeElement.position().left;
      menuLine.css("width", lineWidth);
      menuLine.css("left", linePosition);
    }, function() {
      menuLine.css("left", defaultPosition);
      menuLine.css("width", defaultWidth);
    });

    function makeActive(obj) {
      var tid = $(obj).attr("id");
      $("#cssmenu > ul > li").each(function() {
        if (tid === $(this).attr("id")) {
          $("#result").append("found match<br>")
          $(this).addClass("active");
          //This is the new stuff - reset the defaults
          defaultWidth = lineWidth = $(this).width();
          defaultPosition = linePosition = $(this).position().left;
        } else {
          $(this).removeClass("active");
          $("#result").append("no match<br>")
        }
      });
    }

  });
})(jQuery);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#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 {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #b70102;
  width: auto;
}

#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #f3f3f3;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  padding: 20px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
  color: #f3f3f3;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 25px;
}

#cssmenu>ul>li.has-sub>a::after {
  position: absolute;
  top: 22px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu>ul>li.has-sub:hover>a::after {
  border-color: #f3f3f3;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  right: 0;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}

#cssmenu ul li:hover>ul>li {
  height: 32px;
}

#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}

#cssmenu ul ul li.has-sub>a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu.align-right ul ul li.has-sub>a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

#cssmenu ul ul li.has-sub:hover>a::after {
  border-color: #ffffff;
}

#cssmenu.small-screen {
  width: 100%;
}

#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}

#cssmenu.small-screen.align-center>ul,
#cssmenu.small-screen.align-right ul ul {
  text-align: left;
}

#cssmenu.small-screen ul li,
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen ul li:hover>ul>li {
  width: 100%;
  height: auto;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
}

#cssmenu.small-screen>ul>li,
#cssmenu.small-screen.align-center>ul>li,
#cssmenu.small-screen.align-right>ul>li {
  float: none;
  display: block;
}

#cssmenu.small-screen ul ul li a {
  padding: 20px 20px 20px 30px;
  font-size: 14px;
  color: #ffffff;
  background: none;
}

#cssmenu.small-screen ul ul li:hover>a,
#cssmenu.small-screen ul ul li a:hover {
  color: #ffffff;
}

#cssmenu.small-screen ul ul ul li a {
  padding-left: 40px;
}

#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul {
  position: relative;
  left: 0;
  right: auto;
  width: 100%;
  margin: 0;
}

#cssmenu.small-screen>ul>li.has-sub>a::after,
#cssmenu.small-screen ul ul li.has-sub>a::after {
  display: none;
}

#cssmenu.small-screen #menu-line {
  display: none;
}

#cssmenu.small-screen #menu-button {
  display: block;
  padding: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
}

#cssmenu.small-screen #menu-button::after {
  content: '';
  position: absolute;
  top: 21px;
  right: 20px;
  display: block;
  width: 15px;
  height: 2px;
  background: #ffffff;
}

#cssmenu.small-screen #menu-button::before {
  content: '';
  position: absolute;
  top: 26px;
  right: 20px;
  display: block;
  width: 15px;
  height: 3px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.15);
  height: 54px;
  width: 54px;
  cursor: pointer;
}

#cssmenu.small-screen .submenu-button::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 27px;
  display: block;
  width: 1px;
  height: 11px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 27px;
  display: block;
  width: 11px;
  height: 1px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button.submenu-opened:after {
  display: none;
}

#cssmenu.small-screen.select-list {
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<div id="cssmenu" class="align-center">
  <ul>
    <li id="editHome"><a href="#">Edit</a></li>
    <li id="newSubmission"><a href="#">new submission</a></li>
    <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart"></i> reports</a>
      <ul>
        <li><a href="#">Dr.&#39;s notes</a></li>
        <li><a href="#">number of samples</a></li>
        <li><a href="#">arrival temperatures</a></li>
        <li><a href="#">culture count</a></li>
        <li class="has-sub"><a href="#">summaries</a>
          <ul>
            <li><a href="#">% of target</a></li>
            <li><a href="#">stored motility</a></li>
            <li><a href="#">morphology</a></li>
            <li><a href="#">motility</a></li>
            <li><a href="#">TSD</a></li>
            <li><a href="#">CSA report for TSD date range</a></li>
            <li><a href="#">culture summary  by submission</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="has-sub active"><a href="#">setup</a>
      <ul>
        <li><a href="#">users</a></li>
        <li><a href="#">clients</a></li>
        <li><a href="#">canned comments</a></li>
      </ul>
    </li>
    <li id="logOff"><a href="#">log off</a></li>
  </ul>
</div>
<p>
  click "new submission" and it should keep the "active" class
</p>
<div id="result">

</div>

编辑

如果要使用active该类，可以执行以下操作。我觉得这样更好。

我在这里所做的是在退出悬停条件下，找到活动元素并基于此设置行。如果没有活动元素，我们回退到初始默认值。

$(document).on("click", "#newSubmission", function() {
  makeActive(this);
});

function makeActive(obj) {
  var tid = $(obj).attr("id");
  $("#cssmenu > ul > li").each(function() {
    if (tid === $(this).attr("id")) {
      $("#result").append("found match<br>")
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
      $("#result").append("no match<br>")
    }
  });
}

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

    $("#cssmenu").menumaker({
      title: "Menu",
      breakpoint: 100,
      format: "multitoggle"
    });

    $("#cssmenu").prepend("<div id='menu-line'></div>");

    var foundActive = false,
      activeElement, linePosition = 0,
      menuLine = $("#cssmenu #menu-line"),
      lineWidth, defaultPosition, defaultWidth;

    $("#cssmenu > ul > li").each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
        foundActive = true;
      }
    });

    if (foundActive === false) {
      activeElement = $("#cssmenu > ul > li").first();
    }

    defaultWidth = lineWidth = activeElement.width();

    defaultPosition = linePosition = activeElement.position().left;

    menuLine.css("width", lineWidth);
    menuLine.css("left", linePosition);

    $("#cssmenu > ul > li").hover(function() {
      activeElement = $(this);
      lineWidth = activeElement.width();
      linePosition = activeElement.position().left;
      menuLine.css("width", lineWidth);
      menuLine.css("left", linePosition);
    }, function() {
      //New Stuff -- Find the active element
      activeElement = $("#cssmenu .active");  
      //Set based on active element fulling back to defaultt  if there is none
      menuLine.css("left",  activeElement.length > 0 ? activeElement.position().left :  defaultPosition);
      menuLine.css("width", activeElement.length > 0 ? lineWidth = activeElement.width(): defaultWidth);
    });

  });
})(jQuery);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#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 {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #b70102;
  width: auto;
}

#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #f3f3f3;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#cssmenu>ul>li {
  float: left;
}

#cssmenu.align-center>ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center>ul>li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul>li {
  float: right;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  padding: 20px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
  color: #f3f3f3;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 25px;
}

#cssmenu>ul>li.has-sub>a::after {
  position: absolute;
  top: 22px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu>ul>li.has-sub:hover>a::after {
  border-color: #f3f3f3;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu li:hover>ul {
  left: auto;
}

#cssmenu.align-right li:hover>ul {
  right: 0;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}

#cssmenu ul li:hover>ul>li {
  height: 32px;
}

#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}

#cssmenu ul ul li.has-sub>a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

#cssmenu.align-right ul ul li.has-sub>a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}

#cssmenu ul ul li.has-sub:hover>a::after {
  border-color: #ffffff;
}

#cssmenu.small-screen {
  width: 100%;
}

#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}

#cssmenu.small-screen.align-center>ul,
#cssmenu.small-screen.align-right ul ul {
  text-align: left;
}

#cssmenu.small-screen ul li,
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen ul li:hover>ul>li {
  width: 100%;
  height: auto;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
}

#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
}

#cssmenu.small-screen>ul>li,
#cssmenu.small-screen.align-center>ul>li,
#cssmenu.small-screen.align-right>ul>li {
  float: none;
  display: block;
}

#cssmenu.small-screen ul ul li a {
  padding: 20px 20px 20px 30px;
  font-size: 14px;
  color: #ffffff;
  background: none;
}

#cssmenu.small-screen ul ul li:hover>a,
#cssmenu.small-screen ul ul li a:hover {
  color: #ffffff;
}

#cssmenu.small-screen ul ul ul li a {
  padding-left: 40px;
}

#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul {
  position: relative;
  left: 0;
  right: auto;
  width: 100%;
  margin: 0;
}

#cssmenu.small-screen>ul>li.has-sub>a::after,
#cssmenu.small-screen ul ul li.has-sub>a::after {
  display: none;
}

#cssmenu.small-screen #menu-line {
  display: none;
}

#cssmenu.small-screen #menu-button {
  display: block;
  padding: 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
}

#cssmenu.small-screen #menu-button::after {
  content: '';
  position: absolute;
  top: 21px;
  right: 20px;
  display: block;
  width: 15px;
  height: 2px;
  background: #ffffff;
}

#cssmenu.small-screen #menu-button::before {
  content: '';
  position: absolute;
  top: 26px;
  right: 20px;
  display: block;
  width: 15px;
  height: 3px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.15);
  height: 54px;
  width: 54px;
  cursor: pointer;
}

#cssmenu.small-screen .submenu-button::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 27px;
  display: block;
  width: 1px;
  height: 11px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 27px;
  display: block;
  width: 11px;
  height: 1px;
  background: #ffffff;
  z-index: 99;
}

#cssmenu.small-screen .submenu-button.submenu-opened:after {
  display: none;
}

#cssmenu.small-screen.select-list {
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<div id="cssmenu" class="align-center">
  <ul>
    <li id="editHome"><a href="#">Edit</a></li>
    <li id="newSubmission"><a href="#">new submission</a></li>
    <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bar-chart"></i> reports</a>
      <ul>
        <li><a href="#">Dr.&#39;s notes</a></li>
        <li><a href="#">number of samples</a></li>
        <li><a href="#">arrival temperatures</a></li>
        <li><a href="#">culture count</a></li>
        <li class="has-sub"><a href="#">summaries</a>
          <ul>
            <li><a href="#">% of target</a></li>
            <li><a href="#">stored motility</a></li>
            <li><a href="#">morphology</a></li>
            <li><a href="#">motility</a></li>
            <li><a href="#">TSD</a></li>
            <li><a href="#">CSA report for TSD date range</a></li>
            <li><a href="#">culture summary  by submission</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="has-sub active"><a href="#">setup</a>
      <ul>
        <li><a href="#">users</a></li>
        <li><a href="#">clients</a></li>
        <li><a href="#">canned comments</a></li>
      </ul>
    </li>
    <li id="logOff"><a href="#">log off</a></li>
  </ul>
</div>
<p>
  click "new submission" and it should keep the "active" class
</p>
<div id="result">

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

尝试为菜单/导航栏中的活动/默认选项卡设置 CSS，但活动类不起作用

为当前菜单设置CSS活动类

CSS onclick活动类无法正常工作

CSS中的标签菜单-如何设置活动标签

悬停活动后CSS下拉菜单无法保留

无法在CSS汉堡菜单中单击项目

我无法在CSS中显示标题菜单

CSS中的活动类

CSS 导航栏 - 导航栏中的活动类无法正常运行

无法设置活动菜单元素的样式

CSS菜单无法正常工作

无法在React CSS中设置100％的高度

无法通过 CSS 在 <section> 中设置图像

CSS类无法正常工作

CSS类无法正常工作

CSS类无法正常工作

css 类无法正常工作

无法识别我的 CSS 类

无法从 LocalStorage 设置 css 文件

CSS菜单子菜单无法正常工作

CSS 中的多级下拉菜单无法正常工作

在CSS的下拉菜单中无法获得全宽

CSS 中的下拉菜单无法正常工作

无法以CSS中的类为目标的类

无法在CSS中定位正文

无法在反应中添加css

无法在 CSS 中对齐文本

无法获取CSS菜单以正确对齐

Chrome无法访问CSS菜单

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档