Question

我想创建侧面菜单以在悬停时打开。
但是我希望菜单显示在图像中，只有打开的区域我们可以将鼠标悬停在
但是当前我尝试一些代码，但是sidemenu以全角打开，我想在悬停时打开单独的图标名称。我想创建侧面菜单以在悬停时打开。
但是我希望菜单显示在图像中，只有打开的区域我们可以将鼠标悬停在
但是目前我尝试一些代码，但是sidemenu以全角打开，我想在悬停时打开单独的图标名称。
我想创建像这样的

.fa-2x {
            font-size: 2em;
        }
        
        .fa {
            position: relative;
            display: table-cell;
            width: 60px;
            height: 36px;
            text-align: center;
            vertical-align: middle;
            font-size: 20px;
        }
        
        .main-menu:hover,
        nav.main-menu.expanded {
            width: 250px;
            overflow: visible;
        }
        
        .main-menu {
            background: #212121;
            border-right: 1px solid #e5e5e5;
            position: absolute;
            top: 0;
            bottom: 0;
            height: 100%;
            left: 0;
            width: 60px;
            overflow: hidden;
            -webkit-transition: width .05s linear;
            transition: width .05s linear;
            -webkit-transform: translateZ(0) scale(1, 1);
            z-index: 1000;
        }
        
        .main-menu li {
            position: relative;
            display: block;
            width: 250px;
        }
        .main-menu li>a {
            position: relative;
            display: table;
            border-collapse: collapse;
            border-spacing: 0;
            color: #999;
            font-size: 14px;
            text-decoration: none;
            -webkit-transform: translateZ(0) scale(1, 1);
            -webkit-transition: all .1s linear;
            transition: all .1s linear;
        }
        .main-menu .nav-text {
            position: relative;
            display: table-cell;
            vertical-align: middle;
            width: 190px;
        }
       
        nav ul,
        nav li {
            outline: 0;
            margin: 0;
            padding: 0;
        }

<html>
<head>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div class="area"></div>
    <nav class="main-menu">
        <ul>
            <li>
                <a href="http://justinfarrow.com">
                    <i class="fa fa-home fa-2x"></i>
                    <span class="nav-text">
                            Dashboard
                        </span>
                </a>
            </li>
            <li class="has-subnav">
                <a href="#">
                    <i class="fa fa-laptop fa-2x"></i>
                    <span class="nav-text">
                            Stars Components
                        </span>
                </a>
            </li>
            <li class="has-subnav">
                <a href="#">
                    <i class="fa fa-list fa-2x"></i>
                    <span class="nav-text">
                            Forms
                        </span>
                </a>
            </li>
        </ul>

        
    </nav>
</body>

</html>

Answer 1

您必须使用css :hover和css position检查片段。

.fa-2x {
  font-size: 2em;
}

.fa {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}

.main-menu {
  background: #212121;
  border-right: 1px solid #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 60px;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
}

.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}

.main-menu li:hover .nav-text {
  display: block;
  position: absolute;
  top: 0px;
  z-index: 1;
  left: 60px;
  background: #000;
  padding: 10px;
  border-radius: 5px;
}

.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #999;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}

.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  display: none;
}

nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}

<html>

<head>
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>

<body>
  <div class="area"></div>
  <nav class="main-menu">
    <ul>
      <li>
        <a href="http://justinfarrow.com">
          <i class="fa fa-home fa-2x"></i>
          <span class="nav-text">
                            Dashboard
                        </span>
        </a>
      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-laptop fa-2x"></i>
          <span class="nav-text">
                            Stars Components
                        </span>
        </a>
      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-list fa-2x"></i>
          <span class="nav-text">
                            Forms
                        </span>
        </a>
      </li>
    </ul>


  </nav>
</body>

</html>

在悬停时创建Sidemenu to Open菜单（一次只能打开一个菜单）吗？

1 个答案: