将下拉菜单添加到侧面导航菜单

时间：2019-07-23 16:12:37

标签： html css

编辑代码并将其添加到代码段。这是从下面两个链接中提取的完整代码。

body { 
     
    font-family: 'Alegreya Sans', sans-serif; 
    overflow-x: hidden; 
    background: gray; 
    color: white; 
} 
#content { 
    padding: 15px; 
    transition: margin-left 0.7s; 
    overflow: hidden; 
    width: 100%; 
} 
.slide a { 
    color: #000; 
    font-size: 36px; 
} 
.nav .close { 
    position: absolute; 
    top: 8px; 
    right: 22px; 
    margin-left: 50px; 
    font-size: 30px; 
    color: #ccc; 
} 
.nav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #282828; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.7s; 
} 

.nav a.item { 
    display: flex; 
    flex-direction: row; 
    padding: 18px 30px; 
    font-size: 30px; 
    text-decoration: none; 
    color: #ccc; 
    background-color: #3d3d3d; 
    border-top: 1px solid #ccc; 
} 
.nav .last { 
    border-bottom: 1px solid #ccc; 
} 
.nav a.item:hover { 
    color: #fff; 
    background-color: #cf0000; 
    transition: 0.4s; 
} 
.nav .icon { 
    padding-right: 10px; 
    font-size: 35px; 
} 
.nav ul { 
    display: flex; 
    position: absolute; 
    width: 100%; 
    margin-top: 50px; 
} 
.nav ul li { 
    list-style: none; 
} 
.nav ul li a.inline { 
    font-size: 26px; 
    color: #ccc; 
    padding: 6px 5px 3px; 
} 
.nav ul li a.inline:hover { 
    color: #cf0000; 
} 

.content p{ 
  font-size: 18px; 
  text-align: center; 
  margin-left: 310px; 
} 

.footer-home{ 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    width:100%; 
    height: auto; 
    background-color:#282828; 
    color: white; 
    padding: 10px; 
    text-align: center; 
} 

* { 
    box-sizing: border-box; 
  } 

.column { 
    float: left; 
    width: 33.33%; 
    padding: 5px; 
  } 

/* Clearfix (clear floats) */ 
.row::after { 
    content: ""; 
    clear: both; 
    display: table; 
  }
<!DOCTYPE html> 
<html> 
<head> 
  <title>Home</title> 
  <script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script> 
  <link rel="stylesheet" href="style.css"> 
<script> 
  function openSlideMenu(){ 
    document.getElementById('menu').style.width = '250px'; 
    document.getElementById('content').style.marginLeft = '250px'; 
  } 
  function closeSlideMenu(){ 
    document.getElementById('menu').style.width = '0'; 
    document.getElementById('content').style.marginLeft = '0'; 
  } 
</script> 
</head> 
<body> 

  <div id="content"> 

    <span class="slide"> 
      <a href="#" onclick="openSlideMenu()"> 
        <i class="fas fa-bars"></i> 
      </a> 
    </span> 

    <div id="menu" class="nav"> 
      <a href="#" class="close" onclick="closeSlideMenu()"> 
        <i class="fas fa-times"></i> 
      </a> 
      <img src="#" alt="" width="150" height="100"> 
      <a href="index.html" class="item"><i class="fas fa-home icon"></i>Home</a> 
      <a href="dashboard.html" class="item"><i class="fas fa-desktop icon"></i>Dashboards</a> 
      <a href="maps.html" class="item"><i class="fas fa-map-marker icon"></i>Engagements</a> 
      <a href="contact.html" class="item last"><i class="fab fa-wpforms icon"></i>Contact</a> 
      <ul>

无法使用下拉菜单。

尝试了几种使下拉菜单处于活动状态的方法。

html-http://textsnip.com/nau26f

css-http://textsnip.com/dyk75z

将鼠标悬停在仪表板上时尝试使下拉菜单处于活动状态。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分：1)

这是我的解决方法

function openSlideMenu(){ 
    document.getElementById('menu').style.width = '250px'; 
    document.getElementById('content').style.marginLeft = '250px'; 
} 
function closeSlideMenu(){ 
    document.getElementById('menu').style.width = '0'; 
    document.getElementById('content').style.marginLeft = '0'; 
} 
body {     
    font-family: 'Alegreya Sans', sans-serif; 
    overflow-x: hidden; 
    background: gray; 
    color: white; 
} 

#content { 
    padding: 15px; 
    transition: margin-left 0.7s; 
    overflow: hidden; 
    width: 100%; 
} 

.slide a { 
    color: #000; 
    font-size: 36px; 
} 

.nav .close { 
    position: absolute; 
    top: 8px; 
    right: 22px; 
    margin-left: 50px; 
    font-size: 30px; 
    color: #ccc; 
} 

.nav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #282828; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.7s; 
} 

.nav a.item { 
    display: flex; 
    flex-direction: row; 
    padding: 18px 30px; 
    font-size: 30px; 
    text-decoration: none; 
    color: #ccc; 
    background-color: #3d3d3d; 
    border-top: 1px solid #ccc; 
} 

.nav .last { 
    border-bottom: 1px solid #ccc; 
} 

.nav a.item:hover { 
    color: #fff; 
    background-color: #cf0000; 
    transition: 0.4s; 
} 

.nav .icon { 
    padding-right: 10px; 
    font-size: 35px; 
} 

.nav ul { 
    display: flex; 
    position: absolute; 
    width: 100%; 
    margin-top: 50px; 
} 

.nav ul li { 
    list-style: none; 
} 
.nav ul li a.inline { 
    font-size: 26px; 
    color: #ccc; 
    padding: 6px 5px 3px; 
} 

.nav ul li a.inline:hover { 
    color: #cf0000; 
} 

.content p{ 
  font-size: 18px; 
  text-align: center; 
  margin-left: 310px; 
} 

.footer-home{ 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    width:100%; 
    height: auto; 
    background-color:#282828; 
    color: white; 
    padding: 10px; 
    text-align: center; 
} 


* { 
    box-sizing: border-box; 
  } 

.column { 
    float: left; 
    width: 33.33%; 
    padding: 5px; 
  } 

/* Clearfix (clear floats) */ 
.row::after { 
    content: ""; 
    clear: both; 
    display: table; 
  }

.dropbtn {
    display: flex; 
    flex-direction: row; 
    padding: 18px 30px; 
    font-size: 30px; 
    text-decoration: none; 
    color: #ccc; 
    background-color: #3d3d3d; 
    border-top: 1px solid #ccc; 
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
}

.dropdown-content a {
    display: flex; 
    width: 100%;
    flex-direction: row; 
    padding: 18px 30px; 
    font-size: 30px; 
    text-decoration: none; 
    color: #ccc; 
    background-color: #3d3d3d; 
    border-top: 1px solid #ccc;
}

.dropdown-content a:hover {background-color: #cf0000;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #cf0000;}
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script> 

<div id="content"> 

  <span class="slide"> 
      <a href="#" onclick="openSlideMenu()"> 
        <i class="fas fa-bars"></i> 
      </a> 
  </span> 

  <div id="menu" class="nav"> 

      <a href="#" class="close" onclick="closeSlideMenu()"> 
        <i class="fas fa-times"></i> 
      </a> 

      <img src="#" alt="" width="150" height="100"> 
      <a href="index.html" class="item"><i class="fas fa-home icon"></i>Home</a> 

      <div class="dropdown">

        <a class="dropbtn">
          <i class="fas fa-desktop icon"></i>
          Dashboards
        </a>

        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>

      </div>

      <a href="maps.html" class="item">
        <i class="fas fa-map-marker icon"></i>
        Engagements
      </a> 
      
      <a href="contact.html" class="item last">
        <i class="fab fa-wpforms icon"></i>
        Contact
      </a> 

  </div>
</div>

答案 1 :(得分：0)

请给我们更多代码。您发送的HTML文件不完整。

相关问题
最新问题