单击菜单时的悬停效果

时间：2018-07-02 18:41:32

标签： html css

我有一个带有子菜单的HTML菜单，当您将鼠标悬停在主按钮上时会显示该子菜单，但是我想知道是否有可能在按钮上单击时使子菜单出现。 / p> 

*Configurações Padrões*/ ul.menu,
.menu li,
.menu a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

ul.menu ul {
  position: absolute;
  display: none;
}

ul.menu {
  float: left;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  padding: 0 5px;
  margin: 0px -8px;
  width: 100%;
  position: fixed;
  bottom: 0;
}


/* Configurações nivel 1*/

.menu li {
  float: left;
  width: auto;
  position: relative;
}

.menu li a {
  display: block;
  padding: 0 20px;
  line-height: 45px;
  height: 45px;
  float: left;
}


/* Configurações nivel 2*/

.menu li:hover>ul.submenu-1 {
  display: block;
  top: -145px;
  left: 0;
  padding: 5px;
  width: 200px;
}

.menu ul.submenu-1 a {
  width: 160px;
  padding: 0 20px;
}


/* Configurações nivel 2*/

.menu li:hover>ul.submenu-2 {
  display: block;
  top: 0;
  left: 135px;
  padding: 5px;
  width: 200px;
}

.menu ul.submenu-2 a {
  width: 140px;
  padding: 0 20px;
}


/* Configurações nivel 3*/

.menu li:hover>ul.submenu-3 {
  display: block;
  top: 0;
  left: 195px;
  padding: 5px;
  width: 200px;
}

.menu ul.submenu-3 a {
  width: 160px;
  padding: 0 20px;
}


/*Configurações de cores*/


/*nivel 1*/

.menu {
  background: #CCC;
}

.menu a {
  color: #000;
}

.menu li:hover>a {
  background: #999;
  color: #fff;
}


/*nivel 2*/

.submenu-1 {
  background: #999;
}

.submenu-1 a {
  color: #fff;
}

.submenu-1 li:hover>a {
  background: #666;
}


/*nivel 3*/

.submenu-2 {
  background: #666;
}

.submenu-2 a {
  color: #fff;
  margin-top: -4px;
}

.submenu-2 li:hover>a {
  background: #333;
}


/*nivel 3*/

.submenu-3 {
  background: #333;
}

.submenu-3 a {
  color: #fff;
}

.submenu-3 li:hover>a {
  background: #000;
}

.menuul li:hover,
ul li.active {}
<ul class="menu">
  <li><a href="#">Iniciar</a>

    <ul class="submenu-1">
      <li><a href="#">Submenu 1</a>

        <ul class="submenu-3">
          <li><a href="#">Submenu 7</a></li>
          <li><a href="#">Submenu 8</a></li>
          <li><a href="#">Submenu 9</a></li>
        </ul>


      </li>
      <li><a href="#">Submenu 2</a></li>
      <li><a href="#">Submenu 3</a></li>

      <ul class="submenu-2">
        <li><a href="#">Submenu 4</a></li>
        <li><a href="#">Submenu 5</a></li>
        <li><a href="#">Submenu 6</a></li>
      </ul>
  </li>
  </ul>
  </li>
</ul>

我需要类似此站点的Windows98样式按钮的内容： http://osrollers.tumblr.com/

2 个答案:

答案 0 :(得分：0)

  • 将click事件添加到列表元素。
  • 通过classList.toggle()通过CSS类切换所需的元素。

var menuLi = document.querySelector(".menu li");
var submenu1 = document.querySelector(".submenu-1");

menuLi.addEventListener("click", function() {
  submenu1.classList.toggle("toggle-submenu-1");
});
*Configurações Padrões*/ ul.menu,
.menu li,
.menu a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

ul.menu ul {
  position: absolute;
  display: none;
}

ul.menu {
  float: left;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  padding: 0 5px;
  margin: 0px -8px;
  width: 100%;
  position: fixed;
  bottom: 0;
}


/* Configurações nivel 1*/

.menu li {
  float: left;
  width: auto;
  position: relative;
}

.menu li a {
  display: block;
  padding: 0 20px;
  line-height: 45px;
  height: 45px;
  float: left;
}


/* Configurações nivel 2*/

.toggle-submenu-1 {
  display: block !important;
  top: -145px;
  left: 0;
  padding: 5px;
  width: 200px;
}


/*.menu li:hover>ul.submenu-1 {
  display: block;
  top: -145px;
  left: 0;
  padding: 5px;
  width: 200px;
}*/

.menu ul.submenu-1 a {
  width: 160px;
  padding: 0 20px;
}


/* Configurações nivel 2*/

.menu li:hover>ul.submenu-2 {
  display: block;
  top: 0;
  left: 135px;
  padding: 5px;
  width: 200px;
}

.menu ul.submenu-2 a {
  width: 140px;
  padding: 0 20px;
}


/* Configurações nivel 3*/

.menu li:hover>ul.submenu-3 {
  display: block;
  top: 0;
  left: 195px;
  padding: 5px;
  width: 200px;
}

.menu ul.submenu-3 a {
  width: 160px;
  padding: 0 20px;
}


/*Configurações de cores*/


/*nivel 1*/

.menu {
  background: #CCC;
}

.menu a {
  color: #000;
}

.menu li:hover>a {
  background: #999;
  color: #fff;
}


/*nivel 2*/

.submenu-1 {
  background: #999;
}

.submenu-1 a {
  color: #fff;
}

.submenu-1 li:hover>a {
  background: #666;
}


/*nivel 3*/

.submenu-2 {
  background: #666;
}

.submenu-2 a {
  color: #fff;
  margin-top: -4px;
}

.submenu-2 li:hover>a {
  background: #333;
}


/*nivel 3*/

.submenu-3 {
  background: #333;
}

.submenu-3 a {
  color: #fff;
}

.submenu-3 li:hover>a {
  background: #000;
}

.menuul li:hover,
ul li.active {}
<ul class="menu">
  <li><a href="#">Iniciar</a>

    <ul class="submenu-1">
      <li><a href="#">Submenu 1</a>

        <ul class="submenu-3">
          <li><a href="#">Submenu 7</a></li>
          <li><a href="#">Submenu 8</a></li>
          <li><a href="#">Submenu 9</a></li>
        </ul>


      </li>
      <li><a href="#">Submenu 2</a></li>
      <li><a href="#">Submenu 3</a></li>

      <ul class="submenu-2">
        <li><a href="#">Submenu 4</a></li>
        <li><a href="#">Submenu 5</a></li>
        <li><a href="#">Submenu 6</a></li>
      </ul>
  </li>
  </ul>
  </li>
</ul>

答案 1 :(得分：0)

如果要在单击时激活子菜单，而不是将鼠标悬停在上面，则必须使用一个小的JavaScript代码。

请查看代码段中的注释！

// collect each menu item
const links = document.querySelectorAll(".menu>li>a");

// run a loop
for (let i=0; i<links.length; i++)
{
  // to bind a click event listener to each menu item
  links[i].addEventListener("click", function()
  {
    // do stuff only if the current item has a submenu
    if (this.nextSibling != null)
    {
      // cache the submenu of the current item
      let submenu = this.nextSibling.nextSibling;

      // check if the submenu is already visible
      if (submenu.classList.contains("active"))
      {
        // if so, hide it
        submenu.classList.remove("active");
      }
      else
      {
        // if not, show it
        submenu.classList.add("active");
      }
    }
  });
}
.submenu {
display: none;}

.submenu.active {
display: block;}
 
 
<ul class="menu"> 
	<li><a href="#">Main</a>
		<ul class="menu submenu"> 
			<li><a href="#">1</a>
				<ul class="menu submenu"> 
					<li><a href="#">1.1</a></li>
					<li><a href="#">1.2</a></li>
					<li><a href="#">1.3</a></li>
				</ul>
			</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a>
				<ul class="menu submenu"> 
					<li><a href="#">3.1</a></li>
					<li><a href="#">3.2</a></li>
					<li><a href="#">3.3</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

相关问题
最新问题