我正在尝试水平扩展侧面导航栏中的链接。我已经通过引导程序 4 的教程努力尝试。我的代码如下。
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
这段代码的结果如下。
.
当我点击住宅链接时,下拉菜单如下。
.
但是我实际上想要这样的东西。
答案 0 :(得分:1)
我对你的代码做了一些修改,并按照你的要求完成了输出。
HTML
<aside>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled submenu" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
</aside>
CSS
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
aside {
width: 100%;
height: 100%;
max-width: 200px;
}
aside .dropright {
position: relative;
background: yellow;
}
aside .dropright a {
padding: 10px;
display: block;
}
aside .dropright .submenu {
position: absolute;
background: black;
left: 100%;
right: auto;
width: 100%;
top: 0;
}
aside .dropright .submenu li a {
color: #fff;
display: block;
}
这是 codepen 链接
答案 1 :(得分:0)
我对编程很陌生,但你为什么不使用 Bootstrap 的例子:
像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Default dropright button-->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Residential
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links-->
<a class="dropdown-item" href="#">Rami Villa</a>
<a class="dropdown-item" href="#">Alpine Metals Jafza</a>
<a class="dropdown-item" href="#">Home 3</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
答案 2 :(得分:0)
您需要在 .dropdown-menu
上使用 <ul>
而不是 .collapse
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="list-unstyled dropdown-menu" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>