边栏菜单和带有CSS的悬停子菜单

时间：2017-07-04 12:15:40

标签： css

我正在寻找改善sidebar menu中的Django application。当用户将鼠标放在每个菜单标题上时，我想显示具有悬停效果的子菜单。

这是我的剧本：

＆＃13;
＆＃13; 
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.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: #0083A2;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  position: absolute;
  top: 170px;
  bottom: 0;
  height: 80%;
  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>ul {
  margin: 7px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: white;
  font-family: Helvetica;
  font-weight: bolder;
  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-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  font-family: 'Helvetica Neue', sans-serif;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.area {
  float: left;
  background: #e2e2e2;
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 300;
  src: local('Helvetica Neue'), local('Helvetica Neue'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
nav.main-menu>ul>li.has-subnav>ul>li {
  margin-left: 100px;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>



<div class="area"></div>
<nav class="main-menu">
  <ul>
    <li>
      <a href="{% url " accueil " %}">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
           Accueil
        </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#"><i class="fa fa-file-text-o fa-2x"></i>
        <span class="nav-text">Fiches Identifications</span></a>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Individus</a></li>
        <li><a href="#">Sociétés</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-bar-chart-o fa-2x"></i>
        <span class="nav-text">
           Statistiques
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-folder fa-2x"></i>
        <span class="nav-text">
           DatasystemsDOC
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-cog fa-spin fa-2x fa-fw"></i>
        <span class="nav-text">
           Configurations
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-life-ring fa-2x"></i>
        <span class="nav-text">
          Aide et Support
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-info fa-2x"></i>
        <span class="nav-text">
           Documentation
        </span>
      </a>
    </li>
  </ul>

  <ul class="logout">
    <li>
      <a href="#">
        <i class="fa fa-power-off fa-2x"></i>
        <span class="nav-text">
           Logout
        </span>
      </a>
    </li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

我的预览位于：see preview

当我将鼠标放在Accueil上并显示垂直悬停效果时，我想显示子Individus Sociétés Fiches Identifications。

你有任何想法吗？

2 个答案:

答案 0 :(得分：1)

这将解决您的问题。

li.has-subnav ul {
    display: none;
}

li.has-subnav:hover ul {
    display: block;
}

我在这里做的是默认情况下隐藏子菜单。但是在悬停时，会显示子菜单。 

        li.has-subnav ul {
            display: none;
        }

        li.has-subnav:hover ul {
            display: block;
        }



@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.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: #0083A2;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  position: absolute;
  top: 170px;
  bottom: 0;
  height: 80%;
  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>ul {
  margin: 7px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: white;
  font-family: Helvetica;
  font-weight: bolder;
  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-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  font-family: 'Helvetica Neue', sans-serif;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.area {
  float: left;
  background: #e2e2e2;
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 300;
  src: local('Helvetica Neue'), local('Helvetica Neue'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
nav.main-menu>ul>li.has-subnav>ul>li {
  margin-left: 100px;
}
<nav class="main-menu">
  <ul>
    <li>
      <a href="{% url " accueil " %}">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
           Accueil
        </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#"><i class="fa fa-file-text-o fa-2x"></i>
        <span class="nav-text">Fiches Identifications</span></a>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Individus</a></li>
        <li><a href="#">Sociétés</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-bar-chart-o fa-2x"></i>
        <span class="nav-text">
           Statistiques
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-folder fa-2x"></i>
        <span class="nav-text">
           DatasystemsDOC
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-cog fa-spin fa-2x fa-fw"></i>
        <span class="nav-text">
           Configurations
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-life-ring fa-2x"></i>
        <span class="nav-text">
          Aide et Support
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-info fa-2x"></i>
        <span class="nav-text">
           Documentation
        </span>
      </a>
    </li>
  </ul>

  <ul class="logout">
    <li>
      <a href="#">
        <i class="fa fa-power-off fa-2x"></i>
        <span class="nav-text">
           Logout
        </span>
      </a>
    </li>
  </ul>
</nav>

答案 1 :(得分：1)

试试这段代码

$('ul li').hover(function() {
  $(this).find('li').closest('ul').toggle(1000);
});
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.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: #0083A2;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  position: absolute;
  top: 0px;
  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>ul {
  margin: 7px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: white;
  font-family: Helvetica;
  font-weight: bolder;
  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-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  font-family: 'Helvetica Neue', sans-serif;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.area {
  float: left;
  background: #e2e2e2;
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 300;
  src: local('Helvetica Neue'), local('Helvetica Neue'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
nav.main-menu>ul>li.has-subnav>ul>li {
  margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<div class="area"></div>
<nav class="main-menu">
  <ul>
    <li>
      <a href="{% url " accueil " %}">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
               Accueil
         </span>
      </a>
    </li>
    <li class="has-subnav">
      <a href="#"><i class="fa fa-file-text-o fa-2x"></i>
            <span class="nav-text">Fiches Identifications</span></a>
      <ul style='display:none'>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Individus</a></li>
        <li><a href="#">Sociétés</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-bar-chart-o fa-2x"></i>
        <span class="nav-text">
               Statistiques
            </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-folder fa-2x"></i>
        <span class="nav-text">
               DatasystemsDOC
            </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-cog fa-spin fa-2x fa-fw"></i>
        <span class="nav-text">
               Configurations
            </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-life-ring fa-2x"></i>
        <span class="nav-text">
              Aide et Support
            </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-info fa-2x"></i>
        <span class="nav-text">
               Documentation
            </span>
      </a>
    </li>
  </ul>

  <ul class="logout">
    <li>
      <a href="#">
        <i class="fa fa-power-off fa-2x"></i>
        <span class="nav-text">
               Logout
         </span>
      </a>
    </li>
  </ul>
</nav>

相关问题
最新问题